微信网页开发分享功能剖析

向右看齐 2022-03-01 03:06 209阅读 0赞

# 微信网页开发 分享功能剖析 #

1.  步骤一：绑定域名

先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。

1.  步骤二：引入JS文件

在需要调用JS接口的页面引入如下JS文件，（支持https）：[http://res.wx.qq.com/open/js/jweixin-1.4.0.js][http_res.wx.qq.com_open_js_jweixin-1.4.0.js]

如需进一步提升服务稳定性，当上述资源不可访问时，可改访问：[http://res2.wx.qq.com/open/js/jweixin-1.4.0.js][http_res2.wx.qq.com_open_js_jweixin-1.4.0.js] （支持https）。

备注：支持使用 AMD/CMD 标准模块加载方法加载

1.  通过config接口注入权限验证配置

所有需要使用JS-SDK的页面必须先注入配置信息，否则将无法调用（同一个url仅需调用一次，对于变化url的SPA的web app可在每次url变化时进行调用

wx.config({
        debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        appId: '', // 必填，公众号的唯一标识
        timestamp: , // 必填，生成签名的时间戳
        nonceStr: '', // 必填，生成签名的随机串
        signature: '',// 必填，签名
        jsApiList: [] // 必填，需要使用的JS接口列表
    });

1.  步骤四：通过ready接口处理成功验证

wx.ready(function(){
        // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
    });
    
    // 这个基本不用写，当debug开启时会有
    wx.error(function(res){
        // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
    });

1.  常见问题解决

1.invalid url domain当前页面所在域名与使用的appid没有绑定，请确认正确填写绑定的域名，仅支持80（http）和443（https）两个端口，因此不需要填写端口号（一个appid可以绑定三个有效域名
    
    2. invalid signature签名错误（ 这个是最常见的问题 ）
    《1》微信 JS 接口签名校验工具https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign  （ 在这个地址校验你的签名，如果线上的签名和这里的生成的一样，即可证明签名没有问题，但是这时还有签名错误的话，可以尝试删除本地的ticket，重新生成一下。一般可以解决 ）
    《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），因为页面一旦分享，微信客户端会在你的链接末尾加入其它参数，如果不是动态获取当前链接，将导致分享后的页面签名失败。

1.  分享接口

自定义“分享给朋友”及“分享到QQ”按钮的分享内容（1.4.0）
    wx.ready(function () {   //需在用户可能点击分享按钮前就先调用
        wx.updateAppMessageShareData({ 
            title: '', // 分享标题
            desc: '', // 分享描述
            link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            imgUrl: '', // 分享图标
            success: function () {
              // 设置成功
            }
        })
    });
    
    自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容（1.4.0）
    wx.ready(function () {      //需在用户可能点击分享按钮前就先调用
        wx.updateTimelineShareData({ 
            title: '', // 分享标题
            link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            imgUrl: '', // 分享图标
            success: function () {
              // 设置成功
            }
        })
    });
    
    获取“分享到腾讯微博”按钮点击状态及自定义分享内容接口
    wx.onMenuShareWeibo({
    title: '', // 分享标题
    desc: '', // 分享描述
    link: '', // 分享链接
    imgUrl: '', // 分享图标
    success: function () {
    // 用户确认分享后执行的回调函数
    },
    cancel: function () {
    // 用户取消分享后执行的回调函数
    }
    });
    
    拍照或从手机相册中选图接口
    wx.chooseImage({
    count: 1, // 默认9
    sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
    sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
    success: function (res) {
    var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
    }
    });
    
    // 接口列表
    
    updateAppMessageShareData
    
    updateTimelineShareData
    
    onMenuShareTimeline（即将废弃）
    
    onMenuShareAppMessage（即将废弃）
    
    onMenuShareQQ（即将废弃）
    
    onMenuShareWeibo
    
    onMenuShareQZone
    
    startRecord
    
    stopRecord
    
    onVoiceRecordEnd
    
    playVoice
    
    pauseVoice
    
    stopVoice
    
    onVoicePlayEnd
    
    uploadVoice
    
    downloadVoice
    
    chooseImage
    
    previewImage
    
    uploadImage
    
    downloadImage
    
    translateVoice
    
    getNetworkType
    
    openLocation
    
    getLocation
    
    hideOptionMenu
    
    showOptionMenu
    
    hideMenuItems
    
    showMenuItems
    
    hideAllNonBaseMenuItem
    
    showAllNonBaseMenuItem
    
    closeWindow
    
    scanQRCode
    
    chooseWXPay
    
    openProductSpecificView
    
    addCard
    
    chooseCard
    
    openCard

页面地址：[https://mp.weixin.qq.com/wiki?t=resource/res\_main&id=mp1421141115][https_mp.weixin.qq.com_wiki_t_resource_res_main_id_mp1421141115]

[http_res.wx.qq.com_open_js_jweixin-1.4.0.js]: http://res.wx.qq.com/open/js/jweixin-1.4.0.js
[http_res2.wx.qq.com_open_js_jweixin-1.4.0.js]: http://res2.wx.qq.com/open/js/jweixin-1.4.0.js
[https_mp.weixin.qq.com_wiki_t_resource_res_main_id_mp1421141115]: https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115