浅谈js-sdk的场景-微信分享
最近要做一个h5活动页,产品大大想要通过一个按钮想要调起微信的分享,想法很美好,现在很骨感,然而微信早已废弃了这种诱导用户分享的方式,此事只能作罢,通过设置蒙层,引导用户,使用微信自带的分享
那么如何能设置分享给别人的链接里的缩略图以及title描述,此时,就要引出今天的主人公,weixin-js-sdk
开发准备工作
-
首先有一个测试公众号和正式服务号
-
在公众号里绑定安全域名,这个安全域名即应用sdk功能的前端部署域名
-
调用后端接口,获取签名相关信息: appid,
-
通过wx.config接口注入权限验证配置, 验证签名是否正确
-
wx.ready(function(){
// 验证通过会调用ready里的回调
}); -
wx.error(function(res) {
// 如签名过期导致验证失败,具体错误信息可以打印出来
}) -
在微信开发者工具里有一个网页公众号,可以用来验证是否调用成功,并可以看到相应的log信息
安装weixin-js-sdk依赖
npm install weixin-js-sdk
微信sdk配置实现代码
/** 初始化微信环境,只需要在main.js中初始化一次就ok*/
const wx = require('weixin-js-sdk')
export function initWechat () {
return new Promise((resolve) => {
// 判断当前所处环境
const env = getEnv()
if (env === 'wechat') {
// 防止多次调用initwechat,此时有可能还在等待接口的返回
if (window.wxConfigQuerying) {
if (!window.wxConfigCallbacks) window.wxConfigCallbacks = []
window.wxConfigCallbacks.push(resolve)
} else {
window.wxConfigQuerying = true
net.getWXConfig({ // 后端接口
// 微信中不能有特殊符号,这里是去除特殊符号#
paramUrl: window.location.href.split('#')[0]
}).then((res) => {
if (res.data.code === 0) {
const { data } = res.data
const { appId, nonceStr, signature, timestamp } = data
const cfg = {
debug: false, // 为true,则会弹出配置相关日志信息
appId,
timestamp,
nonceStr,
signature,
jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData'], // 需要使用的JS接口列表,分享好友,分享朋友圈,会在js中调用这两个微信开发配置,1.4已经废弃之前的分享
}
wx.config(cfg)
wx.ready(() => {
window.wxConfigQuerying = false
resolve()
window.wxConfigCallbacks.forEach((f) => {
f()
})
delete window.wxConfigCallbacks
})
wx.error(function(res){
// eslint-disable-next-line no-console
console.log(res)
});
}
})
}
} else {
resolve()
}
})
}
// 调用微信的sdk方法
export function updateShareConfig (params) {
wx.updateAppMessageShareData({
title: params.title,
desc: params.desc,
link: params.link,
imgUrl: params.imgUrl,
success: function () {
// 设置成功
}
})
wx.updateTimelineShareData({
title: params.title,
link: params.link,
imgUrl: params.imgUrl,
success () {
// 设置成功
}
})
}
如何调用分享朋友和朋友圈的配置
// eg:vue项目
// 在mounted 钩子内可以直接调用updateShareConfig(params)这个方法,去调用分享js接口,而不用再一次initWebchat,一定要记得,调用要在wx.ready完成之后进行
开发过程中的踩坑记录
1.分享出去的图片不显示
* 若验签正常,则是图片尺寸的问题, 尽量不要超过200 * 200
* 若验签正常,图片地址不是安全域名下的静态资源图片,且是https协议的,此时需改为http,否之也不能正常展示
2. 分享不显示desc和图片,后端返回的签名不正确
> 部署前端服务域名不在安全域名之列,由于微信自身安全性限制,一个服务号最多添加3个安全域名,此时需要找一个安全域名,在安全域名配置一个子路径,让这个子路径反向代理到真正的前端服务域名
* 坑1: 前端路由中必须要设置路由前缀和安全域名的子路径保持一致,否则,无法正确打到正在的域名
即: 安全域名 abc.lanti.com 前端服务域名 activity-h5.haishui.com
```
// childpath 是设置的子路径
abc.lanti.com/childpath/home 代理 activity-h5.haishui.com/childpath/home
```
由于自身一开始想的方案和运维给出的实现方案不一致,导致坑了很久
我原先的方案是:abc.lanti.com/childpath/xxx 代理到 activity-h5.haishui.com/xxx
代理的过程就把路径代理剔除掉,然后想的很美好,结果很悲催,被坑了很久,真是想起来都觉得心痛
* 坑2: 通过反向代理后,window.location.origin 已经是代理后的域名,导致发送给后端安全域名错误,验签失败
真是一波三折,写bug,改bug,在这条不归路上永不停歇,😆,痛并快乐着