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