H5中本身有个跳转至小程序的按钮。使用<wx-open-launch-weapp>标签,进行跳转。
现因为嵌入小程序,此按钮无法显示,显示了也无法实现点击跳转的功能。
官方文档:
1、H5中判断是否处于小程序的环境
// data 中定义 isMicro
var jweixin = require('jweixin-module'); //引用jweixin
export default {
data() {
return {
isMicro: false
}
},
onload(){
var ua = window.navigator.userAgent.toLowerCase();
if (ua.match(/MicroMessenger/i)=="micromessenger") {
jweixin.miniProgram.getEnv((res) => {
console.log("res", res)
if (res.miniprogram) {
console.log('在小程序内');
this.isMicro = true;
} else {
console.log('不在小程序内');
this.isMicro = false;
}
})
} else {
console.log('不在微信浏览器内');
this.isMicro = false;
}
},
methods: {
}
}
2、只有在小程序环境下才显示按钮。点击按钮跳转,跳转方法见微信小程序官网
web-view网页中可使用JSSDK 1.3.2提供的接口返回小程序页面。
<img v-if="isMicro" style="width: 200rpx;" :src="qy_info.BUTTON_PIC" @tap="gotoMini"></img>
//qy_info 接口返回的信息
// data 中定义 isMicro
var jweixin = require('jweixin-module'); //引用jweixin
export default {
data() {
return {
isMicro: false,
qy_info: null
}
},
onload(){
var ua = window.navigator.userAgent.toLowerCase();
if (ua.match(/MicroMessenger/i)=="micromessenger") {
jweixin.miniProgram.getEnv((res) => {
console.log("res", res)
if (res.miniprogram) {
console.log('在小程序内');
this.isMicro = true;
} else {
console.log('不在小程序内');
this.isMicro = false;
}
})
} else {
console.log('不在微信浏览器内');
this.isMicro = false;
}
},
methods: {
// 点击按钮跳转指定的小程序页面
gotoMini(){
console.log(this.qy_info.PATH + "?" + this.qy_info.PARA)
console.log(jweixin.miniProgram)
jweixin.miniProgram.navigateTo({
url: this.qy_info.PATH + "?" + this.qy_info.PARA
})
},
}
}