此文档面向网页开发者，介绍微信开放标签如何使用及相关注意事项。需要注意的是，微信开放标签有最低的微信版本要求，以及最低的系统版本要求。
- 微信版本要求为：7.0.12及以上(实际测试的时候发现安卓7.0.12版本也展示不了，
有两个vivo7.0.14 订阅按钮都渲染出来了，其中一个点击没反应，打算升级到7.0.15版本) - 系统版本要求为：iOS 10.3及以上、Android 5.0及以上
开发的遇到问题
1、微信webview渲染订阅按钮样式变形问题（占位透明展示覆盖在本身按钮上）
2、样式渲染问题
① 2021年2月份到5月之前的样式写法wx-open-subscribe标签上的样式最好设置不设置高度，width: 100%;overflow: hidden;（这样script标签里面的按钮设置固定高度，宽度100%，如果微信渲染失败的话整个按钮就不占位）这个修改对微信签名失败的按钮渲染有效
.subscribe-btn {
position: absolute;
width: 100%;
overflow: hidden;
}
{this.wx_show_subscribe() && (
<wx-open-subscribe
template={this.state.subscribe_template}
id="subscribe-btn"
class={`subscribe-btn`}
>
<script type="text/wxtag-template">
<div
className="subscribe-btn"
style={{ width: "100%", height: "48px", opacity: "0" }}
>
</div>
</script>
</wx-open-subscribe>
)}
② 但是5月份之后wx-open-subscribe如上设置，有用户反馈点击按钮无反应，经过测试发现，上面的写法对微信签名失败的按钮渲染没有占位，测试发现wx-open-subscribe设置了个颜色样式生效了占全屏，script标签里面的设置成红色的按钮没有展示，按钮外层的wx-open-subscribe标签蓝色的展示一半
按钮外层的wx-open-subscribe标签蓝色的展示一半
但是复现的系统版本和微信版本都是比较高的，所以怀疑两种情况：
- 没有渲染
- 渲染了位置不对感觉这个比较正确，后将script标签里面按钮的样式改成固定高宽，设置尽量比外层嵌套的更高更宽的大小
.subscribe-btn {
position: absolute;
width: 100%;
overflow: hidden;
background: blue;
}
{this.wx_show_subscribe() && (
<wx-open-subscribe template={this.state.subscribe_template} id="subscribe-btn" class={`subscribe-btn`} >
<script type="text/wxtag-template">
<div style={{ width: "500px", height: "48px",background: "red" }} >
</div>
</script>
</wx-open-subscribe>
)}
错误的机型渲染出红色的里面的按钮了，所以猜测某个机型下微信webview渲染的按钮百分比不能展示
错误的机型渲染出红色了
3、一个页面两个订阅按钮最好不用同一个class和style标签，最好差异化，即便两个按钮长一样
一个页面有两个长得一模一样的订阅按钮，我就用了同一个结构，除了id名称一样一个正常展示，另外一个展示去订阅按钮，但是我的文案里面并没有去订阅几个字，wx-open-subscribe标签我用黑色展示，里面的按钮标签我用黄色展示，但是渲染出来是一个绿色的且带有去订阅文案的按钮，这明显不是我的，后来发现，我把class 标签style 等等都做了稍微的区别发现，渲染都正常了，非常鸡肋
61f474a56b549e298bb3ad68758f2c5.jpg
class Choukuan extends Component {
constructor(props) {
super(props)
const subscribe_template = is_dev? [ "xxx-dev-1", "xxx-dev-2", "xxx-dev-3", ] : [ "xxx-pro-1", "xxx-pro-2", "xxx-pro-3", ];
this.state = {
subscribe_template,
}
}
componentDidMount()=>{
if (this.wx_show_subscribe()) {
try {
const btn = document.getElementById("subscribe-btn");
btn.addEventListener("success", this.wx_subscribe_success);
btn.addEventListener("error", this.wx_subscribe_error);
} catch (e) {
console.log('wx_show_subscribe', e)
}
}
if (this.wx_show_subscribe_normal()) {
try {
const btn = document.getElementById("subscribe-btn-normal");
btn.addEventListener("success", this.wx_normal_subscribe_success);
btn.addEventListener("error", this.wx_normal_subscribe_error);
} catch (e) {
console.log('wx_show_subscribe_normal', e)
}
}
}
wx_subscribe_success = (e) => {
const { errMsg, subscribeDetails, errCode } = e.detail;
console.log("success", e, e.detail);
utils.ck_log(`wx-detail-normal-subscribe-success-${errMsg}`);
this.submit()
}
wx_subscribe_error = (e) => {
const { errCode } = e.detail;
console.log("fail", e.detail);
this.submit()
};
wx_normal_subscribe_success = (e) => {
const { errMsg, subscribeDetails, errCode } = e.detail;
console.log("success", e, e.detail);
utils.ck_log(`wx-detail-normal-subscribe-success-${errMsg}`);
this.submit()
}
wx_normal_subscribe_error = (e) => {
const { errCode } = e.detail;
console.log("fail", e.detail);
this.submit()
};
wx_show_subscribe_normal = () => {
return 系统版本ok&& 微信版本ok
}
wx_show_subscribe = () => {
return 系统版本ok&& 微信版本ok
}
render() {
return (<>
{this.wx_show_subscribe() && (
<wx-open-subscribe
template={this.state.subscribe_template}
id="subscribe-btn"
class={`detail_subscribe`}
>
<script type="text/wxtag-template">
<div style={{ width: '500px', height: '400px'}}>订阅1</div>
</script>
</wx-open-subscribe>)}
{this.wx_show_subscribe_normal() && (
<wx-open-subscribe
template={this.state.subscribe_template}
id="subscribe-btn-normal"
class={`detail_subscribe_normal`}
>
<script type="text/wxtag-template">
<p style={{ width: '600px', height: '500px'}}>订阅2</p>
</script>
</wx-open-subscribe>)}
</>)
}
4、监听订阅按钮的事件最好加try catch，否者有的机型会报错`
微信图片_20210510102802.jpg
try catch之后 打印的eeeeeee里面就是错误信息
微信图片_20210510102757.jpg
5、对系统版本和微信版本做校验
