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

<template>
	<view style="padding: 100rpx">
	   <wx-open-launch-weapp
	       id="launch-btn"
	       username="gh_170e5722c167"
	       path="pages/index/index"
	   >
	       <script type="text/wxtag-template">
	           <style>
								.link_btn {
									width: 400rpx;
									/* margin: 600rpx auto 0; */
									height: 88rpx;
									background: linear-gradient(88deg, #5FBC23 0%, #85CE52 100%);
									opacity: 1;
									border-radius: 44rpx;
									color: #fff;
									text-align: center;
									line-height: 88rpx;
									font-size: 50rpx;
								}
							</style>
	           <div class="link_btn">前往争霸赛小程序</div>
	       </script>
	   </wx-open-launch-weapp>
	 </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: {
			//进入争霸赛小程序
			signInit() {
				const 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)
				const _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>