言

1.1「腾讯位置服务」是什么？

立足生态，连接未来

腾讯位置服务平台依托庞大的数据生态，以定位、地图展示、地点搜索、路线规划、导航、室内图、海外图等位置服务能力和LBS大数据能力为基础，面向开发者提供方便、易用、高效的LBS服务产品。当前腾讯位置服务数据能力已覆盖10亿人的位置行为数据、日均超过600亿次的定位调用、每日支持1亿次位置检索。

1.2「腾讯位置服务」可应用的场景？

随着功能的日益完善，腾讯位置服务可适用的场景也越来越多，如物流业务、智能出行、o2o业务、共享单车、运动健康、LBS游戏服务等行业均可见腾讯位置服务的身影。笔者也将通过此文展示下腾讯位置服务在智能出行行业的应用与实践。

需求背景

2.1 「乘车二维码」微信小程序

自从2017年微信上线小程序以来，小程序已经迅速成长为一个巨大的生态，吸引各行各业的开发者或服务商参与其中。小程序与线下场景的结合也日益紧密，其中，乘车二维码微信小程序无疑让人们的出行服务变的更加简单、快捷。先乘车，后扣费，无论手机是否联网，是否有信号，都可以很顺畅的进行乘车。

2.2 完善「乘车二维码」微信小程序

有了最基本的「乘车二维码」功能对用户体验来说，还是远远不够的，为此，从用户体验的角度出发，我们逐渐新增了一些实用的功能，比如查询附近的公交信息、用户路线规划等。也正因为新增了这些实用性的功能，我们发现「乘车二维码」微信小程序在数据表现(如日活、留存、使用时长)方面更加出色了，「腾讯位置服务」也成为我们「乘车二维码」微信小程序内不可或缺的角色。

接下来，笔者将通过公交地图、路线规划两个功能点更加详细的介绍「腾讯位置服务」中的微信小程序 JavaScript SDK、微信小程序插件。

公交地图

3.1 效果预览

3.2 技术点分析

在上面的效果预览图中，我们不难发现，实现公交地图功能主要包含以下技术要点：

• 获取用户当前位置信息

• 通过坐标点获取附近公交信息

• 地图展示、标注

3.3 技术点实现

3.3.1 获取用户当前位置信息

我们可以通过微信小程序官方提供的api：wx.getLocation，来获取用户的当前位置坐标点信息：

wx.getLocation({
type: 'gcj02',
success (res) {
const latitude=res.latitude
const longitude=res.longitude
}
})

这里我们将 type 指定为 gcj02 获取到的坐标点信息可在后续接口中直接使用，相对应的，如果将 type 指定为 wgs84，后续我们需要进一步进行坐标转换。

还有个需要注意的是，该接口需要经过用户授权同意才能调用，因此我们需要在 app.json 文件中新增相关配置：

// app.json
"permission": {
"scope.userLocation": {
"desc": "你的位置信息将用于查询公交信息"
}
}

3.3.2 获取附近公交信息

附近公交数据哪里来？

这里我们便用到了微信小程序原生LBS能力的最佳拍档-- 微信小程序JavaScript SDK。

腾讯位置服务为微信小程序提供了基础的标点能力、线和圆的绘制接口等地图组件和位置展示、地图选点等地图API位置服务能力支持，使得开发者可以自由地实现自己的微信小程序产品。在此基础上，腾讯位置服务微信小程序JavaScript SDK是专为小程序开发者提供的LBS数据服务工具包，可以在小程序中调用腾讯位置服务的POI检索、关键词输入提示、地址解析、逆地址解析、行政区划和距离计算等数据服务，让您的小程序更强大！

接下来笔者将展示如何通过微信小程序JavaScript SDK获取附近公交的信息。

1. 开通「腾讯位置服务」：在微信小程序后台依次选择开发->开发者工具->腾讯位置服务，然后点击开通按钮，按照提示为您的小程序开通「腾讯位置服务」

2. 申请开发者密钥(key)：申请密钥（https://lbs.qq.com/dev/console/key/manage）

3. 安全域名设置：在在微信小程序后台依次选择设置->开发设置中设置request合法域名，添加 https://apis.map.qq.com

4. 下载微信小程序 JavaScript SDK：微信小程序JavaScriptSDK v1.2（http://3gimg.qq.com/lightmap/xcx/jssdk/qqmap-wx-jssdk1.2.zip）

