直接说原因：微信开发者工具不能让其显示按钮！ 请部署到服务器，直接使用手机测试！
请部署到服务器，直接使用手机测试！
请部署到服务器，直接使用手机测试！
请部署到服务器，直接使用手机测试！
重要的坑说三遍！
附上demo源码 大家可以直接参考
在开发工具里可以测试签名是否成功，成功后再到手机上测试查看按钮是否显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>跳转小程序</title>
</head>
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<body>
<div>为啥按钮不显示？</div>
<div>
<wx-open-launch-weapp
id="launch-btn"
username="gh_xxxxxxxx"
path="/pages/index/index.html"
>
<template>
<style>
.btn {
padding: 12px;
100%;
height: 50px;
}
</style>
<button class="btn">打开小程序</button>
</template>
</wx-open-launch-weapp>
</div>
<script>
// 封装 ajax
const getSdkPromission= () => {
return new Promise((resolve, reject) => {
var data = "";
var xhr = new XMLHttpRequest();
xhr.withCredentials = false;
xhr.addEventListener("readystatechange", function() {
if (this.readyState === 4) {
resolve(JSON.parse(this.responseText));
}
});
xhr.open(
"GET",
"/wx/sdk?url=" + window.location.href.split("#")[0]
);
xhr.setRequestHeader("Accept", "application/json");
xhr.send(data);
});
};
window.onload = function() {
console.log("onload");
getSdkPromission().then(res => {
const conf = {
appId: "wx124b9xxxxxxxxx74",
debug: true,
nonceStr: res.noncestr,
signature: res.signature,
timestamp: res.timestamp,
jsApiList: ["getLocation"],
openTagList: ["wx-open-launch-weapp"] //必须必须要不调用小程序标签渲染不出来
};
wx.config(conf);
//=== 获取 config 的参数以及签名=== end
wx.ready(function() {
// config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中
console.log("wx ready");
});
wx.error(function(res) {
// config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中
console.log("res", res);
});
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>
微信不讲武德！微信sdk1.6, 签名，脚本加载，我全防出去了，你就让《微信开发工具》 来！骗！来！偷袭！我这个68岁的老同志！这好吗？这不好，我劝这位年轻人好自为之，好好反思，以后不要再犯这样的聪明，小聪明，武林要以和为贵，要讲武德，不要搞窝里斗！