微信分享

一.绑定域名:

先登录微信公众平台进入“公众号设置”的“功能设置”里填写“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参数部分。

你可能感兴趣的:(微信分享)