1、绑定域名
这一步必须要确认已经完成，要不然很多坑都不知道从哪里排查。
设置IP白名单和JS安全域名：
登录后可在“开发者中心”查看对应的接口权限
2、封装分享方法
CDN引入：
在需要调用JS接口的页面引入如下JS文件：res.wx.qq.com/open/js/jwe… 当上述资源不可访问时，可改访问：res2.wx.qq.com/open/js/jwe…
VUE引入： weixin-js-sdk库 或者 WechatPlugin + VueJsonp 。由于分享在H5项目比较常用，我这里把分享功能封装成一个对象，选择的是WechatPlugin + VueJsonp 实现。
- 安装依赖：npm i -D vux vue-jsonp axios （vux这个不是vuex）
- 封装请求方法（请求方法一般项目都有封装好的，用自己项目上的就行，简单弄一个提供参考）
import {create} from 'axios';
var axios = create({
baseURL : window.CONFIG.API_URL,// API_URL最好写在配置文件统一管理，把CONFIG定义在全局
timeout :10000,
headers : {
post:{
'Content-Type':'application/json;charset=UTF-8'
}
}
});
// 减少一层层级
axios.interceptors.response.use((config) => {
return config.data;
});
export default axios;
- 封装分享方法：包括注入权限验证配置、ready接口处理成功验证 和 error接口处理失败验证
// 引入插件
import { WechatPlugin } from 'vux';
import VueJsonp from 'vue-jsonp';
// 引入封装的请求方法
import axios from './axios';
/**
* Vue : Vue
* shareData: 分享的数据
*/
export default {
init: function(Vue, shareData) {
if(!is_weixin()) return;
Vue.use(VueJsonp);
Vue.use(WechatPlugin);
// 调用后端接口完成签名
axios.post('ssg/wechat/get-sign', {
url: location.href
// url: location.href.split('#')[0] // 签名的url也可以只取#前面部分
}).then(res => {
let msg = {}
if(res.code == 0){
msg = res.data;
}else{
console.log('签名失败');
return;
}
this.weShare(msg, Vue.wechat, shareData);
});
},
weShare(msg, wx, shareData) {
let shareTitle = shareData.title; // 分享标题
let shareDesc = shareData.desc; // 分享描述
let shareImgUrl = shareData.img; // 分享图标 shareLogo
let shareLink = shareData.link // 分享链接，不填就是当前页面
let sharedSuccessCallback = shareData.sharedSuccessCallback; // 分享成功回调函数
// **通过config接口注入权限验证配置**
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，
// 若要查看传入的参数，可以在pc端打开，会通过log打出，仅在pc端才会打印。
appId: window.CONFIG.APPID, // 必填，公众号的唯一标识 如'wx3164fa43a3993362'
timestamp: msg.timestamp, // 必填，生成签名的时间戳
nonceStr: msg.nonceStr, // 必填，生成签名的随机串
signature: msg.signature, // 必填，签名
jsApiList: [
'onMenuShareAppMessage',
'onMenuShareTimeline',
'onMenuShareTimeline',
'onMenuShareQQ',
'onMenuShareWeibo'
] // 必填，需要使用的JS接口列表
});
// 通过error接口处理失败验证，这里有几个常见错误，后面会讲到。
wx.error(function (res) {
// config信息验证失败会执行error函数，如签名过期导致验证失败，
// 具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，
// 对于SPA可以在这里更新签名。
console.log('wx.error:', res);
});
wx.ready(function() {
// console.log("wx ready")
//分享给好友
wx.onMenuShareAppMessage({
title: shareTitle, // 分享标题，可选
desc: shareDesc, // 分享描述，可选
imgUrl: shareImgUrl, // 分享图标，可选
// link: shareLink, // 分享链接，可选，默认当前页面
success: function() { // 分享成功回调函数，可选
// sharedSuccessCallback?.() // 有些不支持这种写法，可以写成下面这种
sharedSuccessCallback && sharedSuccessCallback();
}
});
//分享到朋友圈
wx.onMenuShareTimeline({
title: shareTitle, // 分享标题
imgUrl: shareImgUrl, // 分享图标
// link: shareLink, // 分享链接
success: function() {
sharedSuccessCallback?.()
}
});
//分享到QQ
wx.onMenuShareQQ({
title: shareTitle, // 分享标题
desc: shareDesc, // 分享描述
imgUrl: shareImgUrl // 分享图标
// link: shareLink, // 分享链接
});
//分享到腾讯微博
wx.onMenuShareWeibo({
title: shareTitle, // 分享标题
desc: shareDesc, // 分享描述
imgUrl: shareImgUrl // 分享图标
// link: shareLink, // 分享链接
});
});
}
};
function is_weixin(){
var ua = navigator.userAgent.toLowerCase();
if(ua.match(/MicroMessenger/i)=="micromessenger") {
return true;
} else {
return false;
}
}
3、使用封装好的方法
import Vue from 'vue';
import wechat from '@/lib/wechat.js' // @/目录别名
let shareData = {
"title": '我在XXX健身房运动健身，一起来健身吧~',
"desc": '7*24H营业',
"img": this.imageUrl,
"link": this.url,
"sharedSuccessCallback":function(){}
}
wechat.init(Vue, shareData);
4、避坑
- 域名环境：微信webview页面凡是涉及登录、支付、获取用户信息、分享等操作都必须是域名环境。访问地址要求域名、http请求的url要求域名、用于签名的url要求域名、静默授权/非静默授权要求域名。
- invalid url domain：调用 wx.config接口打开debug模式可以看到这个常见错误。意思是当前页面所在域名与使用的 appid 没有绑定，这时候就要确认是否正确填写绑定的域名。（一个 appid 可以绑定三个有效域名）
- invalid signature：签名错误（特别是调用后端接口完成签名，这是前端不可控的部分，千万不要相信后端，拿到签名signature后一定要自己使用签名校验工具确保签名是有效的）。报错可能会伴随另一个字段信息realAuthUrl，值是这数组转成json的格式，先不要纠结它为什么有两个值，建议排查步骤建议如下： developers.weixin.qq.com/doc/offiacc…
效果展示：
参考文档：
微信开发文档：developers.weixin.qq.com/doc/offiacc… 签名校验工具：mp.weixin.qq.com/debug/cgi-b…
