vue 微信分享（实战）

28次阅读

共计 1746 个字符，预计需要花费 5 分钟才能阅读完成。

今天碰到了微信分享的需求，总体上来讲还是比较简单的，但是还是碰到了一个假想的坑 (真的是假想),???? api 地址

1. 思路

步骤一：绑定域名
引入 JS 文件
通过 config 接口注入权限验证配置 (反正微信的东西都有这一步)????
通过 ready 接口处理成功验证
通过 error 接口处理失败验证

2. 实现
1. 绑定域名，在公众号后台绑定域名，所以最后的测试一定要是线上 (环境要么用内网穿透，这样容易调试, 不用每一次都发测试环境)
2. 在 index.html 文件里面引入
http://res.wx.qq.com/open/js/jweixin-1.4.0.js // 注意协议

3. 通过 config 接口注入权限验证配置, 下面五个参数都是通过请求后台，后台返回给你的。注意: 当前页面的 url 是要在这个接口里给后台的，它们才能生成可用的, 签名算发, url 的格式如下: url（当前网页的 URL，不包含 #及其后面部分 ), 所以要注意 vue-router 的模式 (通过 config 接口注入权限验证配置,jsApiList 是调用的事件，api 文档附录 2 里面有)
wx.config({
debug: false, // 是否开启调试模式
appId: appId, //appid
timestamp: timestamp, // 时间戳
nonceStr: nonceStr, // 随机字符串，只有这个是驼峰????
signature: signature, // 签名
jsApiList: [
“onMenuShareTimeline”,
“onMenuShareAppMessage”,
“onMenuShareQQ”,
“onMenuShareWeibo”,
“onMenuShareQZone”
] // 需要使用的 JS 接口列表
});

// 判断当前客户端版本是否支持指定 JS 接口 , 这步可无
wx.checkJsApi({
jsApiList: [
“onMenuShareTimeline”,
“onMenuShareAppMessage”,
“onMenuShareQQ”,
“onMenuShareWeibo”,
“onMenuShareQZone”
], // 需要检测的 JS 接口列表，所有 JS 接口列表见附录 2,
success: function(res) {
console.log(res);
// 以键值对的形式返回，可用的 api 值 true，不可用为 false
// 如：{“checkResult”:{“chooseImage”:true},”errMsg”:”checkJsApi:ok”}
}
});

![微信分享](https://pxw-my.oss-cn-hangzhou.aliyuncs.com/blog/20190121202108.png)

// 通过 ready 接口处理成功验证
wx.ready(function() {
const share = {
title: mainTitle, // 分享出去的 title
desc: subTitle, // 描述信息
imgUrl: smallIcons, // 分享的小图标
link: url, // 分享的除去的 url
success: function() {
dosometing(); // 分享成功，成功之后要做的事情
},
cancel: function() {
dosometing(); // 分享取消，取消之后要做的事情
}
};
wx.onMenuShareAppMessage(share); // 微信好友
wx.onMenuShareTimeline(share); // 朋友圈
wx.onMenuShareQQ(share); // QQ
wx.onMenuShareQZone(share); // QQ 空间
wx.onMenuShareWeibo(share); // 腾讯微博
});