5. 小程序使用：

//index.js
// 引入 JavaScript SDK 核心类
let QQMapWX=require('../../libs/qqmap-wx-jssdk.js');
let qqmapsdk;
Page({
onLoad: function  {
// 实例化API核心类
qqmapsdk=new QQMapWX({
key: '申请的key'
});
},
onShow: function  {
// 调用接口
qqmapsdk.search({
keyword: '公交车站',
location: '28.636767,115.855820',
filter: 'category=公交站',
success: function (res) {
console.log(res);
},
fail: function (res) {
console.log(res);
},
complete: function (res) {
console.log(res);
}
});
}
})

返回结果：

可以看到，我们已经拿到了我们想要的公交数据，接下来将公交数据在地图上标注展示出来。

3.3.3 地图展示、标注

公交信息的展示使用到了「腾讯位置服务」为小程序提供的 map 组件，我们需要将公交信息组装成 markers 从而绘制到地图组件上。

关于地图组件的具体使用可参考官方文档：map组件的使用（https://developers.weixin.qq.com/miniprogram/dev/component/map.html）

3.4 小结

可以看到，我们通过微信小程序JavaScript SDK可以很轻松的获取到附近的公交信息。当然，微信小程序JavaScript SDK的能力也远远不仅于此，它还提供很多实用性的功能满足多种使用场景：

详细使用可参考官方文档：微信小程序JavaScript SDK 使用方法（https://lbs.qq.com/qqmap_wx_jssdk/qqmapwx.html）

需要注意的是，每个key的每个服务接口的调用量都有日调用量：1万次/Key、并发数：5次/key/秒的限制，如若您的微信小程序使用量超出这个限制，可通过控制台->配额申请（https://lbs.qq.com/dev/console/quota/applyList）中免费申请你需要的配额。

路线规划

如果说，「乘车二维码」微信小程序让人们的出行变得更加简单、快捷。

那么，路线规划插件则为人们怎么出行提供了最优解。

4.1 效果预览

4.2 路线规划插件

腾讯位置服务路线规划插件 提供路线规划等功能，根据起终点，多种出行方式智能规划最佳出行路线及详情。开发者可以将路线规划插件嵌入到自建小程序的页面里，实现路线规划功能。

可以看到，通过使用路线规划插件，我们可以很方便的在我们「乘车二维码」微信小程序内完成路线规划功能，接入步骤也较为简单，主要分为以下几步：

插件申请接入：

在微信小程序后台管理平台中，依次选择设置->第三方服务->插件管理里点击添加插件，搜索腾讯位置服务路线规划申请，审核通过后，小程序开发者可在小程序内使用该插件。

引入插件包：

// app.json
"plugins": {
"routePlan": {
"version": "1.0.5",
"provider": "wx50b5593e81dd937a"
}
}

设置定位授权:

// app.json
"permission": {
"scope.userLocation": {
"desc": "你的位置信息将用于小程序定位"
}
}

使用插件：

let key='申请的key'; //使用在腾讯位置服务申请的key
let referer=''; //调用插件的app的名称
let endPoint=JSON.stringify({ //终点
'name': '八一广场',
'latitude': 28.673400,
'longitude': 115.904500
});
wx.navigateTo({
url: 'plugin://routePlan/index?key=' + key + '&referer=' + referer + '&endPoint=' + endPoint
});

在集成路线规划插件后，进一步丰富了我们「乘车二维码」微信小程序的使用场景，现在，用户可以在不使用地图类App的情况下进行最优路线规划，躲避拥堵，方便又快捷。

4.3 小结

「腾讯位置服务」提供的微信小程序插件，可以说让微信小程序一步拥有地图功能，大大的减少了我们开发的工作量、提升用户体验、增加了小程序的使用场景。

目前，「腾讯位置服务」已经为我们提供了三款实用性插件：

• 路线规划：根据起点、终点，智能规划最佳出行路线，并支持多种出行方式。

• 地铁图：支持全国所有城市地铁线路静态展示、信息查询、线路检索及规划等功能。

• 地图选点：快速、准确地选择并确认自己的当前位置，并将相关位置信息回传给开发者。

具体可查看官方文档：微信小程序插件（https://lbs.qq.com/miniprogram_plugin/index.html）。

相信后续也会为我们提供更多功能的插件。

