uniapp开发微信公众号H5页面，跳转小程序及跳转过程中全部踩坑点记录

wangjiecsdn

已于 2025-02-27 16:39:09 修改

阅读量1.4k

点赞数 9

分类专栏： uni-app 小程序 vue 文章标签： uni-app 微信小程序

于 2025-01-07 10:39:53 首次发布

本文链接：https://blog.csdn.net/wangjiecsdn/article/details/144965258

版权

vue 同时被 3 个专栏收录

8 篇文章

订阅专栏

uni-app

4 篇文章

订阅专栏

小程序

3 篇文章

订阅专栏

uniapp开发微信公众号H5页面，跳转小程序及跳转过程中全部踩坑点记录。openTagList 没有返回 wx-open-launch-weapp

实现效果
实现方案(很简单)
实现原理
- 注意点
踩坑点

实现效果

老规矩，先放实现效果图

在这里插入图片描述

实现方案(很简单)

npm install weixin-js-sdk --save

<template>
	<view>
		<view v-show="showOpenWeapp">
			<wx-open-launch-weapp 
			id="launch-btn" 
			ref="launch_btn" 
			username="gh_79xxxxxxxxx"   要跳转的小程序username
			path="">
				<template>
					<script type="text/wxtag-template">
						<style>.btn { display:block;
								  border:none;
								  width:100%;
								  height:50px;
								  color:#ffffff;
								  font-weight:bold;
								  background-color:#07c261;
								  margin: 0 auto;}
						</style>
				        <button class="btn">去跳转</button>
				    </script>
				</template>
			</wx-open-launch-weapp>
		</view>
	</view>
</template>

<script>
	import jweixin from 'weixin-js-sdk';
	export default {
		data() {
			return {
				showOpenWeapp: false,
			};
		},
		mounted() {
			this.init();
		},
		methods: {
			init(info) {
					//初始化微信jdk
				jweixin.config({
					debug: false,
					appId: "XXXXXXXXX", // 找后端
					timestamp: "XXXXXXXXX", // 找后端
					nonceStr: "XXXXXXXXX", // 找后端
					signature: "XXXXXXXXX", // 找后端
					jsApiList: ['checkJsApi',
						        'openLocation',
						        'getLocation',
						        'closeWindow',
						        'scanQRCode',
						        'chooseWXPay',
						        'chooseImage',
						        'uploadImage',
						        'previewImage',
						        'getLocalImgData'
					],
                    openTagList: ['wx-open-launch-weapp'] // 跳转必要的参数，需要使用的开放标签列表，例如['wx-open-launch-app']
				})
						// 监听结果
				jweixin.error((err) => {
					console.error('微信 JSSDK 初始化失败', err);
				});
				jweixin.ready((res) => {
			 		console.log('微信 JSSDK 初始化成功'，res)
			 		this.accredit();
				})
			},
			accredit() {
				let data = {
					orderNo: this.info.orderNo
				}
				authorize(data).then((res) => {
					console.log(res, "res")
						//获取跳转链接
						this.toUrl = res.data.data.linkUrl
						console.log(this.toUrl, 'this.toUrl')
						this.$nextTick(() => {
							let btn = document.getElementById('launch-btn');
							console.log(btn, "btnbtnbtn")
							console.log(this.$refs.launch_btn, "$refs$refs$refs$refs$refs")
							//赋值跳转链接
							btn.setAttribute("path", this.toUrl);
							this.showOpenWeapp = true;
							btn.addEventListener('launch', function(e) {
								console.log('success');
							});
							btn.addEventListener('error', function(e) {
								console.log('fail', e.detail);
							});
						})
				})
			}
		},
	}
</script>

实现原理

1、毋容置疑第一步肯定是装微信的SDK
2、初始化SDK
3、配置SDK开放标签也就是openTagList: [‘wx-open-launch-weapp’]
微信官方文档: https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html#21

注意点

截止到目前，其实你的跳转功能已经全部完成了。
不论你是vue建立的h5页面，还是uni创建的微信公众H5，用的都是这一套开放标签。
如果跳转不成功，更多精彩内容，细细往后看一步一步踩坑逻辑

踩坑点

一、本地启动了项目，但是为啥就报JSSDK初始化失败

在这里插入图片描述

答：升级到测试环境去看。本地为啥看不了，I don’t know

二、打包到测试环境，还是报SDK初始化失败

在这里插入图片描述

答：签名生成有问题，也就是初始化sdk的时候jweixin.config 后端给的签名那些参数不对，请求后端一起帮忙查看，以下四个参数
appId: “XXXXXXXXX”, // 找后端
timestamp: “XXXXXXXXX”, // 找后端
nonceStr: “XXXXXXXXX”, // 找后端
signature: “XXXXXXXXX”, // 找后端
vConsole 可以让你真机看到打印效果
vConsole Git地址: https://gitee.com/Tencent/vConsole