H5页面开放标签wx-open-launch-weapp，跳转到小程序

最新推荐文章于 2024-09-18 10:33:13 发布

木小百99

最新推荐文章于 2024-09-18 10:33:13 发布

阅读量384

点赞数

分类专栏：微信开发 H5跳转小程序文章标签： javascript eclipse java spring

本文链接：https://blog.csdn.net/tm7796/article/details/119822100

版权

微信开发同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

H5跳转小程序

1 篇文章 0 订阅

订阅专栏

官方文档

https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html#21

1. 绑定域名

登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。

2. 引入JS文件

http://res.wx.qq.com/open/js/jweixin-1.6.0.js

3. 通过config接口注入权限验证配置并申请所需开放标签

以下是我的源码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-control" content="no-cache">
<meta http-equiv="Cache" content="no-cache">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>我的停车信息</title>

<jsp:include page="include/public_css.jsp"></jsp:include>
<%-- 共用的js文件top --%>
<script src="<%=MAT_HOST %>/public/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="https://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script> 
</head>
<body>
<div>
<wx-open-launch-weapp id="launch-btn" username="gh_518c42c65952" 
path="">
  <script type="text/wxtag-template">
    <style>.btn { padding: 12px }</style>
    <button class="btn">打开小程序</button>
  </script>
</wx-open-launch-weapp> 
</div>

<script type="text/javascript">
init();
function init () {
	var url = window.location.href;
	$.tenetAjax({
		url: "/wx/getWxSign",
		data: {'url':url},
		success: function(data){
			var appId = data.map.appId;
			var timestamp = data.map.timestamp;
			var nonceStr = data.map.nonceStr;
			var signature = data.map.signature;
			getWx(appId, timestamp, nonceStr, signature);
			
			var path= "pages/auth-creditpay/auth-creditpay?mchid=mchid&sub_mchid=mchid&openid=openid&plate_number=粤B888888&plate_color=BLUE&trade_scene=PARKING";
			$("#launch-btn").attr("path",path);
		}
	});
}

function getWx (appId, timestamp, nonceStr, signature) {
	wx.config({
	  debug: false,
      appId: appId,  
      timestamp: timestamp,  
      nonceStr: nonceStr,  
      signature: signature,  
      jsApiList : [ 'chooseImage', 'previewImage' ],
	  openTagList: ['wx-open-launch-weapp']
	})
			
	wx.ready(function () {
	  // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中
	  console.info("ready");
	});
	
	wx.error(function (res) {
		  // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名
	  console.info("error");
		});
}

</script>

</body>
</html>