vue跳转微信小程序遇到的坑

官方参考https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html#21

vue项目-h5跳转小程序 - 简书

遇到的问题：在PC端不显示样式，手机端可以，但是手机端样式发生问题，在<wx-open-launch-weapp>标签中写的样式在手机端失效问题

解决方案，在外面标签写按钮样式(跳转小程序的按钮)，然后将微信标签有效部分定位到样式上

代码：

<div style="position:relative;">
              <img class="imgStyle" :index="index"  :src="item.imgUrl"/>
              <wx-open-launch-weapp
                :username="item.id"
                :path="item.url + $route.query.openid"
                class="program-wraper"
              >
                <!-- <img class="imgStyle" :index="index"  :src="item.imgUrl"/> -->
              <script type="text/wxtag-template">
                <div style='position: absolute;top: 0;left: 0;width:20rem;height:10rem;'></div>
              </script>
              </wx-open-launch-weapp>
            </div>




css：


.program-wraper {
  position: absolute;
  top: 0;
  left: 0;
  // border: 1px solid red;
  display: block;
  width: 3.3rem;
  height: 1.8rem;
  // z-index: 999;
  border-radius: 0.3rem 0.3rem 0 0;
  /* margin: 0.16rem auto 0; */
  overflow: hidden;
}

总结：小程序标签太坑了，尽量不要在里面改，能在外面就在外面