利用<web-view src="https://v.qq.com/"></web-view> 标签的特性,它能打开移动web端进行浏览
案例如下:
<!-- 跳转到腾讯会议 -->
<web-view v-if="liveShow" :src="liveAddress"></web-view>
js实现逻辑
data() {
return {
liveShow: false ,// 是否打开移动端腾讯视频会议地址
liveAddress:'https://meeting.tencent.com',//直播地址https://meeting.tencent.com
};
},
// 逻辑方法
// 跳转直播弹框提示
livePage(liveUrl) {
uni.showModal({
title: '提示',
content: '您即将打开腾讯会议观看在线直播',
cancelText: '取消', // 取消按钮的文字
confirmText: '确定', // 确认按钮文字
showCancel: true, // 是否显示取消按钮,默认为 true
confirmColor: '#014497', // 设置确认按钮颜色
cancelColor: '#333', // 设置取消按钮颜色
success: res => {
if (res.confirm) {
console.log(res, '点击了确认');
this.liveAddress=liveUrl
this.liveShow = true;
// 跳转到另一个小程序
// uni.navigateToMiniProgram({
// appId: '', // 要跳转的微信小程序appid
// path: 'pages/index/index?id=123', // 要跳转到的页面路径
// extraData: {
// dataName: {} // 传递的数据
// },
// success(res) {
// // 打开成功
// }
// });
}
if (res.cancel) {
console.log(res, '点击了取消');
this.liveShow = false;
}
}
});
},
因为 <web-view src="https://v.qq.com/"></web-view>它是一个标签,所有页面加载时就会被执行,让它在我们需要时在跳转,就利用if判断控制。就能实现我们想要的效果了。