微信公众号跳转到微信小程序

注：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可以在这里更新签名

});
}