h5页面按钮跳转小程序

发表时间：2020-11-3

发布人：葵宇科技

浏览次数：49

h5页面按钮跳转小程序

参考文档
- 步骤一：绑定域名
- 步骤二：引入JS文件
- 步骤三：配置config信息

本人前端菜鸟，这个功能难了我好几天，经过请教各方大佬和查看无数文档最终写出来了，现在把自己的步骤总结出来供大家观看指导。

参考文档

链接: https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html.

步骤一：绑定域名

登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
注意：是“公众号设置”，而不是“小程序设置”。

步骤二：引入JS文件

在要跳转小程序的页面中引入JS文件：http://res.wx.qq.com/open/js/jweixin-1.6.0.js （支持https）

步骤三：配置config信息

我在这一步卡了好久，刚开始不了解签名，也不会生成，所以这一步写的详细一些。
参考文档: https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#62.

获取access_token
参考文档: https://developers.weixin.qq.com/doc/offiaccount/Basic_Information/Get_access_token.html.
注意： 其中appid和secret是公众号的appid和secret，调用接口获取到access_token。
获取jsapi_ticket
将上一步获取到的access_token作为参数调用接口get方式获取jsapi_ticket。
接口路径： https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi
生成签名
签名生成规则如下：参与签名的字段包括noncestr（随机字符串）, 有效的jsapi_ticket, timestamp（时间戳）, url（当前网页的URL，不包含#及其后面部分）。对所有待签名参数按照字段名的ASCII 码从小到大排序（字典序）后，使用URL键值对的格式（即key1=value1&key2=value2…）拼接成字符串string1。这里需要注意的是所有参数名均为小写字符。对string1作sha1加密，字段名和字段值都采用原始值，不进行URL 转义。
以下是我用java写的后台生成签名的代码。

@Override
	public Result<Object> getWxConfigInfo(String currentPageUrl) {
		Result<Object> result = new Result<Object>();
		HashMap<String, Object> header = null;
		HashMap<String, Object> paramMap = new HashMap<String, Object>();
		paramMap.put("grant_type", "client_credential"); //固定值
		paramMap.put("appid", ""); //自己公众号的appid
		paramMap.put("secret", ""); //自己公众号的secret
		String url = "https://api.weixin.qq.com/cgi-bin/token"; //获取access_token调用的接口
		String httpGet = httpClientUtils.httpGet(url, paramMap, header);
		// 字符串转换为JSON
		JSONObject jsonObject = JSON.parseObject(httpGet); // result数据源：JSON格式字符串
		String accessToken = jsonObject.getString("access_token");
		paramMap.put("access_token", accessToken);
		paramMap.put("type", "jsapi");
		url = "https://api.weixin.qq.com/cgi-bin/ticket/getticket"; //获取jsapi_ticket调用的接口
		httpGet = httpClientUtils.httpGet(url, paramMap, header);
		// 字符串转换为JSON
		jsonObject = JSON.parseObject(httpGet); // result数据源：JSON格式字符串
		logger.info(httpGet);
		// 获取值
		String ticket = jsonObject.getString("ticket");
		if (ticket == null || "".equals(ticket)) {
			result.setCode(4);
			result.setMessage(httpGet);
			return result;
		}
		Map<String, String> data = new HashMap<String, String>();
		String noncestr = UUID.randomUUID().toString().replace("-", "").substring(0, 16); //随机串
		String timestamp = String.valueOf(System.currentTimeMillis() / 1000); //时间戳
		data.put("noncestr", noncestr);
		data.put("jsapi_ticket", ticket);
		data.put("timestamp", timestamp);
		data.put("url", currentPageUrl); //调用接口的页面路径，从前端传到后端的
		String str = "jsapi_ticket=" + ticket + "&noncestr=" + noncestr + "&timestamp=" + timestamp + "&url="
				+ currentPageUrl; //将参数排序并拼接字符串
		// 生成签名
		String signature = sha1(str); //将字符串进行sha1加密
		data.put("signature", signature);
		data.put("appId", ""); 自己公众号的appid
		data.remove("jsapi_ticket");
		result.setData(data);
		return result;
	}

	/**
	 * 生成签名.
	 *
	 * @param decript 待签名数据
	 * @return 签名
	 */
	public static String sha1(String decript) {
		try {
			MessageDigest digest = java.security.MessageDigest.getInstance("SHA-1");
			digest.update(decript.getBytes());
			byte messageDigest[] = digest.digest();
			// Create Hex String
			StringBuffer hexString = new StringBuffer();
			// 字节数组转换为 十六进制 数
			for (int i = 0; i < messageDigest.length; i++) {
				String shaHex = Integer.toHexString(messageDigest[i] & 0xFF);
				if (shaHex.length() < 2) {
					hexString.append(0);
				}
				hexString.append(shaHex);
			}
			return hexString.toString();

		} catch (NoSuchAlgorithmException e) {
			e.printStackTrace();
		}
		return "";
	}

注意事项：

签名用的noncestr和timestamp必须与wx.config中的nonceStr和timestamp相同。
签名用的url必须是调用JS接口页面的完整URL。
出于安全考虑，开发者必须在服务器端实现签名的逻辑。

如出现invalid signature 等错误详见步骤三中第一个参考文档里的附录5常见错误及解决办法。

这样config需要的配置信息就得到了。下面是在前段取数据的代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js">
	</script>
	<script src="js/jquery-2.1.4.js"></script>
	<script type="text/javascript">
		$(function() {
			$.post("后端要调用的接口路径", {
					currentPageUrl: window.location.href //当前页面路径
				},
				function(res) {
					console.log(res);
					wx.config({
						debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。最终弹出{"errMsg":"config:ok"}表明配置成功，可以将此参数改为false
						appId: res.data.appId, // 必填，公众号的唯一标识
						timestamp: res.data.timestamp, // 必填，生成签名的时间戳
						nonceStr: res.data.noncestr, // 必填，生成签名的随机串
						signature: res.data.signature, // 必填，签名
						jsApiList: ['updateAppMessageShareData'], // 必填，需要使用的JS接口列表。这个参数我没看懂，所以瞎填了一个
						openTagList: ['wx-open-launch-weapp'] // 可选，跳转小程序使用['wx-open-launch-weapp']，跳转APP使用['wx-open-launch-app']
					});
				});
				wx.ready(function () {
					console.log("success");
				});
				wx.error(function (res) {
					console.log("error");
				});
		});
	</script>
	<body>
	//username 所需跳转的小程序原始id，即小程序对应的以gh_开头的id，path 所需跳转的小程序内页面路径及参数，必须带.html
			<wx-open-launch-weapp id="launch-btn" username="gh_*******" path="pages/index/index.html">
				<template>
					<style>
						.btn {
							padding: 12px
						}
					</style>
						<button class="btn">打开小程序</button>
				</template>
			</wx-open-launch-weapp>
		<script>
			var btn = document.getElementById('launch-btn');
			btn.addEventListener('launch', function(e) {
				console.log('success');
			});
			btn.addEventListener('error', function(e) {
				console.log('fail', e.detail);
			});
		</script>
	</body>
</html>

这样就完成跳转小程序的代码了，可以开始测试了。
注意： 在开发工具中按钮不会显示，因为template默认是display:none的，必须在真机测试时按钮才会显示。
注意： 如果页面中除了跳转按钮还有其他按钮或者背景图片什么的，这些标签要写在开放标签wx-open-launch-weapp外，否则所有的功能都会是打开小程序