vue和uniapp单页面实现微信h5打开微信小程序

说明

需要写个接口获取公众号配置, 引入微信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>

效果图