微信公众号H5跳转小程序

<template>
	<view>
		<view class="txt_ys">注册成功!</view>
		<view class="tz_but">
			<wx-open-launch-weapp id="launch-btn" :username="username" :path="path" @launch="handleLaunchFn"
				@error="handleErrorFn" style="display: block;">
				<script type="text/wxtag-template">
					<style>
			.ant-btn {
				margin: auto;
				width: 80%;
				height: 40px;
				background: #fff;
				border-radius: 20px;
				margin-top: 50px;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #008CFF;
			                        }
			                     
			</style>
		 
			<p class="ant-btn">跳转小程序</p>
			
		</script>
			</wx-open-launch-weapp>
		</view>
		<image src="../../static/par_ti.png"></image>

	</view>
</template>

<script>
	let jweixin = require("jweixin-module")
	export default {
		data() {
			return {
				username: null,
				path: 'pages/index/index.html'
			}
		},
		onLoad() {
			console.log(location.href)
			uni.request({
				url: '??????',
				method: "POST",
				header: {
					'content-type': 'application/x-www-form-urlencoded',

				},
				data: {
					url: location.href
				},
				success: (res) => {


					let config = JSON.parse(res.data.result.data)
					console.log(config)

					jweixin.config({
						debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。  
						appId: config.appId, // 必填,公众号的唯一标识,填自己的!  
						timestamp: config.timestamp, // 必填,生成签名的时间戳,刚才接口拿到的数据  
						nonceStr: config.nonceStr, // 必填,生成签名的随机串  
						signature: config.signature, // 必填,签名  
						jsApiList: config.jsApiList,
						openTagList: ['wx-open-launch-weapp'] // 跳转小程序时必填  
					});
					// this.path = config.url
					this.username = res.data.result.gzh_id

					jweixin.ready(() => {
						console.log(5555);
						this.$nextTick(() => {
							let btn = document.getElementById('launch-btn');
							btn.addEventListener('launch', e => {
								console.log('success', 666);
								this.path = ""
							});
							btn.addEventListener('error', e => {
								alert('小程序打开失败');
								console.log('fail', e.detail);
							});
						});
					});

					jweixin.error(res => {
						// config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名
						console.log(res);
					});
				}
			});
		},
		methods: {
			handleLaunchFn(e) {
				console.log(e)
			},
			handleErrorFn(e) {
				console.log('fail', e.detail);
			},
		}
	}
</script>

<style scoped>
	image {
		width: 100%;

		opacity: 0.5;
		margin-top: 100rpx;
	}

	.txt_ys {
		padding-top: 20rpx;
		font-size: 40rpx;
		text-align: center;
		color: #1d1d1d;
	}

	.txt_ys text {

		color: #008BFF;
	}

	.tz_but {
		width: 100%;
		height: 50px;

	}
</style>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值