公衆号使用微信sdk的正确姿勢

微信sdk

當我們做微信登入授權，微信公衆号的分享，微信的h5支付等等等等的時候難免會用到微信sdk，當我們用react或vue做的spa應用，直接引入後會發現，在按安卓上可以正常調試，而ios上一直報簽名錯誤（但你發現你重新整理一下又可以了。。），等各種問題。在我連連續續踩了各種坑之後，含淚寫此文。。。閑話不多說，上代碼！（再說一句句，希望擷取前端進步的可以關注下qdleader）

引入sdk

首先在main.js中引入

// 每次切換路由時候，注冊config(并解決ios的相容問題)
import { bUrlH5 } from "@/http/httpUrl.js";
router.afterEach((to, from) => {
    let basicPath = bUrlH5
    let path = to.fullPath.slice(1) // 去除'/'

    if (!sessionStorage.getItem('initLink')) {
        // 解決ios微信下，分享簽名不成功的問題,将第一次的進入的url緩存起來。
        sessionStorage.setItem('initLink', document.URL)
    }
    let url
    if (!!window.__wxjs_is_wkwebview) {
        // ios
        url = sessionStorage.getItem('initLink')
    } else {
        // 安卓 process.env.BASE_URL 自己定義各個環境下域名變量
        url = basicPath + path
    }
    store.commit('URLLINK', url)
})
           

這裡引入的bUrlH5就是的網站的位址，比如http://www.baidu.com

ios簽名錯誤的根源就是，你傳給伺服器的位址是你首次進來的根位址，跟你的目前位址不同。這是微信浏覽器在ios下的一個bug。

我把url存到了vuex中，vuex不太懂的可以看我之前的一篇文章。

在vuex中 首先維護types檔案

export const URLLINK = 'URLLINK';
           

然後在mutations檔案中：

import {
    URLLINK,
} from './types'
import getters from './getters'

const state = {

    urlLink:'',//存儲ios首次進來的連結

};

const mutations = {
    //存儲url解決ios的sdk問題
    [URLLINK](state, urllink) {
        state.urlLink = urllink
    },
};
export default {
	state,
	mutations,
	getters
}
           

重點來啦 在項目中建一個wxSdk.js

// import wx from 'weixin-js-sdk'
import wx from 'weixin-jsapi'
import store from '@/store'
import { bUrl } from "@/http/httpUrl.js";
import { Base64 } from 'js-base64';
import axios from 'axios';

export default {
    /* 初始化wxjsdk各種接口 */
    init(apiList = [], url) {
        //需要使用的api清單
        let urlWx = bUrl + 'V1/wechat/sharesign'
        return new Promise((resolve, reject) => {
            let url = Base64.encode(store.state.mutations.urlLink);
            axios({
                method: 'get',
                url: urlWx,
                params: {
                    url: url,
                }
            }).then(function (res) {
                if (res.data.appId) {
                    wx.config({
                        debug: false, 
                        appId: res.data.appId,
                        timestamp: res.data.timestamp,
                        nonceStr: res.data.nonceStr,
                        signature: res.data.signature,
                        jsApiList: apiList
                    })
                    wx.ready(res => {
                        // 微信SDK準備就緒後執行的回調。
                        resolve(wx, res)
                    })
                } else {
                    reject(res)
                }
            }).catch(function (err) {
                reject(err)
                console.log("報錯處理")
            });
        })

    }
}
           

要說明幾個坑

• 1.引入sdk時候要npm weixin-jsapi 而不要用weixin-js-sdk，因為weixin-js-sdk不支援es6文法import 引入後，你列印wx會發現為undefined。
• 2你傳給背景的url要進行一次編碼encodeURIComponent呀，base64呀都可以。

好了，我都封裝好了，那怎麼調用呢。

來喽來喽。。。

調用的時候隻需要在相應的頁面引入你寫的這個插件，

import wechatUtil from '@/common/js/wxSdk.js'


        setL() {
            let _this = this;
              wechatUtil
                    .init([
                    'updateAppMessageShareData',
                    'onMenuShareAppMessage',
                    'onMenuShareTimeline',
                    'updateTimelineShareData',
                    "openLocation",
                    ])
                    .then((wx, res) => {
                        // 這裡寫微信的接口
                        console.log(111,wx)
                                    //地理位置
                        wx.openLocation({
                            latitude: Number(_this.detailInfo.lat), // 緯度，浮點數，範圍為90 ~ -90
                            longitude: Number(_this.detailInfo.lon), // 經度，浮點數，範圍為180 ~ -180。
                            name: _this.detailInfo.place_name, // 位置名
                            address: _this.detailInfo.place_address, // 位址詳情說明
                            scale: 28, // 地圖縮放級别,整形值,範圍從1~28。預設為最大
                            infoUrl: "" // 在檢視位置界面底部顯示的超連結,可點選跳轉
                        });
                    })
        },
           

然後對照着，微信官網，直接粘鍋來用，就可以啦，ios，android都ok啦。

當你發現ios，android怎麼都是簽名錯誤呀，你先看看你的公衆号上有沒有配置安全域名呀，你伺服器的ip有沒有加到公衆号的白名單呀。沒配好，代碼再怎麼改也ok不了。。

最後，前端有興趣的可以關注下，也可以加群，一起成長。還有githubhttps://github.com/qdleader/qdleader每日更新