H5跳转小程序点击按钮各种样式注入无法撑开问题

夲木^_^

于 2020-12-30 17:33:40 发布

阅读量1.2k

点赞数

分类专栏： vue 小程序微信文章标签： html 小程序

本文链接：https://blog.youkuaiyun.com/qq_45950523/article/details/111995113

版权

vue 同时被 3 个专栏收录

49 篇文章

订阅专栏

微信

17 篇文章

订阅专栏

小程序

15 篇文章

订阅专栏

博客作者分享了在Vue项目中遇到的微信小程序跳转按钮无法正常显示的问题，尝试了官方文档和多种解决方案未果。最终，作者通过一个原始但有效的方法解决了问题：利用文字撑开按钮以实现覆盖效果。这种方法在生产环境中得到了验证。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 <div class="launch_btn_2">
            <wx-open-launch-weapp
              username="gh_xxxxxx"
              :path="path"
            >
              <script type="text/wxtag-template">
                <style>.btn {width: 180px; height: 80px;}</style>
                <div class="btn">车险报案车险报案车险报案车险报案车险报案</div>
              </script>
            </wx-open-launch-weapp>
          </div>

  .launch_btn_2 {
    z-index: 10;
    position: absolute;
    right: 0;
    bottom: 0;
    top: 30%;
    left: 0;
    opacity: 0;
    width: 172px;
    height: 90px;
  }

vue 按官方文档，百度各种 https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/staticstorage/jump-miniprogram.html
都无法实现。而且这个按钮也只能在生产环境上验证，真的很吐血。

最后使用一个最原始的办法来实现.啊哈哈，看html 。在里面写多文字，通过文字来撑开按钮，实现覆盖。