收藏
回答

vue中使用wx-open-launch-weapp?

按照官方文档 https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html 配置后出现如下问题

1、vue中提示组建未注册

2、页面按钮不显示

有踩完坑的吗 分享一下经验

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

11 个回答

  • Alex
    Alex
    2020-07-14

    <view v-html="html"></view>

          setTimeout(function() {

            that.html = '<wx-open-launch-weapp id="launch-btn" username="xxx">\

              <template>\

                <button>小程序跳转</button>\

              </template>\

              </wx-open-launch-weapp>'

          }, 2000)

    我这边出现同样问题,处理了下,得等加载完配置后再载入就可以了

    2020-07-14
    有用 5
    回复 4
    • Night
      Night
      2020-07-27
      太强了,大佬
      2020-07-27
      回复
    • 阿亮
      阿亮
      2020-07-31
      ios端页面分享到朋友圈后,用户点分享链接进来,ios端还是看不到按钮
      2020-07-31
      回复
    • 业
      2020-09-25
      安卓可以  ios不行
      2020-09-25
      回复
    • 去吧皮卡丘
      去吧皮卡丘
      2020-12-02
      亲测,安卓 ios都可用
      2020-12-02
      回复
  • Mr.Busy
    Mr.Busy
    2020-12-14

    亲测可以 https://blog.csdn.net/CherryCola_zjl/article/details/111165702

    2020-12-14
    有用 1
    回复
  • 岳帅
    岳帅
    02-26

    <template>

      <div class="content">

        <img class="logo" src="~assets/images/logo.png" alt="">

        <p class="text">正在打开“花生大学”微信小程序</p>

        <div class="open" @click="isWeixin ? open : ''">打开小程序</div>

        <div class="weapp" v-if="isWeixin" >

          <wx-open-launch-weapp username="gh_2986a360565d" path="/pages/index/index.html">       

            <script type="text/wxtag-template">         

              <style>

                .btn {

                  height: 4000px; !impoartant; 

                  width: 5000px; !important;

                  background-color: #f04146;

                  color: #ffffff;

                }

              </style>

              <div class="btn">跳转小程序</div>      

            </script>     

          </wx-open-launch-weapp> 

        </div>

      </div>

    </template>


    <script>

    export default {

      data() {

        return {

          isWeixin: false,

          wxData: {}

        }

      },

      methods: {

        async wxmini(){

          const res = await fetch('/clawApi/getShareConfig', {

            method: 'POST',

            headers: { 'Content-Type': 'application/json; charset=utf-8' },

            body: JSON.stringify({

              url: window.location.href

            })

          }).then(response => response.json())

            .then(data => {

              return data

            });

          console.log(res)

          this.wxData = res?.data


          const { timestamp, appID, nonceStr, signature } = this.wxData

          wx.config({ // eslint-disable-line

            debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印

            appId: appID, // 必填,公众号的唯一标识

            timestamp, // 必填,生成签名的时间戳

            nonceStr: nonceStr, // 必填,生成签名的随机串

            signature: signature, // 必填,签名

            jsApiList: ['onMenuShareTimeline'], // 必填,需要使用的JS接口列表

            openTagList: ['wx-open-launch-weapp'] // 可选,需要使用的开放标签列表,例如['wx-open-launch-app']

          });

          /* eslint-disable */

          wx.ready(function () {

              console.log('ready')

          });

        }

      },

      mounted() {

        const ua = navigator.userAgent.toLowerCase()

        const isWXWork = ua.match(/wxwork/i) == 'wxwork'

        this.isWeixin = !isWXWork && ua.match(/micromessenger/i) == 'micromessenger'

        if(this.isWeixin) {

          const oScript = document.createElement('script');

          oScript.type = 'text/javascript';

          oScript.src = 'https://res2.wx.qq.com/open/js/jweixin-1.6.0.js';

          oScript.onload = this.wxmini

          document.body.appendChild(oScript);

        }

      },

      head() {

        return {

          script: [

            {

              src: "https://changba.com/njwap/stats/index/entry?id=1212",

              type: "text/javascript",

              charset: "utf-8"

            }

          ]

        }

      }

    }

    </script>


    <style lang="scss" scoped root-value="37.5">

    .content {

      width: 375px;

      height: 100vh;

      margin: 0 auto;

      overflow: hidden;

      font-family: PingFangSC-Regular;

      display: flex;

      flex-direction: column;

      justify-content: center;

      align-items: center;

      position: relative;

    }


    .logo {

      width: 150px;

      height: 150px;

      margin-top: -50px;

    }


    .text {

      width: 100%;

      font-size: 20px;

      text-align: center;

    }


    .open {

      width: 200px;

      height: 50px;

      background-color: #f04146;

      margin-top: 30px;

      border-radius: 30px;

      color: #fff;

      font-size: 18px;

      display: flex;

      justify-content: center;

      align-items: center;

    }


    .weapp {

      position: fixed;

      top: 0;

      bottom: 0;

      left: 0;

      right: 0;

      z-index: 100000;

      font-size: 100px;

      overflow: hidden;

      opacity: 0;

    }

    </style>

    02-26
    有用
    回复
  • 盈盈荷瓣大脐橙
    盈盈荷瓣大脐橙
    2020-10-30

    请问是必须要在微信浏览器才能用是吧?其他浏览器或者app中的h5页中是拉不起小程序的吧?

    2020-10-30
    有用
    回复
  • Summer
    Summer
    2020-07-23

    https://www.dengwz.com/archives/137 看这篇文章

    2020-07-23
    有用
    回复
  • Lvan
    Lvan
    2020-07-16
    <template>
      <div class="home">
        <wx-open-launch-weapp
          id="launch-btn"
          username="gh_"
          @launch="handleLaunchFn"
          @error="handleErrorFn"
        >
          <script type="text/wxtag-template">
            <style>.btn { display: flex;align-items: center; }</style>
            <button class="wx-btn">跳转小程序</button>
          </script>
        </wx-open-launch-weapp>
      </div>
    </template>
    
    
    <script src="//res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
    <script>
    export default {
      data () {
        return {
        }
      },
      mounted () {
      },
      methods: {
        handleLaunchFn (e) {
          console.log(e)
        },
        handleErrorFn(e){
          console.log('fail', e.detail);
        }
      }
    }
    </script>
    
    
    
    2020-07-16
    有用
    回复 5
    • Lvan
      Lvan
      2020-07-16
      亲测有效
      2020-07-16
      回复
    • 阿亮
      阿亮
      2020-07-31
      ios端页面分享出去,再点链接进来也有效?
      2020-07-31
      回复
    • Lvan
      Lvan
      2020-07-31回复阿亮
      测试了有效
      2020-07-31
      回复
    • 王和旭
      王和旭
      2020-08-11
      我的不行,还是出现报错找不到标签,阿西吧
      2020-08-11
      回复
    • 皮蛋solo粥
      皮蛋solo粥
      2020-09-02
      第一次加载的时候可以显示按钮,刷新后就不行了,然后清除微信的缓存首次可以,我是在index.html中引入
      2020-09-02
      回复
  • Norris
    Norris
    2020-07-16

    https://www.jianshu.com/p/559c29c80fd9

    2020-07-16
    有用
    回复
  • (°ཀ°)兔子
    (°ཀ°)兔子
    2020-07-10

    react中使用wx-open-launch-weapp不显示?


    2020-07-10
    有用
    回复 3
    • 赵帅
      赵帅
      2020-07-13
      有解决吗
      2020-07-13
      回复
    • (°ཀ°)兔子
      (°ཀ°)兔子
      2020-07-13回复赵帅
      没有
      2020-07-13
      回复
    • ray
      ray
      2020-07-22
      现在有解决吗?
      2020-07-22
      回复
  • Boolean
    Boolean
    2020-07-09

    解决了么?

    2020-07-09
    有用
    回复
  • |G.XIAO|
    |G.XIAO|
    2020-07-09

    我也遇到了,有结论同步一下哈,谢谢

    2020-07-09
    有用
    回复

正在加载...

登录 后发表内容
问题标签