结语

我们在完善「乘车二维码」微信小程序的道路上从未停止过脚步，给用户提供完美的出行体验是我们的终极目标。我们也不会停止在「腾讯位置服务」上的探索，目前所使用到的能力也仅仅是冰山一角，后续我们还会继续尝试「腾讯位置服务」提供的个性化地图、地铁图等能力，力争给用户提供最完美的出行体验。

2-7

如果你有把微信的聊天记录导出到表格或者网页上的需求，适合看看本文章，本文的方法可以让你把微信的聊天记录导出备份，可以在完全脱离微信的情况下随时调取查看聊天数据。

本文介绍的软件可以导出两种格式的聊天记录备份文件，一种是表格，一种是网页。

导出表格的好处是文本紧凑，篇幅小，缺点是聊天记录中的图片、语音、视频、文件，不能直接打开，但是会帮你单独放到文件夹中。

导出到网页的估缺点和导出表格的正好相反，页面是啰嗦点，但是所有的内容都可以在一个页面上看完，可以看图片、听语音、播视频、开视频

以下是具体方法

首先准备好以下需要用到的东西：

1，一台电脑

2，有你微信的手机

3，你的微信

4，【微信聊天记录挖掘机】工具，以下教程中有提供（第二部分第四步参考资料）

下面开始搞

首先是第一部分：迁移手机数据到电脑

注意，如果你已经是日常在电脑上使用微信了，那微信的数据都在电脑上，就不用看第一部分了，请直接看下面第二部分，也就是直接看电脑上的操作，不用再搞手机上的了。

一，电脑保持与手机处于同一WIFI或者同一网络下，然后电脑登录微信，电脑登录微信后，手机上的微信需要按以下操作，点右下角【我】-【设置】

二、然后点【聊天】

三、下一步点【聊天记录迁移与备份】，此处是以安卓为例，如果你是苹果手机，这里不一定有这个菜单，可能在其它菜单里，你自己找找看吧

四、然后选择【迁移】-【迁移到电脑】

五、如果你要迁移和导出所有的聊天记录，那下一个页面选择绿色的【迁移全部聊天记录】按钮，如果你只需要导出部分聊天的记录，那就选择【迁移部分聊天记录】，如下图

六、然后就开始迁移，需要一些时间，等待迁移完成后，进入第二部分的操作

第二部分，电脑上的操作

一、经过上面的步骤，数据已经到了电脑上，你可以找一个数据时间久远一点的人，手动过一遍数据，相当于让微信传到电脑上的内容做一次解析，这样导出才能完整，以下举例，在电脑版微信上找一个人，在他的窗口右上角点【菜单】-【聊天记录】

二、然后会打开下面的页面

三、在这个页面按住【page up】键，让数据快速地在这里过一遍，如果卡住，就反向滚一下鼠标，让它能继续滚，一直滚到顶

然后关掉微信，再重新登录微信，这一步非常重要，一定要重启微信才行。

四、然后就要操出数据导出软件来导出聊天记录了，获取【微信聊天记录挖掘机】软件，完整地对压缩包解压出来放在桌面，双击软件图标，打开软件

该软件可以在以下参考资料中获取：

《微信聊天记录挖掘机》，一键导出所有微信聊天记录的小工具-软件资源-天才小网管

五、软件打开后，软件界面如下

六，第一个格子，是【微信个人数据文件夹】，这个文件夹怎么找到呢，很简单，点微信窗口左下角的【菜单】-【设置】

七、在打开的页面点【文件管理】-【打开文件夹】

八、电脑就会直接帮你打开个人数据文件夹了，如下图

九、复制这个文件夹的路径

十、把复制的这个路径粘贴到软件的【微信个人数据文件夹中】

然后第二个格子选择一个你想要保存聊天记录到哪里的文件夹

如果想导出网页，软件界面里有【保存为网页HTML文件】的选项，勾上它

然后点击【一键导出所有聊天记录】，最终如下

十一、稍等一下它导出，导出成网页后，就可以去导出的文件夹那里查看了，双击聊天记录文件，就可以看到聊天内容，其中语音可以在页面中直接播放

十二、视频也可以播放

十三、不过如果你的语音或者视频什么的，历史比较久远，数据已经没有了，那在播放这里就是灰色的，说明没有数据，不过这种情况比较少

