Vue集成微信開發趟坑：公衆號以及JSSDK相關

首先，類庫方面，Vue中引入JSSDK的話，請引入weixin-js-sdk，而不是weixin-jsapi，緣由在於weixin-jsapi不是最新版；還要注意JS接口安全域名，不須要http前綴，直接輸入網址便可！

第二，開發流程官網已經說得很清楚，須要獲取微信配置，而後才能調用微信的JSSDK相關API：

全部須要使用JS-SDK的頁面必須先注入配置信息，不然將沒法調用（同一個url僅需調用一次，對於變化url的SPA的web app可在每次url變化時進行調用

獲取配置方面，因爲路由採用hash模式，URL只有一個，所以直接傳入#前面的部分便可：

const getWxConfig = () => {
            let currentUrl = encodeURIComponent(window.location.href.split("#")[0]);

            //請求配置
           post(api_getWxConfig, {requestUrl: currentUrl}).then((res) => {
                //let {data} = res;
                // config信息驗證後會執行ready方法，全部接口調用都必須在config接口得到結果以後，config是一個客戶端的異步操做
          
                wx.config({
                    debug: false, // 開啓調試模式,開發時能夠開啓
                    appId: res.appId,   // 必填，公衆號的惟一標識   由接口返回
                    timestamp: res.timestamp, // 必填，生成簽名的時間戳 由接口返回
                    nonceStr: res.nonceStr,    // 必填，生成簽名的隨機串 由接口返回
                    signature: res.signature,   // 必填，簽名 由接口返回
                    jsApiList: ['getLocation', 'openLocation', 'chooseImage', 'previewImage', 'uploadImage', 'downloadImage', 'getLocalImgData'] // 此處填你所用到的方法
                });
            });
        };

　

而後服務端處理方面，簽名算法，請注意：

簽名生成規則以下：參與簽名的字段包括noncestr（隨機字符串）, 有效的jsapi_ticket, timestamp（時間戳）, url（當前網頁的URL，不包含#及其後面部分） 。對全部待簽名參數按照字段名的ASCII 碼從小到大排序（字典序）後，使用URL鍵值對的格式（即key1=value1&key2=value2…）拼接成字符串string1。這裏須要注意的是全部參數名均爲小寫字符。對string1做sha1加密，字段名和字段值都採用原始值，不進行URL 轉義。

而後注意前臺用得字段名稱爲nonceStr，簽名算法中拼接的爲noncestr。

第三，接口調用方面，微信下載圖片等素材的接口已經變爲以下的連接，而不是百度搜索出來的連接

https://api.weixin.qq.com/cgi-bin/material/get_material?access_token=ACCESS_TOKEN

http請求方式: POST,https協議

第四，iOS網頁適配方面，獲取本地圖片接口的時候，須要判斷是否爲WKWebview，用於兼容 iOS WKWebview 不支持 localId 直接顯示圖片的問題：

 

if (window.__wxjs_is_wkwebview) {
    wx.getLocalImgData({
        localId: localId, // 圖片的localID
        success: (result) => {
            let localData = result.localData;
            //console.log("getLocalImgData", localData);
        }
    });

 

　　

 

第五，獲取地理位置描述，即將微信接口返回的座標轉換爲真實的地址，須要藉助騰訊地圖webservice接口，注意這裏須要使用gcj02座標：

import wx from "weixin-js-sdk";

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

                        Vue.jsonp('http://apis.map.qq.com/ws/geocoder/v1/', {
                            location: `${latitude},${longitude}`,
                            coord_type: 5,
                            key: 'xxxx',
                            output: 'jsonp',
                            callback: 'calllocation'
                        }).then(json => {
                            let {address, formatted_addresses} = json.result;

                            //處理數據
                        });
                    }
                });