web-app-v1/pages/test/test3.vue

<template>
	<view class="container" v-html="html"></view>
</template>

<script>
	import { getSignPackage } from '@/apis/app.js';
	export default {
		name: 'ShareIndex',
		data() {
			return {
				html: '',
				username: 'gh_170e5722c167',
				path: 'pages/index/index', //争霸赛小程序初始进入路径
			}
		},
		onReady() {
			this.signInit();
			// 微信 config 信息验证后，渲染开放标签
			uni.$on('jweixinReady', () => {
				this.init()
			})
		},
		methods: {
			//进入争霸赛按钮
			init() {
				this.html =
					`<wx-open-launch-weapp id="launch-btn" username="${this.username}" path="${this.path}">  
							        <template>  
							            <style>  
										   .open_img {
												width:50px;
												height:50px;
												color: #f30;
										   } 
							            </style> 
										<div class="open_img">测试</div>
							        </template>  
							    </wx-open-launch-weapp>`;
					console.log('html', this.html)
			},
			//进入争霸赛小程序
			signInit() {
				let script = document.createElement('script')
				script.type = 'text/javascript'
				script.src = 'https://res.wx.qq.com/open/js/jweixin-1.6.0.js'
				document.getElementsByTagName('head')[0].appendChild(script)
				let _this = this;
				let link = window.location.href;
				getSignPackage({
					url: link
				}).then(res => {
					if (res.code == 200) {
						let data = JSON.parse(res.data);
						// 判断是否支持分享
						wx.config({
							debug: false, //开启debug模式.正式环境设置为false,测试环境设置为true
							appId: data.appId,
							timestamp: data.timestamp,
							nonceStr: data.nonceStr,
							signature: data.signature,
							jsApiList: ['wx-open-launch-weapp'], //根据需要看需要哪些SDK的功能
							openTagList: ['wx-open-launch-weapp'] // 跳转小程序时必填
						});
						wx.ready(() => {
							uni.showToast({
								title: '获取成功',
							})
							uni.$emit('jweixinReady', res)
							this.$nextTick(() => {
								uni.showToast({
									title: '拿到了',
								})
								let btn = document.getElementById('launch-btn');
								btn.addEventListener('launch', e => {
									uni.showToast({
										title: '小程序打开成功',
									})
									console.log('success');
								});
								btn.addEventListener('error', e => {
									uni.showToast({
										title: '小程序打开失败',
									})
									console.log('fail', e.detail);
								});
							});
						})
						wx.error(err => {
							uni.showToast({
								title: '获取失败',
							})
							console.log(err, 'err')
							uni.showModal({
								content: err || '失败',
								showCancel: false
							})
						});
					} else {
						uni.showModal({
							content: res.msg || '分享失败',
							showCancel: false
						})
					}
				});
			},
		}
	}
</script>

<style scoped lang="scss">
	#share_container {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: space-between;
		flex-direction: column;
	}
	#imgWrapper {
		flex: 1;
		@include flex();
		.showCan {
			width: 680rpx;
			height: 960rpx;
			border-radius: 14rpx;
			box-shadow:0px 0px 23px 2px rgba(194,133,58,0.5);
		}
	}
	.sharetext {
		font-size: 80rpx;
		text-align: center;
		margin: 8rpx 0;
		box-sizing: border-box;
		padding: 30rpx 24rpx;
	}
</style>