记录对接微信SDK的坑

记录对接微信SDK的一些坑

一、对接SDK的一般流程

引入微信的cdn或者npm包,其他版本自行查找

<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
// 或者
npm install jweixin-1.2.0

引入之后，后台会给个接口，一般是传个url的参数，后台会返回wx.config需要的配置信息

// pageUrl 为当前页面的链接,并且hash模式需要去除「#」后面的值
const params = { pageUrl: window.location.href.split('#')[0]  }
// 后台提供的接口
const res = await getWxConfig(params)
// 如果有值
if(res.data) {
    const { appId, nonceStr, signature, timestamp } = res.data    
    // 参数值必须是字符串，强制转一下
    wx.config({ 
        beta: true, // 调用wx.invoke形式的接口值时，该值必须为true。 
      	debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数， 可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。 
      	appId, // 必填，粤政易的corpID 
      	timestamp: timestamp + '', // 必填，生成签名的时间戳 
      	nonceStr: nonceStr + '', // 必填，生成签名的随机串 
      	signature: signature + '',// 必填，签名，见附录1 
      	jsApiList: ['checkJsApi', 'getLocation', 'chooseImage', 'uploadImage'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2 
      })
    
       // 这个ready方法，文档说是成功之后执行，事实是失败之后也执行，区别在失败后是先执行error,在执行ready
      wx.ready(function(){
      	// config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
      	wx.checkJsApi({
      		jsApiList: ['chooseImage', 'uploadImage', 'getLocation'], // 需要检测的JS接口列表，所有JS接口列表见附录2, 
      		success: function(res) { 
      			// 以键值对的形式返回，可用的api值true，不可用为false // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
      		},
      		fail: function (err) { 
      			alert(JSON.stringify(err))
      		}
      	})
      })
    wx.error(function(res){
    	// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
    	alert(JSON.stringify(res))
    })
}

二、遇到的问题

就在我愉快的以为对接完成之后，在真机上测试，发现安卓没问题，ios手机就报一些错误

// 错误代码
{"errInfo":"check failed","errMsg":"config:fail"}

{"err_Info":"checkJsApi:fail nopermission toexecute","errMsg":"checkJsApi:fail"}

很明显配置没有验证通过。
后面查阅了资料，发现苹果手机是只需要传入第一次进入页面的路径，而不是当前页面的路径

三、解决问题

所以我在main.js中，缓存首次进入页面的路径（main.js总只执行一次了吧）

//main.js
const wxUrl = window.location.href.split('#')[0]
sessionStorage.setItem('firstUrl', wxUrl)

所以得改一下上面的逻辑

// js判断是否ios
const isIos = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)

// 首次进入的页面
const firstUrl = sessionStorage.getItem('firstUrl')

// 当前页面
const currentUrl = window.location.href.split('#')[0]
 
// 1. 如果是Android，那么总是使用 currentUrl
let pageUrl = currentUrl

// 2. 如果是 ios 微信端，使用 firstUrl

if(isIos) {
  pageUrl = firstUrl
}

const params = { pageUrl  }
// 后台提供的接口
const res = await getWxConfig(params)

完。