公眾號使用微信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每日更新