微信h5服务号订阅通知：wx-open-subscribe

服务号订阅通知：wx-open-subscribe

此文档面向网页开发者，介绍微信开放标签如何使用及相关注意事项。需要注意的是，微信开放标签有最低的微信版本要求，以及最低的系统版本要求。

• 微信版本要求为：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() && (
                    
                      
                    
)}

② 但是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() && (
                    
                      
                    
)}

错误的机型渲染出红色的里面的按钮了，所以猜测某个机型下微信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() && (
                  
                    
                  )}
{this.wx_show_subscribe_normal() && (
                  
                      
                  )}
  )
}

4、监听订阅按钮的事件最好加try catch，否者有的机型会报错`

微信图片_20210510102802.jpg

try catch之后 打印的eeeeeee里面就是错误信息

微信图片_20210510102757.jpg

5、对系统版本和微信版本做校验