评论

微信开放标签 wx-open-launch-app 样式设置技巧

微信开放标签 wx-open-launch-app 样式设置技巧,便于复杂样式的编写

微信7.0.12开始,增加了 wx-open-launch-app标签,用于打开App,感觉又高大上了。

前期相关配置需严格对照文档,戳 微信内网页跳转App功能开发标签说明

按照官方demo加各种配置踩坑,终于弹出了唤起App的弹窗以及打开了App,不容易啊~,现在要开始真正的写需求了

对照设计稿,有一个button,带背景色和圆角,点击要唤起App,按照文档的方式,样式写在了 template中的style里,样式还算简单,终于撸出来了,但标签内样式无法使用vw(这次妥协下,就不适配了)

后面又来了个需求,是个复杂的列表,需求点击每个item都是唤起App操作,一看这个,想着等于要在这个标签内完成原生的样式,而且还有数据的渲染,想想都可怕(React/Vue都出来多少年了~)。想了下,干脆用absolute定位,将内部空元素覆盖在外面不就可以了,直接开干,但最后悲剧了,没有任何效果,在社区一搜发现样式不能设置position

休息下,重点马上到来~~

试来试去发现 wx-open-launch-app这个标签本身是可以加样式的,那还等什么,直接设置个postition: absolute,然后外面样式该怎么写就怎么写,外层设置个position: relative就好,template内部样式就放一个空div,设置width:100%, height: 100%,见证奇迹的时刻到了

你以为这样就结束了,但打开发现内部根本没有高度,因此必须设置真实高度,代码大致如下(React)

export const getWxOpenAppHtml = (extinfo: string, height: number) => {
  const id = 'launch-btn' + getRandomId();
  return {
    id,
    html: `
      <wx-open-launch-app
        id=${id}
        style="position:absolute;top:0;left:0;right:0;bottom:0;"
        extinfo=${extinfo}
        appid="appid"
        >
        <template>
          <style>
            .wx-btn{
              width:100%;
              height:${getRealSize(height, isPad)}px;
            }
          </style>
          <div class="wx-btn"></div>
        </template>
      </wx-open-launch-app>
    `,
  };
};

<div className="open-app-btn">
  <Button className="btn">打开APP</Button>
  <div
    onClick={() => {
      openAppError(); // 用于处理标签未生效的情况
    }}
    dangerouslySetInnerHTML={{ __html: openBtnAppHtml }}
  ></div>
</div>

上面的getRealSize我这边主要是为了处理传入的高度,并将其按vw的形式进行适配,返回适配后的px

总结

  • 配置需严格按照文档,wx.config调用时,jsApiList必须传入至少一项Api,不能只传openTagList
  • 外部样式无法影响标签内样式,因为template下生成了document-fragment单独的doc,样式已于外界隔离
  • template样式无法使用position
  • 标签本身可以设置样式,因此对其设置absolute,外部按正常方式写,只是样式多一个relative即可
  • 内部高度无法使用百分比,需要传入真实高度,因此不适用不知道外部高度的场景
  • 弹窗唤起后,不报错的情况下,点击允许和取消都会进入launch事件,无法区分,见 https://developers.weixin.qq.com/community/develop/doc/000a0e72ba07207ffd9a115025b400
最后一次编辑于  2020-07-29  
点赞 8
收藏
评论

10 个评论

  • Admin²⁰²¹
    Admin²⁰²¹
    2020-08-02

    这个不错。干货满满,适合新手,必须点赞。

    2020-08-02
    赞同 3
    回复
  • 万幸得以相识
    万幸得以相识
    2020-11-03

    我他妈就没看懂这写的啥玩意

    2020-11-03
    赞同 2
    回复
  • 李达康
    李达康
    05-07

    wx-open-launch-app 标签可以加上 overflow: hidden; 里面的div写个无限大的宽度和高度可以解决自适应。

    05-07
    赞同
    回复
  • 彭世瑜
    彭世瑜
    03-18

    完美解决,实现原理就是把wx-open-launch-app放在元素上面,感觉是点击元素,实际点击的是wx-open-launch-app

    03-18
    赞同
    回复
  • 秀才
    秀才
    01-27

    Class 管用吗

    01-27
    赞同
    回复 2
    • 猛
      01-30
      哪的class,外部的是无法影响到标签内的class样式的
      01-30
      回复
    • 秀才
      秀才
      02-03回复
      好的谢谢,在template加个style标签就好了
      02-03
      回复
  • Yolo
    Yolo
    01-08
    思路好棒,简单多了,只需要维护一份按钮样式
    
    01-08
    赞同
    回复
  • LauHing[666]
    LauHing[666]
    2020-12-17

    66666

    2020-12-17
    赞同
    回复
  • 每角弯
    每角弯
    2020-12-15
    • 您好,我想问下 您的总结中的第二条:外部样式无法影响标签内样式,因为template下生成了document-fragment单独的doc,样式已于外界隔离 是什么意思,没太明白?可不可以解释一下! 因为我现在就是想把开放标签里面的样式提取出来编写,不然在里面太局限了


    2020-12-15
    赞同
    回复 3
    • 猛
      2020-12-17
      因为外部的样式无法影响到内部的样式,就理解为样式完全隔离了
      2020-12-17
      回复
    • 每角弯
      每角弯
      2020-12-17回复
      谢谢你!   我目前就想把这个开放标签给封装起来,哪里需要使用哪里调用,  但现在就只能一种样式,父级不能给他设置样式,  感觉很不智能呀
      2020-12-17
      回复
    • 猛
      2020-12-18回复每角弯
      样式还是由外部控制
      2020-12-18
      回复
  • 万幸得以相识
    万幸得以相识
    2020-11-03


    2020-11-03
    赞同
    回复
  • 衬衫
    衬衫
    2020-08-07

    m

    2020-08-07
    赞同
    回复
登录 后发表内容