uniapp项目接入微信订阅

写几个app项目接入微信订阅的注意事项，也是我做的时候踩坑的地方。也适用于接入前端其他微信接入功能。

写几个注意事项

1、采用子绝父相，覆盖在按钮上，点击触发微信订阅

2、只能div元素，<view>不支持

3、长度只使用能px，rpx和百分比不行

4、微信订阅的div元素，在那个生命周期中。mounted阶段拿不到， update和beforeUpdate可以

5、vue3中，在template中使用<script>和<style>标签会出错。使用<commponent :is="'script'"/>来解决

<!-- wx订阅 -->  
<view v-if="isWxSubscribe" 
            style="position:absolute;  
            overflow: hidden;  
            width:100%;height:100%;  
            top:0px;bottom:0;  
            left: 22rpx;  
            border-radius: 45rpx;  
            background-color: transparent;">  
    <wx-open-subscribe :template='templateID' id="subscribe-btn">   
    <!-- vue3写法--> 
    <component :is="'script'" type="text/wxtag-template" slot="style">  
        <component :is="'style'" >  
            .subscribe-button {  
            width: 800px;  
            height: 100px;  
            background-color: transparent;  
            }  
        </component>  
    </component>  
    <component :is="'script'" type="text/wxtag-template" >  
        <div class="subscribe-button"> </div>  
    </component>  
    <!-- vue2写法--> 
    <!-- <script type="text/wxtag-template" slot="style">-->  
        <!-- <style>-->  
            <!-- .subscribe-button {-->  
            <!-- width: 800px;-->  
            <!-- height: 100px;-->  
            <!-- background-color: transparent;-->  
            <!-- }-->  
        <!-- </style>-->  
    <!-- </script>-->  
    <!-- <script type="text/wxtag-template">-->  
        <!-- <div class="subscribe-button"> </div>-->  
    <!-- </script>-->  
    </wx-open-subscribe>  
</view>

具体流程可以参考这个博主的文章： zhuanlan.zhihu.com/p/363343839…

做了时候，踩坑找遍全网，这篇文章算是走头到尾，仔仔细细干干净净，讲的最清楚的，喂奶版。