一、安装weixin-js-sdk
微信jsSDK版本要求1.6.0，引入方法有两种
- 方法一 安装sdk包
npm install weixin-js-sdk
- 方法二 在index.html中添加如下代码
<script src="https://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
二、config注入
import wx from 'weixin-js-sdk';
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.jsApis, // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
jsApiList: [
'wx-open-launch-weapp', // 跳转小程序时必填
'updateAppMessageShareData',
'updateTimelineShareData',
'showOptionMenu',
"showMenuItems",
"showAllNonBaseMenuItem",
"hideAllNonBaseMenuItem"
],
openTagList: ['wx-open-launch-weapp'] // 跳转小程序时必填
});
wx.ready(() => {
setTimeout(() => {
if (cb && typeof cb === "function") {
console.log("ready");
cb(wx);
}
});
}, 500);
wx.error(function(res) {
console.log('config err: ', res);
});
三、页面引入
<li class="applet-item"
@click="onJump('applet', '试试小程序')">
<img src="@/assets/img/Qi/icon_applets@3x.png" alt="">
<p class="text">试试小程序</p>
<wx-open-launch-weapp
class="openweapp"
id="launch-btn"
username="gh_ca4314f4b099"
path="pages/index/index.html">
<script type="text/wxtag-template">
<style>.btn { padding: 12px;opacity:0 }</style>
<button class="btn">打开小程序</button>
</script>
</wx-open-launch-weapp>
</li>
<style lang="stylus" scoped>
.applet-item
width: 164px;
height: 66px;
background: #FFFFFF;
display: flex
align-items: center
padded_box(border-box, 15px 16px)
border-radius: 8px
position: relative
img
width: 32px
.text
width 78px
line-height: 18px;
font-family: 'PingFangSC-Regular';
font-size: 14px;
color: #646363
margin-left: 8px
// 原来样式不变，将跳转小程序的标签透明度设为0定位到父元素上
.openweapp
width 100%
height 100%
position absolute
left 0
right 0
top 0
bottom 0
</style>
四、vue报错
vue会显示wx-open-launch-weapp组件未注册
在main.js中加入
Vue.config.ignoredElements = ['wx-open-launch-weapp']
参考文献：
https://www.jianshu.com/p/c3db8f177845
https://blog.csdn.net/wenjin_Deng/article/details/114640713
