前端引入微信的sdk，按着文档获取code，最后获取openID、AppID。答题思路是这样，但是有时候需求不是这么搞的，尤其是获取code，微信URL会重定向，体验非常不好。
如果页面中，有不同的地方，调用多次微信方法，难道每次都需要重新获取code吗？
当然不行！！强迫症的我，表示接受不了！！
一、梳理分析
1、调用微信方法，需要在当前页面先执行wx.config
2、调用AppID、openID等等，需要先获取code
3、获取code，需要微信重定向(就是这里接受不了)
那么证明是否可以先获取code，将AppID、openID等等储存在本地，当需要wx.config时，取一下本地数据就可以了？？
带着这个思路搞一下。
二、先配置好基本的东西
下载sdk
cnpm i weixin-js-sdk --save
去微信公众号，配置授权域名。就是把你web项目的URL填到这里，并且需要把一个txt文件，放到你项目url对应的根目录
三、新建获取code的公共页
//getCode.vue<template><div></div></template><script>import api from '$api'import {mapActions} from 'vuex'import {weixinCode,WeixinReturnBlock,WeixinCloseWindow} from '$model/utils/util.js'export default {methods :{...mapActions('head',['setAppObjFn']),//判断环境getIsWxClient () {var ua = navigator.userAgent.toLowerCase();if (ua.match(/MicroMessenger/i) == "micromessenger") {return true;}return false;},getOpenId (code) {let obj = {code,platformId :'808',url:location.href.split('#')[0]}api.getOpenId(obj).then((res)=>{if(res.code ==1){let data = res.data || {};this.setAppObjFn(data);this.$router.push('/home')} else {//获取异常，关闭当前窗口setTimeout(()=>{WeixinCloseWindow()},2000)}})}},mounted (){// 不是微信环境。直接去404页。if(!this.getIsWxClient()){this.$router.push('/404')return};let code = this.$route.query.code;if(!code){//没有code，去重定向weixinCode()} else{//添加返回拦截WeixinReturnBlock.addEvent();//根据code，获取信息this.getOpenId(code)}},destroyed(){//消除拦截WeixinReturnBlock.removeEvent();}}</script>
四、util.js 文件
//util.jsweixinCode =() =>{let local = window.location.href.split('#')[0],//你微信公众号的appidappid = 'wx8xxxx80xxxx';//转义，防止参数过多，微信截掉local = decodeURIComponent(local);local = encodeURIComponent(local);//微信获取code码location.href = `https://open./connect/oauth2/authorize?appid=${appid}&redirect_uri=${local}&response_type=code&scope=snsapi_base&state=STATE&connect_redirect=1#wechat_redirect`;},//退出微信公众号‘WeixinCloseWindow = ()=>{//这个可以关闭安卓系统的手机document.addEventListener("WeixinJSBridgeReady",()=>{WeixinJSBridge.call("closeWindow")},false);//这个可以关闭ios系统的手机WeixinJSBridge.call("closeWindow");},//返回阻止功能WeixinReturnBlock = {addEvent : (type,fun) =>{if (window.history && window.history.pushState) {history.pushState(null, null, document.URL);window.addEventListener('popstate',type=='2'?fun:WeixinCloseWindow, false);}},removeEvent : (type,fun) =>{window.removeEventListener('popstate',type=='2'?fun:WeixinCloseWindow, false);}}export {weixinCode,WeixinReturnBlock,WeixinCloseWindow};
五、mixins/config.js
//config.jsimport wx from 'weixin-js-sdk'import {mapGetters} from 'vuex'export const configJS = {computed :{...mapGetters('head',['appObj'])},methods :{checkJsApiFn (){let obj = {// debug: true, // 开启调试模式appId: this.appObj.appId, // 必填,公众号的唯一标识timestamp: this.appObj.timestamp, // 必填,生成签名的时间戳nonceStr: this.appObj.noncestr, // 必填,生成签名的随机串signature: this.appObj.signature, // 必填,签名jsApiList: ["scanQRCode", "checkJsApi"] // 必填,需要使用的JS接口列表};wx.config(obj);/* 处理失败验证 */wx.error(function(res) {// config 信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名console.log("配置验证失败: " , res);});}},}
六、引用
<template><section class="login-wrap">......</section></template><script>import api from '$api'import {configJS} from '$model/mixins/config'export default {mixins:[configJS],methods:{........},mounted (){// 默认引用wx.configthis.checkJsApiFn();}}</script><style lang="scss" scoped>......</style>
