1、应用框架为Vue、history模式
2、注意：
2-1、微信jssdk应用：通过命令配置依赖包"weixin-js-sdk": "^1.2.0"会报错_wx.onMenuShareWechat is not a function，解决方法：去掉命令安装的jssdk的包，在index.html中引入CDN链接
index.html
<!-- 引入微信js-sdk -->
<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
2-2、企业微信中调用wx.config方法 appId传的参数值是企业微信的corpID
wx.config({
beta: true,// 必须这么写，否则wx.invoke调用形式的jsapi会有问题
debug: wxOpt.debug, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: localStorage.getItem('corpId'), // 必填，企业微信的corpID
timestamp: sign.timestamp, // 必填，生成签名的时间戳
nonceStr: sign.nonceStr, // 必填，生成签名的随机串
signature: sign.signature,// 必填，签名，见 附录-JS-SDK使用权限签名算法
jsApiList: wxOpt.jsApis // 必填，需要使用的JS接口列表，凡是要调用的接口都需要传进来
});
2-3、获取签名需要的页面url不需要做另外处理（安卓和ios都是去当前页url，微信公众号ios必须取落地页的url）
export function getWxSign(cb) {
if (localStorage.getItem('appid')) {
// 根据微信要求获取签名的算法要在服务器端实现。由后端给出接口,前端传递 随机字符串、分享链接、时间戳、公众号code名称
// 公众号的code是为了寻找到当前的公众号的token从而获取签名
// 后端会处理token，因为token是2小时就过期，谨记如果过期就再请求一次刷新token
if (localStorage.getItem('userAgent') === 'corpWechat') {
// 企业微信
// 企业微信逻辑 安卓和ios上获取签名的地址一致
let signLink = document.location.href.split('#')[0]
signLink = encodeURIComponent(signLink).replace(/!/g, '%21').replace(/'/g, '%27').replace(/\(/g, '%28').replace(/\)/g, '%29').replace(/\*/g, '%2A').replace(/%20/g, '+')
get(`/api/wechat/cp/portal/${localStorage.getItem('agentId')}/jsSign?url=${signLink}`, {}, {}, handleJsSignErr).then(rsp => {
let sign = rsp.data;
// if (cb && typeof cb === "function") {
console.log('signature: ', sign)
wx.config({
beta: true,// 必须这么写，否则wx.invoke调用形式的jsapi会有问题
debug: wxOpt.debug, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: localStorage.getItem('corpId'), // 必填，企业微信的corpID
timestamp: sign.timestamp, // 必填，生成签名的时间戳
nonceStr: sign.nonceStr, // 必填，生成签名的随机串
signature: sign.signature,// 必填，签名，见 附录-JS-SDK使用权限签名算法
jsApiList: wxOpt.jsApis // 必填，需要使用的JS接口列表，凡是要调用的接口都需要传进来
});
wx.ready(() => {
setTimeout(() => {
if (cb && typeof cb === "function") {
console.log("ready");
cb(wx);
}
});
}, 500);
wx.error(function(res) {
console.log('config err: ', res);
});
});
} else {
// 微信
var u = navigator.userAgent;
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
let signLink
if (isiOS) {
signLink = window.entryUrl
} else {
signLink = document.location.href.split('#')[0]
}
signLink = encodeURIComponent(signLink).replace(/!/g, '%21').replace(/'/g, '%27').replace(/\(/g, '%28').replace(/\)/g, '%29').replace(/\*/g, '%2A').replace(/%20/g, '+')
get(`/wechat/server/response/get_js_sign?url=${signLink}`, { appid: localStorage.getItem('appid') }, {}, handleJsSignErr).then(rsp => {
let sign = rsp.data;
// if (cb && typeof cb === "function") {
console.log('signature2: ', sign)
wx.config({
debug: wxOpt.debug, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: localStorage.getItem('appid'), // 必填，公众号的唯一标识
timestamp: sign.timestamp, // 必填，生成签名的时间戳
nonceStr: sign.nonceStr, // 必填，生成签名的随机串
signature: sign.signature, // 必填，签名，见附录1
jsApiList: wxOpt.jsApis2, // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
jsApiList: [
'onMenuShareAppMessage',
'onMenuShareTimeline',
'showOptionMenu',
"showMenuItems",
"showAllNonBaseMenuItem",
"hideAllNonBaseMenuItem"
]
});
wx.ready(() => {
setTimeout(() => {
if (cb && typeof cb === "function") {
console.log("ready");
cb(wx);
}
});
}, 500);
wx.error(function(res) {
console.log('config err: ', res);
});
});
}
}
}
3、分享接口应用场景
3-1、获取“转发”、“微信”、“分享到朋友圈”按钮点击状态及自定义分享内容接口 【具体作用：控制页面左上角菜单按钮的显示】
效果如下：
image.png
3-2、自定义转发到会话、自定义转发到微信【应用场景：页面自定义按钮，点击调用该方法调取微信会话列表，或者企业微信的会话列表；具体作用：选择好友即可分享】
效果如下：
点击按钮：
image.png
自定义转发到会话的效果：
image.png
自定义转发到微信的效果：
image.png
3-3、将H5页面通过个人群发发送给客户和将H5页面通过群发助手发送给客户群
点击的按钮：
image.png
将H5页面通过个人群发发送给客户效果：
image.png
将H5页面通过群发助手发送给客户群效果：
image.png
4、wx.config方法的调用：
所有需要使用JS-SDK的页面必须先注入配置信息，否则将无法调用（同一个url仅需调用一次，对于变化url的SPA（single-page application）的web app可在每次url变化时进行调用）。
5、wx.ready方法的调用：
config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
网友评论