收藏
回答

wx-open-launch-app不同机型点击事件机型不同点击效果为何不同?

wx-open-launch-app高度必须是固定具体数值,但数组设置好之后再安卓和ios效果不一样,安卓点击整个区域都能触发打开app事件,ios只能点击顶部才行。

开发框架:vue2.0;

经过校验确定ios及安卓设备标签内高度是固定的具体的px数值。问题出在哪?

实际结果如下:

代码如下:
<template>
  <div class="jumpApp" id="jumpApp" v-html="content"></div>
</template>

<script>
export default {
  name: "jumpApp",
  props: {
    //开放性标签id
    launchId: {
      type: String,
      default: 'launch-id'
    },
    //app的id
    appid: {
      type: String,
      default: 'wx1090d686e241f114'
    },
    //跳转app携带的信息,字符形式
    extinfo: {
      type: String,
      default: '{}'
    },
    //绑定数据,数据变化重新执行app高度函数
    dataInfo: {
      type: Array,
      default: () => []
    }
  },
  watch: {
    dataInfo: {
      deep: true,
      handler(newValue, oldValue) {
        this.initApp()
      }
    }
  },
  data() {
    return {
      content: ''
    }
  },
  mounted() {
    this.initApp()
  },
  updated() {
    let that = this
    document.querySelector(`.jumpApp #${this.launchId}`).addEventListener("ready", function (e) {
      console.log("ready", e)
    })
    document.querySelector(`.jumpApp #${this.launchId}`).addEventListener("error", function (e) {
      that.error(e)
    });
  },
  methods: {
    //初始化app标签
    initApp() {
      let height = document.querySelector('.jumpApp').offsetHeight
      this.content = `<wx-open-launch-app
                             style="position: absolute;top: 0;bottom: 0;right: 0;left: 0;"
                             id=${this.launchId}
                             extinfo=${this.extinfo}
                             appid=${this.appid}
                          >
                          <script type="text/wxtag-template">
                             <style>
                               .diy-style {
                                  opacity: 0;
                                  height: ${height}px
                                 }
                             </style>
                             <div class="diy-style">
                                 打开APP查看
                             </div>
                          <script>
                        </wx-open-launch-app>`
    },
    //用户点击跳转按钮后出现错误
    error(errMsg) {
      console.log(errMsg)
    }
  }
}
</script>

<style scoped lang="scss">
.jumpApp {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: transparent;
}
</style>

最后一次编辑于  2020-12-09
回答关注问题邀请回答
收藏

1 个回答

登录 后发表内容
问题标签