微信分享 - 简书

微信分享

一.绑定域名：

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

二.引入js文件：

在需要调用JS接口的页面引入JS文件

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

接口可以放在自己写的请求回调用，将成功回调 的值直接传入到wx.config需要的参数中。

将需要分享的url地址传给后台后台返回url

值得注意的是vue的hash路由需要将返回的url进行修改后面会写到


wx.config({

        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来。

        appId: appId, // 必填，公众号的唯一标识

        timestamp: timestamp, // 必填，生成签名的时间戳

        nonceStr: nonceStr, // 必填，生成签名的随机串

        signature: signature, // 必填，签名，见附录1

        jsApiList: [

                    'onMenuShareAppMessage'

        ] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2

 });

四. 在config下方，有一个ready方法，该方法用来初始化我们要应用的js列表，而且任何方法一定要放在config方法后才可以。


let link = `${location.origin}${location.pathname}?#${this.$route.fullPath}`

wx.ready(function() {
       wx.onMenuShareAppMessage({

                    title: '', // 分享标题

                    desc: '', // 分享描述

                    link: link, // 分享链接

                    imgUrl: '', // 分享图标

                    type: '', // 分享类型,music、video或link，不填默认为link

                    dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空

                    success: function() {

                        // 用户确认分享后执行的回调函数

                    },

                    cancel: function() {

                        // 用户取消分享后执行的回调函数

                    }

      });

 });

五. vue的hash路由从分享页按着正常路由跳转到其他页面，其他页面的逻辑中如果有需要获取当前页面url的需要，会发现这个url和正常路由跳转的不一样。需要将link修改成如下所示

let link = `${location.origin}${location.pathname}?#${this.$route.fullPath}`

六. wx.config的debug设为true的话打开页面会显示签名是否成功，若显示 invalid signature，不要去纠结其他问题了，就是签名错误。

解决办法
1、确认签名算法是否正确，可用 (http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign) 页面工具进行校验。
2、确认config中noncestr, timestamp与用以签名中的对应noncestr, timestamp一致。
3、确认 config 中的 appid 与用来获取 jsapi_ticket 的 appid 一致。
4、确认url是页面完整的url，包括GET参数部分。

最后编辑于：2019.06.17 14:07:27