位置: IT常识 - 正文

如何在uniapp中优雅地使用WebView(uniapp如何使用)

编辑:rootadmin
如何在uniapp中优雅地使用WebView 这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助从webview页面传值到uniapp中官方文档已经很详细了,这里给大家上我的实战代码,首先在webview页面中引入相关依赖:<!-- uniapp各平台依赖 --><script type="text/javascript"> var userAgent = navigator.userAgent; if (userAgent.indexOf('AlipayClient') > -1) { // 支付宝小程序的 JS-SDK 防止 404 需要动态加载,如果不需要兼容支付宝小程序,则无需引用此 JS 文件。 document.writeln('<script src="https://appx/web-view.min.js"' + '>' + '<' + '/' + 'script>'); } else if (/QQ/i.test(userAgent) && /miniProgram/i.test(userAgent)) { // QQ 小程序 document.write('<script type="text/javascript" src="https://qqq.gtimg.cn/miniprogram/webview_jssdk/qqjssdk-1.0.0.js"><\/script>'); } else if (/miniProgram/i.test(userAgent)) { // 微信小程序 JS-SDK 如果不需要兼容微信小程序,则无需引用此 JS 文件。 document.write('<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"><\/script>'); } else if (/toutiaomicroapp/i.test(userAgent)) { // 字节跳动小程序 JS-SDK 如果不需要兼容字节跳动小程序,则无需引用此 JS 文件。 document.write('<script type="text/javascript" src="https://s3.pstatp.com/toutiao/tmajssdk/jssdk-1.0.1.js"><\/script>'); } else if (/swan/i.test(userAgent)) { // 百度小程序 JS-SDK 如果不需要兼容百度小程序,则无需引用此 JS 文件。 document.write('<script type="text/javascript" src="https://b.bdstatic.com/searchbox/icms/searchbox/js/swan-2.0.18.js"><\/script>'); }</script><!-- uni 的 SDK --><script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>然后通过uni.postMessage向uniapp传值: document.addEventListener('UniAppJSBridgeReady', function() { uni.postMessage({ data: { action: 'message' } }); uni.getEnv(function(res) { console.log('当前环境:' + JSON.stringify(res)); }); });在uniapp中监听message:<template lang="pug"> view web-view.webview(:src="url" @message="getMessage")</template><script> export default { data() { return { url: "https://zys201811.boringkiller.cn/shianonline/webview/vod.html?data=123", } }, methods: { getMessage(event) { let data = event.detail.data console.log(data); } } }</script><style lang="stylus" scoped>$webviewHeight = 420rpx.webview width 750rpx height $webviewHeight</style>从uniapp中动态传值到webview页面按照官方文档,从uniapp传值到webview中,只能通过query:<template lang="pug"> view <!-- #ifdef APP-PLUS --> web-view.webview(:src="url") <!-- #endif --></template><script> export default { data() { return { url: "https://zys201811.boringkiller.cn/shianonline/webview/vod.html?data=123", } } }</script><style lang="stylus" scoped>$webviewHeight = 420rpx.webview width 750rpx height $webviewHeight</style>在webview中解析query:let data = getQuery('data')console.log(data); // 获取 uni-app 传来的值// 取url中的参数值function getQuery(name) { // 正则:[找寻'&' + 'url参数名字' = '值' + '&']('&'可以不存在) let reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)"); let r = window.location.search.substr(1).match(reg); console.log(r); if(r != null) { // 对参数值进行解码 return decodeURIComponent(r[2]); } return null;}但是,我发现,通过向web-view的src中传值,只能传一次,如果参数改变了,没法动态传到webview。对于这种需要动态传递参数的需求,我们可以使用动态创建webview达到目的,而不是通过webview组件。实现如下:<template lang="pug"> view</template><script> export default { data() { return { url: "https://zys201811.boringkiller.cn/shianonline/webview/vod.html", } }, mounted() { // #ifdef APP-PLUS var w = plus.webview.create(this.url + '?data=good'); w.show(); setTimeout(() => { plus.webview.close(w); setTimeout(() => { w = plus.webview.create(this.url + '?data=123'); w.show(); }, 1000) }, 1000) // #endif } }</script>以上,通过plus.webview.create创建一个webview,然后显示。如果数据更新了,可以先关闭之前的一个webview,然后重新创建一个,再显示。也可以直接使用open刷新页面:// #ifdef APP-PLUSvar w = plus.webview.open(this.url + '?data=good');setTimeout(() => { w = plus.webview.open(this.url + '?data=123');}, 1000)// #endif相关API:// 创建窗口WebviewObject plus.webview.create( url, id, styles, extras );// 创建并打开窗口WebviewObject plus.webview.open( url, id, styles, aniShow, duration, showedCB );// 显示窗口void plus.webview.show( id_wvobj, aniShow, duration, showedCB, extras );// 隐藏窗口void plus.webview.hide( id_wvobj, aniHide, duration, extras );// 关闭窗口void plus.webview.close( id_wvobj, aniClose, duration, extras );调用webview中的方法动态传值还有一种解决方案,就是通过evalJs方法直接调用webview中方法。具体实现如下:在模板中,通过ref暴露web-view元素:<template lang="pug"> web-view(:src="url" ref="wb")</template>在mounted生命周期的时候获取此元素:// #ifdef APP-PLUSthis.wb = this.$refs.wb// #endif在需要调用webview中方法的时候使用evalJs:// #ifdef APP-PLUSthis.wb.evalJs(`showAlert(${this.num})`)// #endif在webview页面定义对应的方法即可:function showAlert(num) { alert(num)}从uniapp动态传值,可以使用这种方式。注意:在nvue中,只有通过ref暴露webview节点才能拿到webview本身注意evalJs的拼写方式,官方文档是evalJS,但通过ref获取时,S应该为小写如果对您有所帮助,欢迎您点个关注,我会定时更新技术文档,大家一起讨论学习,一起进步。
本文链接地址:https://www.jiuchutong.com/zhishi/287282.html 转载请保留说明!

上一篇:vue 在for循环中设置ref并获取$refs(vue for循环遍历对象取值)

下一篇:最贵的域名是什么(最贵的域名是什么名字)

  • 汽车购置税计算器2019
  • 超过库存现金限额的现金要及时存入银行
  • 广告公司可以不交社保吗
  • 交易性金融资产公允价值变动计入
  • 冲减存货的会计分录
  • 农产品销售发票可以抵扣吗?
  • 跨期发票可以申报抵扣进项税额吗?
  • 确认社保局工伤赔款会计分录
  • 四季度企业所得税怎么报
  • 普通硅酸盐水泥和矿渣硅酸盐水泥的区别
  • 用工会经费发放福利
  • 普通的增值税发票可以查询到购买人的信息吗
  • 预付款和现金支付的区别
  • 跨年度的费用发票,如何做分录
  • 一般纳税人增值税及附加税费申报表怎么填
  • 免税进口种子要符合哪些条件?
  • 增值税计入应付账款
  • 出口企业取得失业保险
  • 母子公司吸收合并优劣势
  • win10怎么自定义开机音乐
  • php类和对象写法
  • 收到员工的罚款的会计科目
  • mac系统中文输入法切换
  • 支付服务器年租什么意思
  • php
  • php-ml
  • 进项税额是
  • php email
  • 有限责任公司股东向股东以外的人转让股权
  • 软件产品即征即退申请表
  • 残疾人保障基金减免政策
  • 科目余额表怎么导出
  • 已提足折旧固定资产改建支出 所得税怎么计算
  • 微信小程序自定义tabbar
  • vue页面嵌套iframe vue页面
  • openpose的输出
  • 《推荐一个好地方》图书馆
  • php构造函数重载
  • 律师事务所的日记怎么写
  • 报销还款人民币是什么意思
  • 出纳各种费用如何归类
  • 古腾堡中文官网
  • 帝国cms灵动标签排除上一篇下一篇文章
  • 零税率和免税的例子
  • 外汇保值业务的特点包括
  • MSSQL output使用
  • 收据大写后面的空格怎么填
  • 餐饮税务每个月多少钱
  • 短期理财会计处理
  • 职工基本医疗保险怎么用
  • 其他综合收益的二级科目有哪些
  • 公司向税务局缴纳税款
  • 基建结束后该做哪些工作
  • 分公司财务归谁管
  • 发票冲红如何做账红字发票需要给购买方吗
  • 专项费用会计分录
  • 总公司可以开发票给分公司吗
  • 出纳 记账凭证
  • 银行利息收入的会计分录怎么写
  • 法人存入公司账户会计分录
  • 存货跌价准备的账务处理
  • 公司注册代理费用标准
  • 私人企业会计工作内容
  • 存货核算的含义
  • winlogon是什么意思
  • 电脑windows7无法验证此文件
  • find 命令 查找文件
  • 在linux系统中创建文件的命令
  • linux shell脚本编程100例
  • javascript有哪些
  • 关于javascript中数组的说法不正确
  • 前端js优化
  • JS中call/apply、arguments、undefined/null方法详解
  • jquery自定义函数
  • 国家税务总局核定的该车最低计税价格
  • 安徽省定额发票真伪查询
  • 2020百望税控盘最新系统
  • 江之都财税服务集团有限公司地址
  • 出口退税已提交数据撤回
  • 现在企业可以享受低保吗
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设