H5跳转小程序按钮不显示解决办法

最近做项目需要h5跳转到小程序，就去查微信开发文档，发现有这方面的说明（点击查看微信开发文档说明），但是在开发过程中总是有各种各样的问题

一、前期准备

1. 已认证的服务号
2. 绑定js安全域名
3. 将服务号和要跳转的小程序绑定
4. 页面中引入jweixin-1.6.0.js

这些都已经准备完毕之后就可以进行开发了

二、代码实现

我是把点击跳转小程序的按钮放到一个弹窗中，点击页面banner的时候才显示这个弹窗，部分代码如下：

<div class="newst_banner">
		<h2 class="newst_title">活动板块</h2>
		<h4 class="newst_entitle">-active plate-</h4>
		<div class="newstb_img" onclick="$('#quick_tipsbanner).show()">
			<img src="xxxx">
		</div>
</div>
<div class="quick_tips" id="quick_tipsbanner" style="display: none;" >
	<div class="qt_content">
		<div class="tips_img">
			<img src="xxxx">
		</div>
		<h2>温馨提示</h2>
		<p>
			1.xxx <br>
			2.xxx<br>
			3.xxx。<br>
			4.xxx<br>
			境外商品不支持无理由退换货。如有商品质量问题，请您在商品签收后48小时内尽早联系客服。
		</p>
		<wx-open-launch-weapp id="launch-btn" username="公众号配置中小程序原始ID" path="pages/home/home?memberId=xxx"> 
			<template>
			  <button class="btn"  style="font-weight: bold;display: block; font-size: 24px;color: #797979;height: 80px;line-height: 80px;margin-right: 20px;background-color: #fff;text-align: center;margin: 0 auto;margin-top: 40px;border-radius: 10px;border:0">查看订单 ></button>
			</template>
		</wx-open-launch-weapp>
	</div>
</div>
<script>
 	wx.config({
	  debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印
	  appId: '', // 必填，公众号的唯一标识
	  timestamp: '', // 必填，生成签名的时间戳
	  nonceStr: '', // 必填，生成签名的随机串
	  signature: '',// 必填，签名
	  jsApiList: [ "checkJsApi","previewImage"], // 必填，需要使用的JS接口列表
	  openTagList: ['wx-open-launch-weapp'] // 可选，需要使用的开放标签列表，例如['wx-open-launch-app']
	});
	
	var btn = document.getElementById('launch-btn');
	btn.addEventListener('launch', function (e) {
		alert('success');
	});
	btn.addEventListener('error', function (e) {
		alert('fail', e.detail);
	});
	
</script>

然后我发现这个点击跳转的按钮时而显示时而不显示，调试发现config配置都是ok的，也没什么问题。最后！！！发现是wx-open-launch-weapp这个东西渲染速度过慢，没渲染上我这个div。

之后就想办法使用wx.ready先把wx-open-launch-weapp渲染到弹窗上之后再隐藏弹窗，代码如下：

<div class="newst_banner">
		<h2 class="newst_title">活动板块</h2>
		<h4 class="newst_entitle">-active plate-</h4>
		<div class="newstb_img" onclick="$('#quick_tipsbanner).show()">
			<img src="xxxx">
		</div>
</div>
<div class="quick_tips" id="quick_tipsbanner"  >
	<div class="qt_content">
		<div class="tips_img">
			<img src="xxxx">
		</div>
		<h2>温馨提示</h2>
		<p>
			1.xxx <br>
			2.xxx<br>
			3.xxx。<br>
			4.xxx<br>
			境外商品不支持无理由退换货。如有商品质量问题，请您在商品签收后48小时内尽早联系客服。
		</p>
		<wx-open-launch-weapp id="launch-btn" username="公众号配置中小程序原始ID" path="pages/home/home?memberId=xxx"> 
			<template>
			  <button class="btn"  style="font-weight: bold;display: block; font-size: 24px;color: #797979;height: 80px;line-height: 80px;margin-right: 20px;background-color: #fff;text-align: center;margin: 0 auto;margin-top: 40px;border-radius: 10px;border:0">查看订单 ></button>
			</template>
		</wx-open-launch-weapp>
	</div>
