H5网页跳转微信小程序-nodeJs

学习分享2年前 (2022)更新 bestcyt

991 0 0

注

微信中打开网页，可跳转微信小程序操作。

前期准备

目前仅支持在微信内打开H5页面；
已认证的服务号，服务号绑定“JS接口安全域名”下的网页可使用此标签跳转任意合法合规的小程序；
已认证的非个人主体的小程序，使用小程序云开发的静态网页托管绑定的域名下的网页，可以使用此标签跳转任意合法合规的小程序。

绑定安全域名：

登录微信公众平台进入【公众号设置】–>【功能设置】里设置好 “js接口安全域名”。

IP白名单设置：

登录微信公众平台进入【开发】–>【基本配置】，这里填写你服务器的IP。

前端代码

<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title></title>
		<script type="text/javascript" src="https://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
		<script type="text/javascript" src="https://bestcyt.com/cyttest/sha.js"></script>
		<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
		<style>
			#app {
				width: 300px;
				height: 18.75rem;
				border: 2px solid red;
			}
			#launch-btn {
				z-index: 10;
				position: absolute;
				top: 0;
				right: 0;
				left: 0;
				bottom: 0;
				background: transparent;
				border: 2px solid blue;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<wx-open-launch-weapp id="launch-btn" username="gh_c104b771629e" :path="pages/index/index.html">
				<template>
					<style>
						.btn {
							padding: 12px;
							width: 100px;
							height: 100px;
						}
					</style>
					<div style="text-align: center;align-items: center;margin: 8rem">
						<button class="btn">打开小程序</button>
					</div>
				</template>
			</wx-open-launch-weapp>
		</div>
		<script type="text/javascript">
			let href = location.href.split('#')[0];
			// href = encodeURIComponent(href.split('?')[0])
			// 随机字符串方法
			function randomString() {
				let len = 16;
				let chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';
				let maxPos = chars.length;
				let character = '';
				for (let i = 0; i < len; i++) {
					character += chars.charAt(Math.floor(Math.random() * maxPos))
				}
				return character;
			}
			let timestamp = '';    // 时间戳
			$.ajax({
				url: "https://www.xxxxxxxt.com/api/user/wxLoginFWH",
				type: "get",
				dataType: "json",
				success: function(data) {
					console.log('返回数据1---token---', data)
					if (data.code === 200) {
						let token = {
							access_token: data.data.access_token
						}
						$.ajax({
							url: "https://www.xxxxxx.com/api/user/wxTicket",
							type: "post",
							data: token,
							dataType: "json",
							success: function(dataToken) {
								if (dataToken.code === 200) {
									timestamp = Math.round(new Date() / 1000);
									let noncestr = randomString();
									let ticket = dataToken.data.ticket;
									let signature =
										`jsapi_ticket=${ticket}&noncestr=${noncestr}&timestamp=${timestamp}&url=${href}`;
									wx.config({
										debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
										appId: 'wx287004cb8ad1a4f6', // 必填，公众号的唯一标识
										timestamp, // 必填，生成签名的时间戳
										nonceStr: noncestr, // 必填，生成签名的随机串
										signature: hex_sha1(signature),// 必填，签名
										jsApiList: ['onMenuShareTimeline', 'scanQRCode','chooseImage', 'previewImage','openLocation'],// 必填，需要使用的JS接口列表,
										openTagList: ['wx-open-launch-weapp','wx-open-launch-app']
									});
									wx.ready(function() {
										// alert('接口配置成功');
										$(".btn").trigger("click")
										$("#launch-btn").trigger("click")
									});
									var btn = document.getElementById('launch-btn');
									btn.addEventListener('launch', function(e) {
										alert('添加事件success');
									});
									btn.addEventListener('error', function(e) {
										console.log('fail', e.detail);
									});
									$(".btn").trigger("click")
									$("#btn").trigger("click")
								}
							}
						})
					}
				}
			})
		</script>
	</body>
</html>