步骤一：绑定域名
先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。可以只设置一级域名，如*.qq.com, 这样的话，同个公司不同业务部门都可以绑定域名了。
备注：登录后可在“开发者中心”查看对应的接口权限。
步骤二：引入JS文件
在需要调用JS接口的html页面引入如下JS文件，（支持https）：res.wx.qq.com/open/js/jwe… 如需进一步提升服务稳定性，当上述资源不可访问时，可改访问：res2.wx.qq.com/open/js/jwe… （支持https）。
备注：支持使用 AMD/CMD 标准模块加载方法加载
步骤三：编写wxConfig.js 文件
import axios from 'axios';
/**
* @name: xxx
* @Date: 2021-04-30 10:00:00
* @msg: 微信分享朋友，分享朋友圈，H5跳转小程序配置
* @param {object} pageInfo
* @return {*}
*/
const wxConfig = (pageInfo) => {
let ua = navigator.userAgent.toLowerCase();
let isWXWork = ua.match(/wxwork/i) == 'wxwork'; // 企业微信
let isWeixin = !isWXWork && ua.match(/MicroMessenger/i) == 'micromessenger'; // 微信
if (!isWeixin) {
return;
}
axios({
method: 'post',
url: 'https://xxx.xxx.com/xxx/xxx',
data: {
JsSdkUrl: window.location.href
},
transformRequest: [function (data) {
let ret = '';
for (let it in data) {
ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&';
}
return ret;
}],
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
}).then(function (res) {
if (res.status === 200 && res.data) {
let data = res.data;
window.wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: data.appid, // 必填，公众号的唯一标识
timestamp: data.timestamp, // 必填，生成签名的时间戳
nonceStr: data.nonceStr, // 必填，生成签名的随机串
signature: data.signature, // 必填，签名
jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData'], // 必填，需要使用的JS接口列表
openTagList: ['wx-open-launch-weapp', 'wx-open-launch-app', 'wx-open-subscribe', 'wx-open-audio']
});
window.wx.ready(function () {
console.log('进入ready')
window.wx.updateAppMessageShareData({ // 朋友
title: pageInfo.shareTitle, // 分享标题
desc: pageInfo.shareDesc, // 分享描述
link: window.location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: pageInfo.shareImg, // 分享图标
success: function () {
// 用户点击了分享后执行的回调函数
console.log('updateAppMessageShareData success');
}
});
window.wx.updateTimelineShareData({ // 分享朋友圈
title: pageInfo.shareTitle, // 分享标题
link: window.location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: pageInfo.shareImg, // 分享图标
success: function () {
// 设置成功
console.log('updateTimelineShareData success');
}
})
});
wx.error(function (res) {
// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，
// 也可以在返回的res参数中查看，对于SPA可以在这里更新签名
console.error('wx.config.error' + JSON.stringify(res));
});
window.wx.checkJsApi({
jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData'], // 需要检测的JS接口列表，所有JS接口列表见附录2,
success: function (res) {
console.log('checkJsApi', res)
}
});
}
});
};
export {
wxConfig
}
步骤四：main.js 文件配置忽略Vue对开放标签的检查
// 开放标签属于自定义标签，Vue会给予未知标签的警告，
// 可通过配置Vue.config.ignoredElements来忽略Vue对开放标签的检查。
Vue.config.ignoredElements = ['wx-open-launch-weapp'];
步骤五：在vue组件进行引入wxConfig.js 进行必要配置
import { wxConfig } from '@/common/wxConfig';
// 可以在获取活动详情后,进行动态配置数据
let pageInfo = {
shareTitle: '活动标题', // 分享标题
shareDesc: '活动描述~~', // 分享描述
shareImg: 'http://placehold.it/120x120/e84c10/ffffff?text=share' // 分享图标
}
wxConfig(pageInfo);
此时，微信分享朋友，分享朋友圈等功能都可以正常使用了。
步骤六：编写wx-open-launch-weapp 标签
如果按钮样式固定，并且按钮文字固定的话，下列写法就满足了。
<div v-if="isWeixin">
<wx-open-launch-weapp id="launch-btn" username="gh_xxxxxxxx" path="pages/home/index?user=123&action=abc">
<script type="text/wxtag-template">
<style>.btn { padding: 12px }</style>
<button class="btn">打开小程序</button>
</script>
</wx-open-launch-weapp>
</div>
如果需要根据活动的状态动态设置按钮文案和按钮样式，用vue动态绑定样式和文案的方式无法起效。原因是在下列代码包裹内，里面的不再属于vue管理范畴了, 所以动态绑定无法生效。
<script type="text/wxtag-template">XXX</script>
第一次想用原生js获取这个button的dom，然后动态绑定样式和文案，发现获取这个dom总是null, 故此路不通。
<button id="launch-inner-btn" class="btn">打开小程序</button>
document.getElementById('launch-inner-btn') // null
第二次和同事讨论后，决定将wx-open-launch-weapp标签全部透明化，然后再造一个可以动态设置按钮文字和样式的button(此处命名为Btn)。
最后将wx-open-launch-weapp标签 和 Btn 用一个div 包裹起来，将透明的wx-open-launch-weapp标签盖在能看到的Btn上。最终效果为看到Btn，但是点击的却是透明的 wx-open-launch-weapp 标签，完美实现打开小程序的功能。
.wx-launch-wrap {
display: inline-block;
width: 100%;
height: 100%;
}
.wx-launch-btn {
position: relative;
}
.wx-launch {
position: absolute;
left: 0;
top: 0;
z-index: 1;
opacity: 0;
overflow: hidden;
}
<div v-if="isWeixin" lass="wx-launch-wrap wx-launch-btn">
<!-- 透明的wx-open-launch-weapp按钮, 此处一定要设置overflow: hidden;保证不溢出，设置z-index: 10;将此按钮遮在能看的按钮Btn上-->
<wx-open-launch-weapp
id="launch-btn"
class="btn wx-launch-wrap wx-launch"
:class="dynamicCss"
username="gh_xxxxxxxx"
path="pages/home/index?user=123&action=abc"
>
<script type="text/wxtag-template">
<button style="display:inline-block;width:1000px;height:1000px;opacity:0;"></button>
</script>
</wx-open-launch-weapp>
<!-- 能看的按钮Btn dynamicCss为动态设置的css btnLabel为动态设置的按钮文字-->
<button class="btn" :class="dynamicCss">{{btnLabel}}</button>
</div>
到了这里，就可以实现动态设置按钮样式和文字了。亦可以完美实现打开小程序的功能。