</div>
<script>
 	wx.config({
	  debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印
	  appId: '', // 必填，公众号的唯一标识
	  timestamp: '', // 必填，生成签名的时间戳
	  nonceStr: '', // 必填，生成签名的随机串
	  signature: '',// 必填，签名
	  jsApiList: [ "checkJsApi","previewImage"], // 必填，需要使用的JS接口列表
	  openTagList: ['wx-open-launch-weapp'] // 可选，需要使用的开放标签列表，例如['wx-open-launch-app']
	});
  

  wx.ready(function(){
		//加载微信的时候执行  此时弹窗还未关闭
		success: function (res) {
			//加载完之后关闭弹窗
            $('#quick_tipsbanner').hide();
		}

    }); 
	
	var btn = document.getElementById('launch-btn');
	btn.addEventListener('launch', function (e) {
		alert('success');
	});
	btn.addEventListener('error', function (e) {
		alert('fail', e.detail);
	});
	
</script>

谁知道显示按钮直接没了，也就是还没有渲染上。

最后又想了个办法，为什么不直接写在js中，在js中创建标签进行动态渲染呢？说干就干，代码如下：

<div class="newst_banner">
		<h2 class="newst_title">活动板块</h2>
		<h4 class="newst_entitle">-active plate-</h4>
		<div class="newstb_img" onclick="loadbtn();">
			<img src="xxxx">
		</div>
</div>
<div class="quick_tips" id="quick_tipsbanner" style="display: none;" >
	<div class="qt_content">
		<div class="tips_img">
			<img src="xxxx">
		</div>
		<h2>温馨提示</h2>
		<p>
			1.xxx <br>
			2.xxx<br>
			3.xxx。<br>
			4.xxx<br>
			境外商品不支持无理由退换货。如有商品质量问题，请您在商品签收后48小时内尽早联系客服。
		</p>
		<div id="xcxbtn"></div>
	</div>
</div>
<script>
 	wx.config({
	  debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印
	  appId: '', // 必填，公众号的唯一标识
	  timestamp: '', // 必填，生成签名的时间戳
	  nonceStr: '', // 必填，生成签名的随机串
	  signature: '',// 必填，签名
	  jsApiList: [ "checkJsApi","previewImage"], // 必填，需要使用的JS接口列表
	  openTagList: ['wx-open-launch-weapp'] // 可选，需要使用的开放标签列表，例如['wx-open-launch-app']
	});
	
	var btn = document.getElementById('launch-btn');
	btn.addEventListener('launch', function (e) {
		alert('success');
	});
	btn.addEventListener('error', function (e) {
		alert('fail', e.detail);
	});
    function loadbtn(){
		$('#quick_tipsbanner').show();
		// 动态渲染微信开发标签 跳转小程序
		let script = document.createElement('script')  
		script.type = 'text/wxtag-template'
		script.text = `<button class="btn" style="display: block;width: 320px;height: 80px;color: #fff;background-color: #b091e5;text-align: center;line-height: 80px;font-size: 28px;font-weight: bold;margin: 0 auto;margin-top: 40px;border-radius: 10px;border:0">我已知晓</button>` 
		let html = `<wx-open-launch-weapp  id="launch-btn"  username="公众号配置中小程序原始ID" path="pages/home/home?memberId=xxx">${script.outerHTML}</wx-open-launch-weapp>`
		$('#xcxbtn').html(html);

	}
	
</script>

也就是说点击banner时先让弹窗显示再进行渲染也是ok的。h5跳转小程序就实现啦~

三、总结

如果发现跳转小程序按钮不显示，那么要先检查config是否错误，如果所有都没错，可能就是wx-open-launch-weapp这个东西没渲染上（也有可能是button按钮样式设置的在页面上看不出来，这个调整css就行），可以根据代码调整渲染的时间点，比如我的是点击banner的弹窗显示的时候才渲染。总之功能实现了就行

希望这篇文章能够帮到你们

今天又是学习到知识的一天呐~

各位大佬有更好的方法可以评论区交流讨论