使用JS-SDK开发公众号微信网页的完整步骤

开发场景：公众号嵌入vue项目地址，需要使用wx授权的定位及分享接口

官方文档：linhttps://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html

开始之前，先放遇到的两个坑，特别容易遇到并出错

1.wx.config中使用的url和当前路径的必须一致

举个例子：我想在项目的一开始的页面就初始化， 调用wx.config，在后续的页面中再调用具体的API，像是定位接口wx.getLocation。

用路径翻译一下就好比pages/index中调用wx.config，在pages/info中调用wx.getLocation，这种是不可以的。不符合微信 JSSDK 的核心安全机制，若路由切换导致 URL 的 path 或 hash 变化，必须重新生成签名并调用 wx.config

2.iOS 手机上 wx.config 方法中的 realAuthUrl 与 location.href 不一致，导致签名验证失败

这个问题很恶心，排查了很久。表象就是代码，配置，接口都没问题，等验证的时候，安卓设备没问题，但是IOS设备config一直失败，错误提示给了一个realAuthUrl路径。

原因分析路由切换时操作的是浏览器的历史记录，iOS会把第一次刚进入时的URL作为真实URL，安卓会把当前URL作为真实URL，导致后端在配置好的授权参数获得的config参数和微信sdk获取的参数是不一样的，所以ios的url参数对不上会一直报错realAuthUrl invalid signature 当然别忘记ios是哈希路由模式 也需要将#后面部分进行截取否则也会导致无法对应

解决方式如下：

简单概括就是先记录第一次进入的URL，如果是IOS设备，就使用这个记录的

//app.vue
onMounted(()=>{
	//因为部分情况会导致这边存入未更新  所以进行更保险的清除
	localStorage.removeItem('wxUrl')
	localStorage.setItem('wxUrl', location.href.split('#')[0])
})

//需要使用的地方（info.vue）
const wxConfig = () =>{
	let signLink = ''
	let ua = navigator.userAgent.toLowerCase()
	// 判断设备为ios还是安卓
	if (/iphone|ipad|ipod/.test(ua)) {
	  //ios
	  signLink = localStorage.getItem('wxUrl') || ''
	} else {
	  //安卓
	  signLink = location.href.split('#')[0]
	}
	
	// 走后端接口，获取timestamp，nonceStr，signature等信息
	const res = await configInfo(signLink)

	wx.config({
	    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
	    appId: ..., // 必填，企业号的唯一标识，此处填写企业号corpid
	    timestamp: res.timestamp, // 必填，生成签名的时间戳
	    nonceStr: res.nonceStr, // 必填，生成签名的随机串
	    signature: res.signature,// 必填，签名
	    jsApiList: [
	      'previewImage',
	      'uploadImage',
	      'downloadImage',
	      'getLocation',
	    ] // 必填，需要使用的JS接口列表
	})
}
  

回到正题，说对接的步骤

1.绑定域名

• 可登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
• 或者前往微信开发者平台 – 公众号或服务号 – 基本信息 – 开发信息 进行修改

  

开发环境或者测试环境推荐使用微信公众平台接口测试帐号微信扫个码就可以使用，非常方便
地址：https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login

进去后需要配置JS接口安全域名，接口配置信息可以空着，需要的appID和appsecret系统默认生成了

2.引入JS文件

• 可以直接在入口html中引入（支持https）

<script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

• 或者把该文件下载下来，放在项目里引入

3.通过config接口注入权限验证配置,就是调用wx.config

wx.config({
  debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
  appId: '', // 必填，公众号的唯一标识
  timestamp: , // 必填，生成签名的时间戳
  nonceStr: '', // 必填，生成签名的随机串
  signature: '',// 必填，签名
  jsApiList: [] // 必填，需要使用的JS接口列表
});

讲讲开发心得，这些字段都是怎么获得的。
前端主导appId：唯一标识，公众号上有（微信公众平台接口测试帐号也提供）
timestamp：随便找个生成时间戳的函数（长度其实没有要求，官方验证工具是10位），可参考下面函数getCurrentTimeStamp
nonceStr：随便找个生成随机串的函数（数字和字母组成），可参考下面函数getRandomString
signature：生成的签名。需要后端接口生成，前端的入参是个字符串，格式要长这个样子
jsapi_ticket=占位&noncestr=占位&timestamp=占位&url=占位noncestr和timestamp已经有了，拼上去就好
jsapi_ticket的值也需要后端返回（让后端查下如何生成jsapi_ticket，这里多提一嘴，jsapi_ticket的值是怎么来的，首先用appId和appsecret换取token，再用这个token换取jsapi_ticket）
url的值是当前页面的路由，用location.href.split(‘#’)[0]，这里就是文章开头的坑2了！！！
后端主导就是把上面的事情都让后端去做，请求一个接口，入参是url，接口把timestamp，nonceStr，signature都吐出来。
那如何验证最终生成的signature是否正确呢？官方给了一个验证工具
地址：https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign把这些值填入，如果和官方生成的signature一致，那就正确了

> jsApiList：使用的功能（定位，分享，语音），用啥写啥

// 获取当前的时间戳字符串
export const getCurrentTimeStamp = () => {
  return new Date().getTime().toString()
}

// 生成字母数字随机数字符串
export const getRandomString = (length: number) => {
  const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
  let result = ''
  for (let i = 0; i < length; i++) {
    result += chars.charAt(Math.floor(Math.random() * chars.length))
  }
  return result
}

4.通过ready接口处理成功验证

wx.ready(function(){
  // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
});

5.通过error接口处理失败验证

wx.error(function(res){
  // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
});

如果ready方法执行了，error没有报错，后面就可以参考官方文档调用具体的API了

总结

到此这篇关于使用JS-SDK开发公众号微信网页的文章就介绍到这了,更多相关JS-SDK开发公众号微信网页内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

来源链接：https://www.jb51.net/javascript/3389615jg.htm