十四、到这里，就介绍完全了，如果有需要可以试试看，并且软件还有不少其它的选项功能，按自己的需要选择即可，比如可以指定导出某个人或者某个群的，也可以选择只导出某个时间段的等等，有需要可以自己探索下。

软件可以在以上第二部分的第四步里的参考资料获得

言

在vue单页面应用比较流行的时代，如何把vue应用和微信公众号两者结合在一起也是比较常见的功能。如果仅仅是把一个vue应用放在公众号上，没有进行额外的微信功能开发，如：获取用户信息，支付，分享等功能。其实和放在普通浏览上没有任何区别，仅仅是把网页放在了浏览器显示而已。但现实往往是需要很多额外的功能开发，如一个很常见的功能：在微信浏览器中如果进行网页授权，而获取用户的信息。

下面就说一下笔者在开发这一功能的实现过程，当然，还有其它方式都可以实现，这里只是说一下个人的实现逻辑，如果有不好的地方请各位小伙伴们批评指正。

配置服务器和公众号信息

要想在微信浏览器里进行开发功能，首先要有一台服务器，没有的话可以去阿里去或者腾讯云购买。还需要有一个已经备案过的域名。以上材料都有了就需要注册一个微信公众号，这里笔者以服务号为例进行说明。具体的注册过程自行查阅资料，比较简单，这里不再缀述。

申请完公众号之后，需要进行网页授权域名配置

按上述提示配置好服务器文件和域名

这里假定都已经配置好所有的信息，如配置过程中出现问题需要多看文档，按步骤一步步来配置。

开发

这里说明一下这个微信授权地址具体的参数需查看官方文档：

https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html

说一下几个比较重要的点：

• appid: 公众号的唯一标识
• redirect_uri: 授权后重定向的回调链接地址,请使用 urlEncode 对链接进行处理
• scope: 应用授权作用域，snsapi_base （不弹出授权页面，直接跳转，只能获取用户openid），snsapi_userinfo （弹出授权页面，可通过openid拿到昵称、性别、所在地。并且， 即使在未关注的情况下，只要用户授权，也能获取其信息 ）

开发之前一定要仔细阅读官方文档~~~！！！！

开发之前一定要仔细阅读官方文档~~~！！！！

开发之前一定要仔细阅读官方文档~~~！！！！

创建一个vue项目，这里不多说，看一下主要的逻辑代码：

router.beforeEach((to, from, next)=> {
  // 判断要跳转的页面是不是需要授权
  if (noAuthPageList.includes(to.name)) {
    next()
  } else {
    // 判断当前页面是不是从微信回调回来的
    if (location.search && location.search.indexOf('code') !==-1) {
      handlerWeixinAuth(next)
    } else {
      if (userInfo.isLogin()) {
        if (userInfo.state.unionid) {
          next()
        } else {
          if (isWeiXin) {
            window.location.href=urlPath.weixinAuthUrl
          } else {
            next()
          }
        }
      } else {
        autoLogin(next)
      }
    }
  }
})

我把所有逻辑都放在了 vue-router里的 beforeEach 方法，当然也可以放在其它地方，看个人的心情~ 我比较喜欢这种方式。

说一下主要流程

• 判断是不是需要授权的页面，有些页面是不需要进行授权的，如 登录注册等页面，如果是不需要授权的页面则直接放过。
• 如果是进行需要授权的页面，则判断当前链接是不是从微信浏览器授权回调回来的，也就是说链接里面有否有code参数，如果有code则说明是从微信回调回来，则需要进行处理，把 code 发给后台，后台需要获取 access_token
• 如果链接里面没有code，但是需要登录信息，则判断是不是在微信浏览器中，这里判断是不是微信浏览器主要是防止应用以后可能不仅仅在微信浏览器中使用。如果确定以后只在微信浏览器中使用，则可不判断，直接进行微信授权就好。当用户同意获取信息之后，微信浏览器会主动回调链接中的地址，也就是 redirect_uri对应的参数地址。

总结

这里笔者只是简单介绍了一下如何在微信浏览器里面获取信息的步骤，具体实现可能还要很多代码要写。对于vue单页面应用来说，微信授权是比较绕的，需要大家要不断测试理解，这里可以用微信开发的测试工具 微信开发者工具 去测试。

好了，有什么不明白的地方可以私信我，大家一起学习交流