公众号H5唤醒app样式最佳写法

472 阅读2分钟

众所周知 用 wx-open-launch-app 微信开放标签提供的此标签可以唤醒APP。 首先 说下这东西的来历背景。这东西还没出来之前,大多数人都是采用 URI Scheme 以及 ios 的universal Link来完成这一需求的,通过URI Scheme/universal Link这种方式,需要在浏览器中打开才行,对应ios来讲universal Link勉强还能接受,但是在Android中就更不用说了,安卓浏览器众多,而且部分浏览器还屏蔽掉了URI Scheme。总的来说 苦 不 堪 言 !!!

68f1ae1c-a843-4986-8061-aa0d0c6bc2f8(1).jpg

废话不多说 直奔主题! 然而出来这个标签之后 发现这个标签用起来非常难受 样式全得堆在标签里面。好家伙!看得直呼 卧槽 无情

然后跟着标签开发文档 一顿乱撸。用起来大约是下面这个鬼样。。。

<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。肯定会超出了但是又会隐藏 哈哈哈哈哈哈哈!然后层级垫高点,怎么样都是点到他!!! 这样就可以蒙蔽他的双眼了 一个字 绝!

58ffb8a9-ae23-443c-9ace-3bc2cb6b0f58(1).gif