在 react 项目中使用微信 JS-SDK 填坑笔记

Posted 2023-05-01

参考技术A 现在 android 的微信（6.3.31）已经修好了，需要按照文档说的传入当前页面的url，也就是没吃豆重新 config 一次，但是苹果的微信只要在进入页面的时候 config 一次就可以了，微信管接口的估计是个锤子。

在做图片上传的时候，图片太大老是上传失败，在产品汪（☁️）的建议下用了微信的 JS-SDK，微信会处理压缩，而且还有顺带连预览也解决了，好开心。

后来一发布，整组人感觉不好了。主要问题出现在 url 的配置上。

微信的 官方文档 是这样说的:

实际测试中发现，配置的 url 并不是调用微信 js 的时候所在页面的地址（也就是通过 location.href 获得的地址），而是在进入到网站的第一个页面的地址，这是第一个问题

第二问题是在苹果手机的微信上面，只要调用 wx.config 一次就可以了，但是在 android 的手机，在页面跳转之后，要重新调用 wx.config （url 依然是进入网站的第一个页面的地址，要保存在一个变量里面），"X5 浏览器"， 我他妈就呵呵了。如果用了 react-router 的话，直接在 Route 组件上绑定一个 onChange 方法就可以了

公众号h5中使用微信JS-SDK(个人笔记)

参考技术A

通过使用微信JS-SDK，网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力，同时可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力，为微信用户提供更优质的网页体验。
例子为在vue中使用微信JS-SDK，步骤如下：

先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
备注：登录后可在“开发者中心”查看对应的接口权限。

插件方式：

引入js文件方式：

在需要调用JS接口的页面引入如下JS文件，（支持https）： http://res.wx.qq.com/open/js/jweixin-1.6.0.js
如需进一步提升服务稳定性，当上述资源不可访问时，可改访问： http://res2.wx.qq.com/open/js/jweixin-1.6.0.js （支持https）。

挂载到Vue原型

与使用 JS-SDK 配置方式相同，所有需要使用开放标签的页面必须先注入配置信息，并通过openTagList字段申请所需要的开放标签，否则将无法使用（同一个 url 仅需调用一次）。开放标签的申请和 JS 接口的申请相互独立，因此是可以同时申请的。

配置成功之后，就可以使用相关的api了。例子为微信支付。

3.分享出去的是链接，不是卡片的原因及解决方案：
原因： 微信开放全域名访问后出现的限制。
解决方法：

这会导致别人通过分享卡进来的页面不是自己配置的页面。
解决办法： 把路由hash模式改成history模式。(让后端把匹配不到的页面重定向到首页)

开发者需要配合使用微信开放平台提供的 SDK 进行一次性订阅消息授权请求接入。正确接入 SDK 后，开发者移动应用会在终端本地 拉起微信应用进行订阅消息授权 ，微信用户确认后微信将拉起开发者移动应用，并带上授权用户 openid 等信息。
使用方式： 引导用户打开 https://mp.weixin.qq.com/mp/subscribemsg?action=get_confirm&appid=wxaba38c7f163da69b&scene=1000&template_id=1uDxHNXwYQfBmXOfPJcjAS3FynHArD8aWMEFNRGSbCc&redirect_url=http%3a%2f%2fsupport.qq.com&reserved=test#wechat_redirect 链接。
可拉起微信打开一次性消息订阅授权页：

使用方式：

如需添加参数，可在redirect_uri后面进行拼接，授权成功之后会带回来。

其他问题请参考： https://www.jianshu.com/p/d343067b1ce6