Vue项目集成微信JS-SDK开发指南：配置、签名与iOS兼容问题

开发场景与前置准备

本文针对在公众号内嵌Vue项目中调用微信JS-SDK定位及分享接口的开发场景进行说明。

官方参考文档地址为：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html

在正式对接前，先总结两个极易踩坑且常见的错误点。

常见配置错误与iOS兼容问题

第一，wx.config中配置的url必须与当前页面的实际路径完全一致。

例如，若希望在项目首页初始化时调用wx.config，并在后续页面（如info页）调用定位接口wx.getLocation，这种跨页面复用配置的方式是不可行的。

具体表现为：若在pages/index调用wx.config，而在pages/info调用wx.getLocation，会因不符合微信JSSDK的核心安全机制而报错。一旦路由切换导致URL的path或hash发生变化，必须重新生成签名并再次调用wx.config。

第二，在iOS设备上，wx.config方法中的realAuthUrl与location.href不一致，常导致签名验证失败。

该问题排查难度较大，表象是代码、配置及接口均无误，安卓设备运行正常，但iOS设备在验证时config始终失败，并提示realAuthUrl相关错误。

原因分析：路由切换操作的是浏览器历史记录，iOS系统会将首次进入时的URL视为真实URL，而安卓系统将当前URL视为真实URL。这导致后端配置的授权参数生成的config与微信SDK获取的参数不一致，从而引发iOS端realAuthUrl invalid signature报错。此外，iOS采用哈希路由模式时，若未截取#后的部分，也会导致URL无法对应。

解决方式如下：

核心思路是记录首次进入的URL，若检测到为iOS设备，则使用该记录的URL进行配置。

//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接口列表
	})
}
  

接下来介绍具体的对接步骤。

JS-SDK对接详细步骤

第一步，绑定域名。

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

  

开发或测试环境推荐使用微信公众平台接口测试账号，扫码即可使用，十分便捷。地址：https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login

进入测试账号后需配置JS接口安全域名，接口配置信息可留空，系统默认生成所需的appID和appsecret。

第二步，引入JS文件。

• 可直接在入口HTML中引入（支持https协议）。

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

• 也可将该文件下载后放置于项目中引入。

wx.config参数获取与签名验证

第三步，通过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
}

验证结果处理与总结

第四步，通过ready接口处理成功验证后的逻辑。

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

第五步，通过error接口处理验证失败的情况。

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

若ready方法执行且error未报错，后续即可参考官方文档调用具体API。

总结。

至此，关于使用JS-SDK开发公众号微信网页的文章介绍完毕。更多相关JS-SDK开发公众号微信网页内容请搜索本站以前的文章或继续浏览下面的相关文章，希望大家以后多多支持本站！