注：1.引入jweixin.js，需要1.6.0版本 ；
http://res2.wx.qq.com/open/js/jweixin-1.6.0.js；
2.設置wx.config;
設置：openTagList:['wx-open-launch-weapp']（必須有，跳轉小程序）;
設置：jsApiList:['chooseImage', 'previewImage']（必須有，不然安卓不顯示）；
3.Vue中忽略wx-open-launch-weapp標簽檢測;
在main.js中添加：Vue.config.ignoredElements = ['wx-open-launch-weapp']
4.寫了html，css代碼后，按鈕不出現的情況是正常的，部署后用手機打開才能看見打開小程序按鈕。如果想調按鈕的樣式可以將<script type="text/wxtag-template"></script>標簽換成 <template></template>進行包裹，打包部署時記得要換成<script type="text/wxtag-template"></script>
方式1：將按鈕寫成HTML里面
<template>
<view class="page-content white-bg">
<view class="wx-open-launch-weapp-container flex1" style="">
<wx-open-launch-weapp :path="path" id="launch-btn" class="btn-open-weapp " username="gh_dceafb54a6af" @launch="handleLaunchFn" @error="handleErrorFn">
<script type="text/wxtag-template">
<style>
.btn {
border-radius: 50rpx;
text-align: center;
font-size: 18px;
letter-spacing: 2rpx;
width: 600rpx;
height: 80rpx;
line-height: 80rpx;
outline:none;
color: #FFFFFF;
background: #118271;
border: 0;
}
</style>
<p class="btn">打開小程序</p>
</script>
</wx-open-launch-weapp>
</view>
</view>
</template>
2.js
<script>
// 公眾號 JSSDK
let wx = require('weixin-js-sdk')
export default{
data(){
return{
path: ''
}
},
onLoad(e) {
this.skipXCX()
},
methods:{
// 按鈕成功回調
handleLaunchFn (e) {
console.log('suecss', e.detail);
},
// 按鈕失敗回調
handleErrorFn(e){
console.log('fail', e.detail);
},
// 獲取小程序簽名時間戳
async skipXCX(){
const that = this;
let linkUrl = window.location.href
let params = {
url: linkUrl,
}
const rsp = await that.$http.getConfig(params)
console.log('rsp',rsp)
wx.config({
debug: false, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數，可以在pc端打開，參數信息會通過log打出，僅在pc端時才會打印。
appId: getApp().globalData.appid, // 必填，公眾號的唯一標識
timestamp: rsp.data.timestamp, // 必填，生成簽名的時間戳
nonceStr: rsp.data.noncestr, // 必填，生成簽名的隨機串
signature:rsp.data.signature, // 必填，簽名
jsApiList: ['chooseImage' ], // 必填，需要使用的JS接口列表
openTagList: ['wx-open-launch-weapp'] // 可選，需要使用的開放標簽列表，例如['wx-open-launch-app']
})
wx.ready(function(res) {
setTimeout(()=>{
console.log('成了');
},1000);
})
wx.error(function(err) {
console.log('errr',err)
// config信息驗證失敗會執行error函數，如簽名過期導致驗證失敗，具體錯誤信息可以打開config的debug模式查看，也可以在返回的res參數中查看，對於SPA可以在這里更新簽名
});
}
}
}
</script>
3.css
<style lang='scss' scoped>
.page-content{
width: 100%;
height: 100vh;
background: #fff;
display: flex;
flex-direction: column;
align-items: center;
}
</style>
方式二：將按鈕代碼寫在js
html：
1.<div v-html="wxOpenTags"></div>
2.在data里面定義變量：wxOpenTags: '',
3.在onload方法里面調用this.skipXCX()
async skipXCX(){
const that = this;
let linkUrl = window.location.href
let params = {
url: linkUrl,
}
console.log('linkUrl',linkUrl)
const rsp = await that.$http.getConfig(params)
console.log('rsp',rsp)
wx.config({
debug: false, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數，可以在pc端打開，參數信息會通過log打出，僅在pc端時才會打印。
appId: getApp().globalData.appid, // 必填，公眾號的唯一標識
timestamp: rsp.data.timestamp, // 必填，生成簽名的時間戳
nonceStr: rsp.data.noncestr, // 必填，生成簽名的隨機串
signature:rsp.data.signature, // 必填，簽名
jsApiList: ['chooseImage' ], // 必填，需要使用的JS接口列表
openTagList: ['wx-open-launch-weapp'] // 可選，需要使用的開放標簽列表，例如['wx-open-launch-app']
})
wx.ready(function(res) {
setTimeout(()=>{
console.log('ready222222222222222');
//給wxOpenTags復制，富文本渲染
that.wxOpenTags=`<wx-open-launch-weapp path="pages/home/index/index.html?code=123456789" id="launch-wxapp" username="gh_dceafb54a6af" @launch="handleLaunchFn" @error="handleErrorFn">
<template>
<style>
.btn-open-weapp{
border-radius: 50rpx;
text-align: center;
font-size: 18px;
letter-spacing: 2rpx;
width: 600rpx;
height: 80rpx;
line-height: 80rpx;
outline:none;
color: #FFFFFF;
background: #118271;
border: 0;
}
</style>
<button class="btn-open-weapp">出來吧皮卡丘</button >
</template>
</wx-open-launch-weapp>`;
console.log('11111111111',that.wxOpenTags);
},1000);
})
wx.error(function(err) {
console.log('errr',err)
// config信息驗證失敗會執行error函數，如簽名過期導致驗證失敗，具體錯誤信息可以打開config的debug模式查看，也可以在返回的res參數中查看，對於SPA可以在這里更新簽名
});
}