H5跳转小程序 (成功案例)

H5跳转小程序 (踩坑记-成功案例)

自我的一段独白 找到这篇文章之前我相信你也踩了不少坑,遇到了不少bug,请认真阅读步骤,带你走出雾霾;项目的需求是H5跳转微信小程序,H5项目是原生的html方法写的,并不是vue、react,在开发之前查阅官方文档等相关资料,在这个过程中还是遇到了不少bug,然后查阅了一些文档,但最终还不是那么详细,结合自己的项目案例,分享经验如下;

文章目录

H5跳转小程序 (踩坑记-成功案例) 一、准备工作 根据官方文档提供的资料,需要准备一下几点方法: 二、流程配置是否正确 先看看官方的文档需求: 三、配置 1. 认证服务号; 2. 绑定JS接口安全域名; 3. 配置IP白名单; 4. 将小程序和H5公众号进行关联; 5. 需要跳转的小程序页面path和原始ID (gh_xxxxxx); 6. 引入微信jweixin-1.6.0.js; 以上配置好后,说明我们已经解决的很多不必要出现的bug;下面开始代码分析! 四、代码如何写 1、页面布局代码模块 2、script js模块 3、css 样式 4、献上完整代码 五、bug回馈 开启debug: true后会提示! 总结:

一、准备工作

根据官方文档提供的资料,需要准备一下几点方法:

    认证服务号; 绑定JS接口安全域名; 配置IP白名单; 将小程序和H5公众号进行关联; 需要跳转的小程序页面path和原始ID (gh_xxxxxx); 引入微信jweixin-1.6.0.js;

二、流程配置是否正确

先看看官方的文档需求:

老规矩传送门【开发前必读文档】

老规矩传送门\【微信JS-SDK说明文档】]

三、配置

1. 认证服务号;

指微信公众号,不是订阅号,在做之前一定要检查清楚;

2. 绑定JS接口安全域名;

这里有很多小伙伴找不到入口,入口在微信公众号后台配置,不是小程序后台;

3. 配置IP白名单;

IP白单也是在公众号后台配置:进入公众号》设置与开发》安全中心》找到IP白名单区设置》ok

4. 将小程序和H5公众号进行关联;

微信公众后台链接:https://mp.weixin.qq.com/
关联公众号登录 “公众号管理后台-小程序管理” 完成关联
查看关联公众号在小程序后台配置:进入小程序后台》设置》关联设置》关联的公众号》ok

5. 需要跳转的小程序页面path和原始ID (gh_xxxxxx);

这里跳转的页面可以是任意页面,非tabbar页面,可以大胆尝试;
打开微信小程序后台:版本管理》修改页面路径》页面路径(选填)》ok

原始ID及gh_开头;
打开微信小程序后台:设置》帐号信息》原始ID》ok
代码中的实操方法:【传送门】

6. 引入微信jweixin-1.6.0.js;

微信文档虽然写了一个示例,却不是很详细:

<!DOCTYPE html>
<html >
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content=">
	<title>测试</title>
	// 引入微信jweixin-1.6.0.js
	<script typet="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
</head>
	<body>
			
	</body>
</html>

以上配置好后,说明我们已经解决的很多不必要出现的bug;下面开始代码分析!

四、代码如何写

1、页面布局代码模块(重点)
2、script js模块(重点)
为什么要分两步将,写法很重要,两步敲定实现功能,请看下面:

1、页面布局代码模块

<!DOCTYPE html>
<html >
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content=">
	<title>测试</title>
	<script typet="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
