H5+ app 基于vue,APP内窗口嵌套,打开网页url,类似于在app内装了浏览器的效果

本文介绍如何在H5+ App中利用Vue和WebView实现类似内置浏览器的效果,当扫描二维码后打开网址。通过在Vue应用中使用webVeiw对象,结合v-router进行页面跳转,实现APP内窗口的嵌套。详细代码和注意事项文中均有说明。
摘要由CSDN通过智能技术生成

1.需求当通过二维码扫描后需要打开扫描到的网址,在微信,支付宝,以及uc等各个APP中他们都是采用自己家的浏览器内核提供服务,我们做不出来,所以采用h5内自带的webVeiw 窗口对象,做成类似效果

2.扫描功能请看我之前的文章 https://blog.csdn.net/cscscssjsp/article/details/106523567,关于扫描的

3.下面直接上窗口嵌套功能代码,你可以通过vue内v-router 进行跳转,也可以注册成一个组件调用

<template>
  <div class="web-view" :style="{height:'calc(56px + '+ statusBarHeight + ')',paddingTop:statusBarHeight === '0px'?'10px':statusBarHeight}">
    <img src="../../assets/img/left_arrow.svg" @click="close" class="mr_10">
    <hz-text v-model="dataUrl" style="background: #FF8C00" @enter="goUrl"/>
    <span @click="goUrl" class="mf_10"><img src&#
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值