使用dcloud全家桶开发公众号H5系统

JS-SDK配置及自定义分享

小韦云科技-区块链+小程序+公众号+商城+分销+直播+企业官网+外贸电商-为您提供优质的开发服务-电话/微信联系:18123611282

在网页中要使用分享等一系列的微信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 = 'getApiTicket-' + 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参数已经配置正常,在手机里分享的话就可以看到自定义的分享内容了

本文由小韦云原创,转载请注明出处:https://www.bctos.cn/doc/18/1966,否则追究其法律责任

关键词:JS-SDK配置 自定义分享 invalid signature

广告位招商