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

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

});
}

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

上一篇:基于python Wechaty的微信群虚拟币报价机器人


下一篇:微信小程序 tab组件