我爱小程序
h5页面是不能使用开发标签么？为什么引入了开放标签，用手机访问开放标签不显示
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" >
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<input type="hidden" name="timestamp" th:value="${timestamp}">
<input type="hidden" name="nonceStr" th:value="${nonceStr}">
<input type="hidden" name="signature" th:value="${signature}">
<input type="hidden" name="url" th:value="${url}">
</div>
<wx-open-subscribe template="4sqNHIDtwCVvDZol0YsTgg3N-hbni3xVPxcXFYldiDM" id="subscribe-btn">
<script type="text/wxtag-template" slot="style">
<style>
.subscribe-btn {
color: #fff;
background-color: #07c160;
}
</style>
</script>
<script type="text/wxtag-template">
<button class="subscribe-btn">
一次性模版消息订阅
</button>
</script>
<button class="subscribe-btn">
<!-- 一次性模版消息订阅-->
</button>
</wx-open-subscribe>
<button type="button" class="subscribe-btn" onclick="openSubscribe()">
小程序调用
</button>
</body>
<script src="https://unpkg.com/vconsole/dist/vconsole.min.js" type="text/javascript"></script>
<script src="./js/jquery.min.js" type="text/javascript"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<script type="text/javascript">
$(function() {
var timestamp = $("input[name='timestamp']").val();
var nonceStr = $("input[name='nonceStr']").val();
var signature = $("input[name='signature']").val();
var url = $("input[name='url']").val();
wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印
appId: 'wxa021cddd6821cb21', // 必填，公众号的唯一标识
timestamp: timestamp, // 必填，生成签名的时间戳
nonceStr: nonceStr, // 必填，生成签名的随机串
signature: signature,// 必填，签名
jsApiList: ['checkJsApi', 'uploadImage','chooseImage','getNetworkType','updateAppMessageShareData','updateTimelineShareData'], // 必填，需要使用的JS接口列表
openTagList: ['wx-open-subscribe', "wx-open-subscribe-dialog", "wx-open-launch-app",] // 可选，需要使用的开放标签列表，例如['wx-open-launch-app','wx-open-subscribe]
});
var btn = document.getElementById('subscribe-btn');
wx.ready(function () {
console.log("ready");
console.log("btn", btn.length);
btn.addEventListener('success', function (e) {
console.log("123");
console.log('success', e.detail);
});
btn.addEventListener('error',function (e) {
console.log("123");
console.log('fail', e.detail);
});
console.log(68)
btn.addEventListener('WeixinOpenTagsError', function (e) {
console.error("12",e.detail.errMsg,e); // 无法使用开放标签的错误原因，需回退兼容。仅无法使用开放标签，JS-SDK其他功能不受影响
});
// config信息验证后会执行 ready 方法，所有接口调用都必须在 config 接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在 ready 函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在 ready 函数中
});
console.log("74")
btn.addEventListener('WeixinOpenTagsError', function (e) {
console.error("123",e.detail.errMsg,e); // 无法使用开放标签的错误原因，需回退兼容。仅无法使用开放标签，JS-SDK其他功能不受影响
});
wx.error(function (res) {
console.log("error");
// config信息验证失败会执行 error 函数，如签名过期导致验证失败，具体错误信息可以打开 config 的debug模式查看，也可以在返回的 res 参数中查看，对于 SPA 可以在这里更新签名
});
});
function openSubscribe(){
console.log("x123", wx, wx.requestSubscribeMessage);
/*wx.requestSubscribeMessage({
tmplIds: ['TenvU22BA1jCp4YHfYEpRuESXYReQyDuhs4vbdWA99I'],
success (res) {
console.log(res);
},
fail (res) {
console.log('fail',res);
}
})*/
}
var vConsole = new window.VConsole();
</script>
</html>
网友回复
你好，请参考文档：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html#23。
根据用例先自查下。
