一、首先,看正常通用的
1、绑定域名
再公众号开发设置里边配置域名
2、引入js文件
index.html
<script src="https://res2.wx.qq.com/open/js/jweixin-1.6.0.js "></script>
3、通过后台处理调用接口得到签名
这里通过添加路由守卫 判断 ios系统时 保存第一次进入时的链接地址(iso分享失败原因:因为ios获取到的url永远是你进入这个项目的第一个url,不访你可以点击上角刷新试试)
beforeRouteEnter(to, from, next) { let userAgent = navigator.userAgent; if (userAgent.includes("iPhone") || userAgent.includes("iPad")) { sessionStorage.setItem("originUrl", location.href); // 用于ios分享 } next(); },
sendShare() { // this.reload(); this.common.tip("点击右上角完成分享"); var timestamp = ""; var nonceStr = ""; var signature = ""; let urls = "";
// 这个判断是处理ios分享失效的问题 let userAgent = navigator.userAgent; if (userAgent.includes("iPhone") || userAgent.includes("iPad")) { urls = sessionStorage.getItem("originUrl"); } else { urls = window.location.href; }
// 这儿的调接口方法是自己封装的 this.http.getRequest(apis.getSignature_url, { urls: urls // 注意注意注意:这里的路径必须是当前页面路径,并且必须和公众号里边配置的域名保持一致,否则会签名失效 }).then(res => { console.log(res, "res"); timestamp = res.timestamp; nonceStr = res.nonceStr; signature = res.signature;
通过config接口注入权限验证配置
wx.config({ debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。 appId: "wxfbf80fe01e7999a8", // 必填,公众号的唯一标识,填自己的! timestamp: timestamp, // 必填,生成签名的时间戳,刚才接口拿到的数据 nonceStr: nonceStr, // 必填,生成签名的随机串 signature: signature, // 必填,签名,见附录1 jsApiList: ["updateAppMessageShareData", "onMenuShareTimeline"], // 权限导入 }); var url_link = apis.sharUrl + "/index?activityPlanId=" +this.activityPlanId + "&accountId=" + this.accountId;
通过ready接口处理成功验证
wx.ready(() => { //需在用户可能点击分享按钮前就先调用 // 分享给朋友 wx.updateAppMessageShareData({ title: this.data.title, // 分享标题 desc: this.data.introduce, // 分享描述 link: url_link, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致 imgUrl: this.logo, // 分享图标, 此图标也要以http开头的路径 success: function() { // 设置成功 } });
通过error接口处理失败验证
wx.error(function(res) { // config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。 }); }); // ================= }); },
参考:https://www.cnblogs.com/zishang91/p/10755488.html
https://blog.csdn.net/sinat_33184880/article/details/90240567