</head>
	<body>
		<!-- 第一部分代码 -->
		<div  >
			<div >
				<img src="xxxxxxxxxxxxxx" alt="">
				<p>旅行的足迹</p>
			</div>
			<div >
				<img src="xxxxxxxxxxxxxxx" alt="">
				<span>小程序</span>
			</div>
			<!--  
				username为小程序的原始id
				path对应的是小程序的链接地址 -->
			<wx-open-launch-weapp 
				 
				username="gh_4bad38c1581f" 
				path="pages/home/home">
				<!-- 这里的script 插槽模版及样式均需要通过<script type="text/wxtag-template"></script>进行包裹。 -->
				<script type="text/wxtag-template">
					<!-- 样式方法 -->
					<style type="text/css">
						.btn-card { display: flex; 
							align-items: center; justify-content: center;
							border-radius: 8px; background-color: #07c160;
							padding: 12px 60px 12px 60px; margin-top: 66%;}
						.btn-card p { color: #fff;font-size: 16px;margin: 0;}
						.btn-card:hover {background-color: #08b65c;}
						.btn-card:active {background-color: #03994c;}
					</style>
					<div ><p >打开小程序</p></div>
			</script>
			</wx-open-launch-weapp>
		</div>
	
		<div  >
			<p >请在手机打开网页链接</p>
			<p></p>
		</div>
	</body>
</html>

pc端显示:

小程序端展示:

2、script js模块

<!-- 为了方便大家能够直接拷贝运行代码,这里用线上jq链接 -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<!-- 微信 jweixin-1.6.0.js -->
<script typet="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<script>
	$(function () {
		// 方便快捷的判断一下端口(是否为小程序端)
		const ua = navigator.userAgent.toLowerCase();
		if (ua.match(/MicroMessenger/i) != "micromessenger") {
			console.log('微信端')
			var containerEl = document.getElementById('public-web')
			containerEl.classList.remove('hidden')
			containerEl.classList.add('public-web')
			$.ajax({
				type: 'post',
				url: ' 自己或公司的url请求 ',
				data: { url: window.location.href},
				dataType: 'json',
				success: function (data) {
					console.log(data);
					if (data.state) {
						wx.config({
						// 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印
						// debug: true, 
						// 必填,公众号的唯一标识
						appId: data.data.appId,
						// 必填,生成签名的时间戳
						timestamp: data.data.timestamp,
						// 必填,生成签名的随机串
						nonceStr: data.data.nonceStr,
						// 必填,签名
						signature: data.data.signature,
						// 必填,需要使用的JS接口列表,且任意填写
						jsApiList: ['scanQRCode'],
						// 可选,需要使用的开放标签列表,wx-open-launch-weapp 指H5跳转小程序 wx-open-launch-app 指H5跳转app
						openTagList: ["wx-open-launch-weapp"],
					});
					// config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中
					wx.ready(function () {
						var btn = document.getElementById('launch-btn');
						// launch 用户点击跳转按钮并对确认弹窗进行操作后触发
						btn.addEventListener('launch', function (e) {
							console.log(e,'success');
						});
						// error 用户点击跳转按钮后出现错误
						btn.addEventListener('error', function (e) {
							console.log(e.detail,'fail');
						});
					});
					wx.error(function (res) {
						console.log(res, 'error');
						// config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名
					});

					wx.error(function (res) {
						console.log(res,'如签名过期导致验证失败');
						// config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。
					});
				}
			}
		})
		} else {
			console.log('非小程序端')
			// 在 pc 上则给提示引导到手机端打开
			var containerEl = document.getElementById('desktop-web-container')
			containerEl.classList.remove('hidden')
			containerEl.classList.add('desktop-web-container')
		}
	});
</script>

3、css 样式

<style>
	body {
		margin: 0;
		padding: 0;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: -100;
		width: 100%;
		height: 100%;
	}
	.wrapper {
		display: flex;
		flex-direction: column;
		-webkit-box-align: center;
		align-items: center;
		height: 100%;
	}
	.wrapper .logo {
		padding-top: 147px;
	}
	.wrapper .logo img {
		width: 64px;
		height: 64px;
	}
	.wrapper .logo p {
		font-size: 17px;
		color: #242627;
		margin: 10px 0 9px;
	}
	.icon-card {
		color: rgba(0, 0, 0, 0.3);
		font-size: 14px;
	}
	.icon-card {
		display: flex;
		align-items: center;
	}
	.icon-card img {
		width: 16px;
		height: 16px;
		padding-right: 7px;
	}
	.desktop-web-container {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.desktop-web-container p {
		position: absolute;
		top: 40%;
	}
	.hidden {
		display: none;
	}
</style>

4、献上完整代码

<!DOCTYPE html>
<html >
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content=">
	<title>测试</title>
	<!-- H5内测工具 -->
	<script src="https://cdn.bootcss.com/vConsole/3.2.0/vconsole.min.js"></script>
	<script>
		//初始化
		let vConsole = new VConsole();
		console.log('测试11');
	</script>
</head>
	<style>
		body {
			margin: 0;
			padding: 0;
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			z-index: -100;
			width: 100%;
			height: 100%;
		}
		.wrapper {
			display: flex;
			flex-direction: column;
			-webkit-box-align: center;
			align-items: center;
			height: 100%;
		}
		.wrapper .logo {
			padding-top: 147px;
		}
		.wrapper .logo img {
			width: 64px;
			height: 64px;
		}
		.wrapper .logo p {
			font-size: 17px;
			color: #242627;
			margin: 10px 0 9px;
		}
		.icon-card {
			color: rgba(0, 0, 0, 0.3);
			font-size: 14px;
		}
		.icon-card {
			display: flex;
			align-items: center;
		}
		.icon-card img {
			width: 16px;
			height: 16px;
			padding-right: 7px;
		}
		.desktop-web-container {
			display: flex;
			flex-direction: column;
			align-items: center;
		}
		.desktop-web-container p {
			position: absolute;
			top: 40%;
		}
		.hidden {
			display: none;
		}
	</style>
	<body>
		<!-- 第一部分代码 -->
		<div  >
			<div >
				<img src="xxxxxxxxxxxxxx" alt="">
				<p>旅行的足迹</p>
			</div>
			<div >
				<img src="xxxxxxxxxxxxxxx" alt="">
				<span>小程序</span>
			</div>
			<!--  
				username为小程序的原始id
				path对应的是小程序的链接地址 -->
			<wx-open-launch-weapp 
				 
				username="gh_4bad38c1581f" 
				path="pages/home/home">
				<!-- 这里的script 插槽模版及样式均需要通过<script type="text/wxtag-template"></script>进行包裹。 -->
				<script type="text/wxtag-template">
					<style type="text/css">
						.btn-card { display: flex; 
							align-items: center; justify-content: center;
							border-radius: 8px; background-color: #07c160;
							padding: 12px 60px 12px 60px; margin-top: 66%;}
						.btn-card p { color: #fff;font-size: 16px;margin: 0;}
						.btn-card:hover {background-color: #08b65c;}
						.btn-card:active {background-color: #03994c;}
					</style>
					<div ><p >打开小程序</p></div>
			</script>
			</wx-open-launch-weapp>
		</div>
	
		<div  >
			<p >请在手机打开网页链接</p>
			<p></p>
		</div>
		<!-- 为了直接拷贝代码能用这里用的是链接jq -->
		<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
		<!-- 微信 jweixin-1.6.0.js -->
		<script typet="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
		<script>
			$(function () {
				// 方便快捷的判断一下端口(是否为小程序端)
				const ua = navigator.userAgent.toLowerCase();
				if (ua.match(/MicroMessenger/i) != "micromessenger") {
					console.log('微信端')
					var containerEl = document.getElementById('public-web')
					containerEl.classList.remove('hidden')
					containerEl.classList.add('public-web')
					$.ajax({
						type: 'post',
						url: ' 自己或公司的url请求 ',
						data: { url: window.location.href},
						dataType: 'json',
						success: function (data) {
							console.log(data);
							if (data.state) {
								wx.config({
									// 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印
									// debug: true, 
									// 必填,公众号的唯一标识
									appId: data.data.appId,
									// 必填,生成签名的时间戳
									timestamp: data.data.timestamp,
									// 必填,生成签名的随机串
									nonceStr: data.data.nonceStr,
									// 必填,签名
									signature: data.data.signature,
									// 必填,需要使用的JS接口列表,且任意填写
									jsApiList: ['scanQRCode'],
									// 可选,需要使用的开放标签列表,wx-open-launch-weapp 指H5跳转小程序 wx-open-launch-app 指H5跳转app
									openTagList: ["wx-open-launch-weapp"],
								});
								// config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中
								wx.ready(function () {
									var btn = document.getElementById('launch-btn');
									// launch 用户点击跳转按钮并对确认弹窗进行操作后触发
									btn.addEventListener('launch', function (e) {
										console.log(e,'success');
									});
									// error 用户点击跳转按钮后出现错误
									btn.addEventListener('error', function (e) {
										console.log(e.detail,'fail');
									});
								});
								wx.error(function (res) {
									console.log(res, 'error');
									// config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名
								});

								wx.error(function (res) {
									console.log(res,'如签名过期导致验证失败');
									// config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。
								});
							}
						}
					})
				} else {
					console.log('浏览器')
					// 在 pc 上则给提示引导到手机端打开
					var containerEl = document.getElementById('desktop-web-container')
					containerEl.classList.remove('hidden')
					containerEl.classList.add('desktop-web-container')
				}
			});
		</script>
	</body>
</html>

五、bug回馈

开启debug: true后会提示!

1、errMsg: “config:invalid signature” 签名错误,需后端提供接口处理!

2、为什么签名出成功后一直提示 errMsg: “invokeMiniProgramAPI:ok”
【a、检查代码抒写格式;b、检查wx-open-launch-weapp;c、wx.config和wx.ready执行顺序】

以上是我在做H5跳转小程序所踩过的坑,走过的路,望大家不要重复踩坑!

总结:

前端路上 | 所知甚少,唯善学。
各位小伙伴有什么疑问,欢迎留言探讨。

来源url
栏目