微信公衆號頁面(VUE)中如何配置微信JS-SDK和高德地圖,以及遇到的一些問題記錄

1.安裝並引入JS-SDK依賴包

這裏是JS-SDK說明文檔

1.1 npm 下載依賴包

npm install weixin-js-sdk --save

1.2.在須要用到jssdk的模塊引入

import wx from 'weixin-js-sdk';

1.3.檢查是否引入成功,能夠在引入的模塊mounted中執行

console.log(wx)

{config: ƒ, ready: ƒ, error: ƒ, checkJsApi: ƒ, onMenuShareTimeline: ƒ, …}
addCard: ƒ (e)
checkJsApi: ƒ (e)
chooseCard: ƒ (e)
chooseImage: ƒ (e)
chooseWXPay: ƒ (e)
...
控制檯顯示以上代碼表示引入成功.

2.配置微信JS-SDK

全部須要使用JS-SDK的頁面必須先注入配置信息，不然將沒法調用

wx.config({
    debug: true, // 開啓調試模式,調用的全部api的返回值會在客戶端alert出來，若要查看傳入的參數，能夠在pc端打開，參數信息會經過log打出，僅在pc端時纔會打印。
    appId: '', // 必填，公衆號的惟一標識,管理公衆號頁面能夠獲取
    timestamp: '', // 必填，生成簽名的時間戳,後臺返回
    nonceStr: '', // 必填，生成簽名的隨機串,後臺返回
    signature: '',// 必填，簽名,後臺返回
    jsApiList: ['openLocation','getLocation'] // 必填，須要使用的JS接口列表,寫入本身用到的接口名稱
});

而後等待配置完成後,在ready中使用微信提供的API

wx.ready(function(){
        wx.getLocation({
          type: 'wgs84', // 默認爲wgs84的gps座標，若是要返回直接給openLocation用的火星座標，可傳入'gcj02'
          success: function (res) {
            var latitude = res.latitude; // 緯度，浮點數，範圍爲90 ~ -90
            var longitude = res.longitude; // 經度，浮點數，範圍爲180 ~ -180。
            var speed = res.speed; // 速度，以米/每秒計
            var accuracy = res.accuracy; // 位置精度
            
          }
        });
      })

坑1: config:invalid signature 配置報錯;

首先咱們不能用chorme來調試這個config,沒有任何反應
而後網上各類搜基本能夠確實是URL的問題

微信規定 簽名的URL要與當前頁面URL一致！

解決方案看這個問題,將此頁面的URL 動態送給後臺,生成簽名.

坑2 安卓和IOS獲取URL的不一樣致使註冊報錯

安卓能夠直接在網頁中這麼獲取當前URL:

location.href.split('#')[0]

IOS就不行,你只能獲取到你剛進入頁面的URL;
解決的思路大概是
1.首先要判斷是不是IOS系統
2.若是是IOS 咱們緩存一個入口URL而後註冊,若是不是IOS直接使用location.href.split('#')[0]URL進行註冊

---config.js 全局定義一個變量

global.entryUrl = location.href.split('#')[0];

僞代碼以下:

mounted(){
      let url;
      if (publicFun.isIOS()) {//判斷是不是IOS
        url = this.PUBLICCONFIG.entryUrl;
      } else {
        url = location.href.split('#')[0];
      }
      
      //傳參給後臺 獲取 appId/timestamp/nonceStr/signature
      api.getJsConfig({
        "url":url
      },{
        success:function (res) {
            //獲取參數成功後配置
            wx.config({
              debug: true, 
              appId:  res.data.appId, 
              timestamp:res.data.timestamp , 
              nonceStr:res.data.nonceStr,
              signature: res.data.signature,
              jsApiList: ['openLocation','getLocation'] 
            });
        }
      })
      
      //微信配置成功
       wx.ready(function(){
        console.log("配置成功")
        wx.getLocation({
          type: 'wgs84', 
          success: function (res) {
            var latitude = res.latitude; // 緯度，浮點數，範圍爲90 ~ -90
            var longitude = res.longitude; // 經度，浮點數，範圍爲180 ~ -180。
            var speed = res.speed; // 速度，以米/每秒計
            var accuracy = res.accuracy; // 位置精度
            console.log(latitude);
            this.latitude = latitude
          }
        });
      })
      
       // config信息驗證失敗會執行error函數，如簽名過時致使驗證失敗，具體錯誤信息能夠打開config的debug模式查看，也能夠在返回的res參數中查看，對於SPA能夠在這裏更新簽名。
      wx.error(function(res){
       
      });
     
    }

坑3:須要定時調用微信的API接口,設置定時無效(這個問題可能很傻)

全部接口調用都必須在config接口得到結果以後，config是一個客戶端的異步操做
所以咱們須要將定時 寫在wx.ready 方法裏面,而不須要每次調用微信API的時候 wx.config一次.

wx.config({
    //配置
})
wx.ready({
//放到這裏 是能夠滴
setInterval(timer,5000)
})

3.使用高德地圖

高德地圖API文檔

3.1註冊高德並申請Key

1. 首先，註冊開發者帳號，成爲高德開放平臺開發者
2. 登錄以後，在進入「應用管理」 頁面「建立新應用」
3. 爲應用添加 Key，「服務平臺」一項請選擇「 Web 端 ( JSAPI ) 」

3.2 在項目index.html中引入高德腳本標籤

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.14&key=您申請的key值"></script>

3.3建立一個高德地圖的實例

建立一個容器,給一個ID名字

<div id="map" class="page-location-map"></div>

給容器加一個樣式

.page-location-map{
      width: 100%;
      height: 100%;
    }

在組將mounted方法中建立地圖實例

let Map = new AMap.Map('map', {
        zoom: 11,//級別
        center: [116.397428, 39.90923],//中心點座標
        viewMode: '3D' //使用3D視圖
      })

運行項目後,你就會看到一個北京天安門的地圖了.接下來你應該知道怎麼作了 對吧?

參考

1. vue-router的history模式在IOS微信分享下url不變的坑以及解決辦法
2. 微信公衆平臺, config:invalid signature一直爆這個錯誤，求教如何解決？