在网页中要使用分享等一系列的微信JS-SDK功能，要先配置好JS-SDK参数。
安装jweixin-module
要使用公众号H5的JS-SDK功能，先要安装jweixin-module
在bctos-weixin-h5根目录下，执行npm初始化（如果你的根目录下已经有package.json文件可省这一步）
npm init
一直默认回车即可
然后正式安装jweixin-module
npm install jweixin-module --save
安装好后在App.vue文件中引入
var wx = require('jweixin-module')
生成JS-SDK配置参数
然后在pages/index/index页面的onReady方法中加入生成JS-SDK配置参数，让页面一加载进来就完成配置
完整的代码请在官方插件市场下载：https://ext.dcloud.net.cn/plugin?id=4829
uniCloud.callFunction({
name: 'bctos-weixin',
data: {
"action": "getJsApiParams",
"url": location.href.split('#')[0]
},
success(res) {
console.log('getJsApiParams get res', res)
if (res.result.code != 0) {
getApp().error(res.result.message)
} else {
getApp().share(res.result)
}
}
})一定要注意上面url的参数，一定要填写location.href.split('#')[0]
在这一步最容易出现invalid signature错误，我们也是调试了很久才修改好，如果真出现这个问题，先按官方的建议排查一下
1. 确认签名算法正确，可用http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign 页面工具进行校验。
2. 确认config中nonceStr（js中驼峰标准大写S）, timestamp与用以签名中的对应noncestr, timestamp一致。
3. 确认url是页面完整的url(请在当前页面alert(location.href.split('#')[0])确认)，包括'http(s)://'部分，以及'？'后面的GET参数部分,但不包括'#'hash后面的部分。
4. 确认 config 中的 appid 与用来获取 jsapi_ticket 的 appid 一致。
5. 确保一定缓存access_token和jsapi_ticket。
6. 确保你获取用来签名的url是动态获取的，动态页面可参见实例代码中php的实现方式。如果是html的静态页面在前端通过ajax将url传到后台签名，前端需要用js获取当前页面除去'#'hash部分的链接（可用location.href.split('#')[0]获取,而且需要encodeURIComponent），因为页面一旦分享，微信客户端会在你的链接末尾加入其它参数，如果不是动态获取当前链接，将导致分享后的页面签名失败。 后端云函数实现getJsApiParams方法的代码
async function getApiTicket() {
//先从缓存获取，如果存在就要不重复从微信获取
let key = '' + appId
let ticket = await cache(key)
if (ticket !== false) {
console.log('ticket缓存已存在', ticket);
return ticket
}
let access_token = await getAccessToken()
if (access_token == false) {
return {
code: 1,
message: '获取access_token失败'
}
} else {
console.log('获取access_token成功', access_token);
}
//这里也要使用代理网址请求
let url = 'http://weixin-agent.bctos.cn/cgi-bin/ticket/getticket?access_token=' + access_token + '&type=jsapi'
let res = await uniCloud.httpclient.request(url, {
method: 'GET',
data: {}
})
let result = JSON.parse(res.data.toString())
if (typeof(result.ticket) == "undefined") {
console.log('重新获取的Ticket失败了', result)
return false
} else {
console.log('重新获取的Ticket的结果:', result)
await cache(key, result.ticket, result.expires_in)
return result.ticket
}
}
//获取ticket
let ticket = await getApiTicket()
if (ticket == false) {
return {
code: 2,
message: '获取ticket失败'
}
} else {
console.log('获取ticket成功', ticket);
}
let ret = {
jsapi_ticket: ticket,
noncestr: createNonceStr(),
timestamp: createTimestamp(),
url: event.url
};
let string = raw(ret)
console.log('排序后加加密前的字段串', string)
ret.signature = sha1(string);
ret.appId = appId
ret.code = 0
console.log('最终返回的参数', ret)
return ret注意上面获取ticket的地址，特别是&type=jsapi这个参数，由于微信文档里还有一个获取会员卡ticket的地方，名字都是相同的，URL前面的地址也是一样的，只是后面&type=card不一样。之前不知道，就是这个问题导致我们整整调试了两天，反复按官方上面提到的6点调试了很久，还是报invalid signature报错，所以真的如果报这个错误，要一个字母一个字母都仔细比对才行。
实现自定义分享
成功获取到JS-SDK参数后，就可以在前端使用wx.config进行配置了，下面是配置加自定义分享的内容，如果需要加其它功能，如地理位置等信息，需要有jsApiList里加入对于的接口名
share(jsapi_params) {
let config = {
debug: false,
appId: jsapi_params.appId, // 必填，公众号的唯一标识
timestamp: jsapi_params.timestamp, // 必填，生成签名的时间戳
nonceStr: jsapi_params.noncestr, // 必填，生成签名的随机串
signature: jsapi_params.signature, // 必填，签名，见附录1
jsApiList: [
'updateAppMessageShareData',
'updateTimelineShareData'
]
}
console.log('配置参数', config);
wx.config(config);
wx.error(function(res) {
console.log('JS-SDK配置出问题了', res)
});
wx.ready(function() {
//自定义分享的内容，开发者可以自主修改这部分内容
let shareData1 = {
title: '个体工商户在线注册',
link: "https://caiwu.bctos.cn/index.html?suid=" + uni.getStorageSync('share_uid') +
'#pages/config/detail',
imgUrl: "https://caiwu.bctos.cn/static/share.jpg",
success: function(res) {
console.log('分享设置成功', res);
}
}
let shareData2 = {
...shareData1,
desc: '通过深牛财务线上操作，轻松，快捷办理个体营业执照。'
}
wx.updateAppMessageShareData(shareData2)
wx.updateTimelineShareData(shareData1)
});
},要看效果不能在浏览器里预览，一定要在微信开发者工具里看，因为浏览器无法调用微信的JS接口。这是在微信开发者工具的公众号网页调试里看到的效果，看到分享设置成功说明js-sdk参数已经配置正常，在手机里分享的话就可以看到自定义的分享内容了
1 个评论
要回复文章请先登录或注册
老表小程序