微信服务号VUE.js单页应用，WX-JSSDK配置踩坑记录

• 项目环境
• JSSDK引入
• 建立公用的SDK配置文件wx-sdk.js
• 引入依赖
• init方法

项目环境

微信服务号网页，前后端分离项目，前端采用vue.js+vux搭建，路由采用history模式。
注意：微信后台记得配置好JS安全域名

JSSDK引入

npm i weixin-js-sdk --save

我引入的版本号为1.3.2

建立公用的SDK配置文件wx-sdk.js

这是我配置的这个JS文件的所有代码，下面会分段解释

import wx from 'weixin-js-sdk';  //SDK依赖
import { $http } from './http.js';   //http配置文件
import baseData from './baseData.js';  //公共数据存储对象
export default {
init(apiList = [],url ) {  //需要使用的api列表
const u = navigator.userAgent.toLowerCase(),
isIOS = u.indexOf('iphone')>-1;  //判断是否是ios微信
return new Promise((resolve,reject)=>{
$http
.get('/wechat/portal/jsSignature', {  //从后台获取签名相关的接口
url: url || (isIOS ? baseData.jsUrl : window.location.href)  //配置签名的URL
})
.then(res => {
if (res.appId) {
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: res.appId, // 必填，企业号的唯一标识，此处填写企业号corpid
timestamp: res.timestamp, // 必填，生成签名的时间戳
nonceStr: res.nonceStr, // 必填，生成签名的随机串
signature: res.signature, // 必填，签名，见附录1
jsApiList: apiList // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
});
wx.ready(res => {  // 微信SDK准备就绪后执行的回调。
resolve(wx,res);
});
}else{
reject(res);
}
});
})
}
};

引入依赖

1. import wx from 'weixin-js-sdk';

   JSSDK的依赖，NPM安装的如此引入

2. import { $http } from './http.js';

   封装的HTTP请求，因为换取API授权的时间戳随机字符串等需要后台去向微信服务器请求，后台返回给前端，再使用wx.config()配置

3. import baseData from './baseData.js';

   
   baseData.js为实例化的一个vue对象挂载在main.js中的vue对象里， 作为公共数据对象。可替换为自己的公共数据存储，比如vuex等。 引入主要是为了处理Android和IOS差异的一个坑，后面会解释。

init方法

获取签名需要页面的URL地址和要使用的API列表， 由于全是当前页面使用，于是封装成init(apilist=[],url), 方法传入url则使用使用传入的url, 没传入则使用当前页面地址。
使用当前页面地址配置，由于IOS客户端当前页面地址通过window.location.href获取的是正确的， 但是窗口路径显示的一直是进来网页时的地址（可以通过转发给好友看到页面地址，能发现地址路径不对，如果通过window.location.href获取路径再来配置会导致授权失败invalid signature，这可能是IOS微信浏览器本身的BUG），由于没有发现其他方法来解决这个问题， 只有通过缓存进入网站时的页面地址，配置jdk时传入， 才能正常在IOS里使用，于是有了这段代码：

const u = navigator.userAgent.toLowerCase(),
isIOS = u.indexOf('iphone')>-1;  //判断是否是ios微信

url: url || (isIOS ? baseData.jsUrl : window.location.href)  //配置签名的URL

baseData.jsUrl我是在主入口created()钩子里写入，main.js或者主入口vue文件中。
整个init返回一个Promise对象方便调用。

使用

引入刚刚配置的wx-sdk

import wxJs from  '@/base/wx-sdk'

在页面钩子函数中注册

created(){
const self = this;
wxJs.init(['getLocation']).then((wx,res)=>{
self.getLocation = wx.getLocation;
self.setLocation();
})
}

考虑到init过后可能会重复使用注册的api返回， 这里返回了配置成功后的wx对象， 本地设置一个变量指向wx下的具体方法，或者直接指向wx对象，以便于重复调用。
我在这里使用的是SDK的获取地图定位功能， 且页面有刷新定位按钮， 所以用self.getlocation保存以反复调用。

结言

通过这套配置就可以很方便的在各个页面注册sdk的api并调用了。
风险： 区分IOS和安卓传不同URL的那个地方，可能属于微信的一个BUG，不知是否会修复，如修复就不用做此判断了。