言

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單頁面應用來說，微信授權是比較繞的，需要大家要不斷測試理解，這里可以用微信開發的測試工具 微信開發者工具 去測試。

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