美文网首页
vue中使用wx-open-launch-weapp的一些问题

vue中使用wx-open-launch-weapp的一些问题

作者: RadishHuang | 来源:发表于2021-07-22 15:52 被阅读0次

    在微信的jsdk中可以使用标签来跳转到小程序。使用的是wx-open-launch-weapp,官方文档地址https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html#21

    常见的问题

    • wx-open-launch-weapp不显示
    • wx-open-launch-weapp显示了点击不了

    首先保证签名成功。

    // eslint-disable-next-line no-undef
            wx.config({
              // debug: ctx.rootState.isDebug, // 调试时可开启
              debug: false, // 调试时可开启
              appId: result.data.appid, // <!-- replace -->
              timestamp: result.data.timestamp, // 必填,填任意数字即可
              nonceStr: result.data.noncestr, // 必填,填任意非空字符串即可
              signature: result.data.signature, // 必填,填任意非空字符串即可
              jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData', 'wx-open-launch-weapp'], // 必填,随意一个接口即可 
              openTagList: ['wx-open-launch-weapp', 'wx-open-launch-app'], // 填入打开小程序的开放标签名
            })
            const sharePath = ctx.rootState.domain + '?shareunionid=' + ctx.state.unionId;
            const shareImage = ctx.rootState.imagePath + 'share.jpg';
            const shareTitle = '花式告白暗语';
            const shareDesc =  `${ctx.state.userInfo.nick_name}邀你解密TA的告白暗语`;
    
            // eslint-disable-next-line no-undef
            wx.ready(() => {   //需在用户可能点击分享按钮前就先调用
              // eslint-disable-next-line no-undef
              wx.updateAppMessageShareData({
                title: shareTitle, // 分享标题
                desc: shareDesc, // 分享描述
                link: sharePath, //
                imgUrl: shareImage, // 分享图标
                success: () => {
                  console.log('updateAppMessageShareData success');
                  // 设置成功
                },
                fail: (res)=> {
                  console.log('updateAppMessageShareData fail', res);
                }
              })
              // eslint-disable-next-line no-undef
              wx.updateTimelineShareData({
                title: shareTitle,
                link: sharePath,
                imgUrl: shareImage,
                success: () => {
                  console.log('updateTimelineShareData success');
                },
                fail: (res)=> {
                  console.log('updateAppMessageShareData fail', res);
                }
              })
            });
    

    如果签名成功,在ide上就可以看到


    image.png

    在看如下代码,把标签封装了一个组件,当然可以在进一步暴露一个卡槽出去。有兴趣的朋友可以在基础上做拓展,这边不做更多描述。如果是使用html,原生的js,或者是jQuery,就按照文档上写就好了,没什么太多的难点。 如果是使用vue2.0,官方文档也给出了解决办法。

    <wx-open-launch-weapp
      id="launch-btn"
      username="gh_xxxxxxxx"
      path="pages/home/index?user=123&action=abc"
    >
      <script type="text/wxtag-template">
        <style>.btn { padding: 12px }</style>
        <button class="btn">打开小程序</button>
      </script>
    </wx-open-launch-weapp>
    

    这边重点写下3.0的方式,由于用上面的代码,在3.0中会报错。

    • 在vue3里,script是不可以直接植入template里面的,会报错 VueCompilerError: Tags with side effect (<script> and <style>) are ignored in client component templates. 。解决办法是通过 v-is 进行绕过:使用 <div v-is="'script'" type="text/wxtag-template">以替代<script>。

    • 不管是wx-open-launch-weapp还是里面的组件,都需要做一个绝对定位,把按钮的宽度和高度都撑满,就会导致显示不出来,或者是点击没有效果。

    <template>
      <div class="btn_content">
        <div class="normal_btn buy_info">即刻购买</div>
        <div v-if="isReady && !isMiniPro" class="buy_info">
          <wx-open-launch-weapp
            ref="launch_btn"
            username="gh_8c3cxxxxx"
            path="pages/playHome/playHome?chan_id=2_46&utm_source=mxxxx"
            style="position:absolute;left:0;top:0;width:100%;height:100%;"
          >
            <div v-is="'script'" type="text/wxtag-template">
              <div style="position:absolute;left:0;top:0;width:100%;height:100%;"></div>
            </div>
          </wx-open-launch-weapp>
        </div>
      </div>
    </template>
    
    <script>
    import { computed, reactive, toRefs } from "vue";
    
    import { useStore } from "vuex";
    
    export default {
      name: "rh-open-tag",
      setup() {
        const store = useStore();
        const state = reactive({
          isReady: computed(() => {
            console.log(
              store.state.isWXReady
            );
            return store.state.isWXReady;
          }),
          isMiniPro: computed(() => {
            console.log(
              store.state.isMiniPro
            );
            return store.state.isMiniPro;
          }),
        });
        return {
          ...toRefs(state),
        };
      },
    };
    </script>
    
    
    <style lang="scss" scoped>
    .btn_content {
      position: relative;
      width: 286px;
      height: 74px;
      margin: 0 auto;
      overflow: hidden;
      .buy_info {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        font-size: 40px;
        font-weight: normal;
        margin-bottom: 20px;
      }
    }
    </style>
    

    注意一定要把大小撑满,内置元素也要撑满。如下,wx-open-launch-weapp是orange颜色,内置div是红色,全部用绝对定位撑满。

    image.png image.png

    题外话

    在vue3.0中,如果直接写<wx-open-launch-weapp></wx-open-launch-weapp>会报警告,标签不存在,可以选择忽略这个标签的警告。

    
            config.module.rule('vue').use('vue-loader').tap(options => {
                options.compilerOptions = {
                    ...options.compilerOptions,
                    // 忽略wx-开头的组件,这些是微信的默认组件
                    isCustomElement: tag => tag.startsWith('wx-open')
                }
                return options
            })
    
    image.png

    总结遇到的问题

    • 保证引入的微信sdk是最新的1.6.0。 <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
    • 保证当前域名已经加入公众号的安全域名,否则签名会失效。
    • 保证已经签名成功,并且在IDE上可以看到签名确实是ok。
    • 如果是在2.0下,注意template的使用方式,会和脚手架的template起冲突。
    • 如果是在3.0下,注意script标签是不被允许写在页面上,要通过v-is来指定。
    • 如果显示出来了,但是点击无效,尝试看是否wx-open-launch-weapp有大小。
    • 如果wx-open-launch-weapp,尝试看内置,标签包含内的div是否有大小。
    • 不建议在wx-open-launch-weapp标签内写内容。可以用相对定位来做,wx-open-launch-weapp只是一个浮层,有的时候,就盖在按钮上面。签名或者是还在等待ready的时候,就先不盖在上面。
    • 如上几步基本上能解决显示,以及跳转问题。

    相关文章

      网友评论

          本文标题:vue中使用wx-open-launch-weapp的一些问题

          本文链接:https://www.haomeiwen.com/subject/pezemltx.html