说明
需要写个接口获取公众号配置, 引入微信sdk的js, 拿到小程序的原始id来实现跳转, 小程序后台
https://mp.weixin.qq.com/wxamp/home/guide?lang=zh_CN&token=2002641475
没有花里胡哨的复制黏贴文,直接上代码
代码
<template>
<view>
<!-- #ifdef H5 -->
<view v-html="wxOpenTags"></view>
<!-- #endif -->
</view>
</template>
<script>
var weixin = document.createElement('script');
weixin.type = 'text/javascript';
weixin.src = 'https://res.wx.qq.com/open/js/jweixin-1.6.0.js';
document.body.appendChild(weixin);
export default {
data() {
return {
wxOpenTags: '打开小程序1'
};
},
onLoad(){
if (uni.getSystemInfoSync().platform == 'ios') {
var href = window.location.href.split('#')[0] || window.location.href
} else {
var href = window.location.href
}
// 这里要换成自己的api接口,返回公众号配置
this.$get('api/v1/wx/jsconfig', {
url: href
}).then(response => {
response.jsApiList=[
'checkJsApi',//判断当前客户端是否支持指定JS接口
'updateAppMessageShareData',//好友
'updateTimelineShareData',//朋友圈
'scanQRCode',//扫一扫
'chooseWXPay',//支付
'startRecord',//开始录音
'stopRecord',//停止录音
'playVoice',//播放语音
'pauseVoice',//暂停播放语音
'stopVoice',//停止播放语音
'uploadVoice',//上传语音
'downloadVoice',//下载语音
'translateVoice',//语音识别
'wx-open-launch-weapp'//打开小程序
]
wx.config({
debug: response.debug,
appId: response.appId,
timestamp: response.timestamp,
nonceStr: response.nonceStr,
signature: response.signature,
jsApiList: response.jsApiList,
openTagList:[
'wx-open-launch-weapp'//打开小程序
]
})
wx.ready(() => {
setTimeout(()=>{
// 这里的username代表小程序的原始id,需要到小程序后台去看,和appid不同,需要换成自己的小城id
this.wxOpenTags=`<wx-open-launch-weapp path="pages/index/index" id="launch-wxapp" username="gh_6ff3f1da728a">
<template>
<style>
.btn-open-weapp{
background: linear-gradient(to right, #ffd52e 0%, #ffef93 50%, #ffd52e 100%);
border: 0;
color: #424242;
text-shadow: 0px 1px 1px #fff;
border-radius: 50px;
text-align: center;
width: 120px;
height: 35px;
line-height: 35px;
outline:none;
}
</style>
<button class="btn-open-weapp">打开小程序2</button >
</template>
</wx-open-launch-weapp>`;
},1000);
})
}).catch(error => {
console.log(error)
})
}
}
</script>
效果图