众所周知 用 wx-open-launch-app 微信开放标签提供的此标签可以唤醒APP。
首先 说下这东西的来历背景。这东西还没出来之前,大多数人都是采用 URI Scheme 以及 ios 的universal Link来完成这一需求的,通过URI Scheme/universal Link这种方式,需要在浏览器中打开才行,对应ios来讲universal Link勉强还能接受,但是在Android中就更不用说了,安卓浏览器众多,而且部分浏览器还屏蔽掉了URI Scheme。总的来说 苦 不 堪 言 !!!
废话不多说 直奔主题! 然而出来这个标签之后 发现这个标签用起来非常难受 样式全得堆在标签里面。好家伙!看得直呼 卧槽 无情!
然后跟着标签开发文档 一顿乱撸。用起来大约是下面这个鬼样。。。
<wx-open-launch-app class="launch-follow" @error="callAppError" :appid="OpenAppId" extinfo="extinfo">
<script type="text/wxtag-template">
<style>
.follow {
width: 70px;
height: 30px;
font-size: 12px;
font-weight: 600;
border-radius: 50px;
background: #fbeeee;
color: #cc2725;
z-index: 3;
display: flex;
align-items: center;
justify-content: center;
}
</style>
<span class="follow">关注</span>
</script>
不会吧不会吧 居然还有要把样式写进标签里面的 假如我这样式极其极其复杂怎么办!!!而且要传入动态图片渲染怎么办!!里面还要要写逻辑怎么办!!! 这时候 首先恭喜你 看到我这个文章!直接不用写过多样式完成这道题。 我们可以绕过写复杂的样式,用最简朴平平无奇的方法解决该问题。让我们来解放双手! 写法如下
<div style="position: relative">
<img/>
...各种字 各种花里胡哨
<wx-open-launch-app class="launch-post" @error="callAppError" :appid="OpenAppId" extinfo="extinfo">
<script type="text/wxtag-template">
<style>
.follow {
width: 1000px;
height: 1000px;
}
</style>
<div class="follow"></div>
</script>
</wx-open-launch-app>
</div>
<style>
.launch-post {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
z-index: 4;
overflow: hidden;
}
</style>
给他父盒子来个定位 然后给 wx-open-launch-app 的样式也来一个定位固定在里面 一定要写100%及左右上下为0,然后超出隐藏! 把里面的盒子直接搞个1000px。肯定会超出了但是又会隐藏 哈哈哈哈哈哈哈!然后层级垫高点,怎么样都是点到他!!!
这样就可以蒙蔽他的双眼了 一个字 绝!