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>
你好,麻烦提供下复现链接