收藏
回答

Vue 构建应用 wx-open-launch-weapp 在安卓设备不显示 是怎么回事?

<wx-open-launch-weapp id="launch-btn" username="xxxxx">
  <script type="text/wxtag-template">
    <style>.btn { padding: 12px; color: #FFF; }</style>
    <button class="btn">miniprogram</button>
  </script>
</wx-open-launch-weapp>



IOS 设备上正常,安卓设备不能显示按钮 !!

在 <script type="text/wxtag-template"> 内使用 style 或者 内联样式,都不能控制图片响应,即 max-width: 100%; 或者 width:100%;

回答关注问题邀请回答
收藏

1 个回答

  • 末子
    末子
    2021-03-22

    我的解决了 !!

    jsApiList: ['chooseImage', 'previewImage'], // 必填必填必填  留空 安卓就不灵
    openTagList: ['wx-open-launch-weapp']
    


    若使用图片元素,通常需要自己根据设备尺寸,计算出图片位置宽度,这里需要动态创建按钮节点,不然不好动态渲染 !!

    <div class="itm" v-html="mpBtnNode"></div>
    
    wx.ready(() => {
      // the.wxReady = true
      // 组装按钮节点
      const rote = 381 / 750 // UI 比例
      const clientWidth = document.body.clientWidth // 客户端宽度
      const btnWidth = rote * clientWidth
      const btnHeight = btnWidth * 163 / 602
      const nodeContent = '<wx-open-launch-weapp id="launch-btn" username="xxxxx">' +
              '<template>' +
              `<img src="yellow.png" width="${btnWidth}" height="${btnHeight}">` +
              '</template>' +
              '</wx-open-launch-weapp>'
      the.mpBtnNode = nodeContent
    })
    


    至于有些同学 IOS 下不灵,安卓正常,建议加上 wx.ready 尝试,据说写不写这个也有讲究 !

    2021-03-22
    有用 1
    回复 1
    • 感谢你曾来过
      感谢你曾来过
      2021-04-16
      vue中使用wx-open-launch-weapp安卓可以正常显示但是ios需要刷新一次才能显示?
      2021-04-16
      回复
登录 后发表内容
问题标签