注：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可以在这里更新签名
});
}
请发表评论