收藏
回答

小程序跳转按钮:<wx-open-launch-weapp>部分机型适配的问题 标题必须有问号?

背景:

1、拥有认证服务号

2、JS接口安全域名已配置

3、网站正常使用

需求:在网站内添加跳转小程序功能

实现:vue组件

<template>
  <div class="components-details" v-if="reday" :span="24">
      <wx-open-launch-weapp style="display:block; width:100%;height:100%;" class="launch-btn" id="launch-btn"
      :username="appid" :extinfo="path">
      <script type="text/wxtag-template">
        <style>
            .btn {
              width: 100%;
              height: 100%;
              font-size:15px;
              color:#ffffff;
              line-height: 45px;
              background-color: #e60039;
              margin: 0 auto;
              text-align: center;
            }
            </style>
            <div class="btn">前往小程序</div>
          </script>
    </wx-open-launch-weapp>
  </div>
</template>


<script>
//获取配置接口
import { getWxConfigInfo } from '@/api/goods'
export default {
  props: {
    appid: {
      type: String,
      default: ''
    },
    path: {
      type: String,
      default: 'pages/index/index.html'
    }
  },
  data() {
    return {
      reday: false
    };
  },
  created() {
    this.getConfig()
  },
  methods: {
    getConfig() {
      let wxurl = window.location.href.split('#')[0]; //获取签名的地址   vue hash模式
      const that = this;
      getWxConfigInfo({
        appid: '你的服务号appid',
        requesturl: wxurl
      }).then(res => {
        if (res.code == '0') {
           //这里直接用wx是因为项目在index.html 引入了https://res.wx.qq.com/open/js/jweixin-1.6.0.js
           //当然也可以用import方式引入再使用
          wx.config({
            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
            appId: res.data.appId, // 必填,公众号的唯一标识
            timestamp: res.data.timestamp, // 必填,生成签名的时间戳
            nonceStr: res.data.nonceStr, // 必填,生成签名的随机串
            signature: res.data.signature, // 必填,签名,见附录1
            jsApiList: ['onMenuShareTimeline'], // 所有要调用的 API 都要加到这个列表中,即使 不使用任何API也必须填一个,不填的话按钮不会显示
            openTagList: ['wx-open-launch-weapp'],//小程序跳转组件
            success: function (res) {
              // alert(JSON.stringify(res));
              // console.log(res)
              // 以键值对的形式返回,可用的api值true,不可用为false
              // 如:{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}


            },
            cancel: function () {
              reject();
            },
            fail: function (err) {
              console.log(err)
              reject(err)
            }
          });
         // config成功
          wx.ready(function () {
          
            // 成功后显示<wx-open-launch-weapp>标签
            that.reday = true;
          })
        }
      })
    }
  }
};
</script>


<style scoped lang="scss">
.components-details {
  width: 100%;
  height: 100%;
}
</style>


效果:

iPhone手机能正常显示(低版本没有测试)

2部小米手机无法显示按钮安卓10,微信7.0.16

2部OPPO手机无法显示 安卓10,微信7.0.15

华为P30无法显示 安卓9 微信7.0.15

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

2 个回答

  • AloM
    AloM
    01-02
    有可能时标签顺序导致,<template> 标签放在 <wx-open-launch-weapp>后边,
    将.components-details {
      width: 100%;
      height: 100%;
    },挪到标签里的style里
    
    知否笔记:https://www.zhifoubj.com
    
    01-02
    有用
    回复
  • 赵冬
    赵冬
    2020-07-16

    目前只有iPhone显示了跳转小程序按钮,其他安卓手机没有一部成功显示

    2020-07-16
    有用
    回复 7
    查看更多(2)
登录 后发表内容
问题标签