位置: IT常识 - 正文

uniapp+h5混合开发(uniapp和vue混合开发)

编辑:rootadmin
uniapp+h5混合开发

推荐整理分享uniapp+h5混合开发(uniapp和vue混合开发),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:uniapp开发h5兼容问题,uniapp内嵌h5,uniapp和vue混合开发,uniapp内嵌h5,uniapp开发的h5和普通的h5,uniapp开发的h5和普通的h5,uniapp开发的h5和普通的h5,uniapp开发的h5和普通的h5,内容如对您有帮助,希望把文章链接给更多的朋友!

uniapp+h5混合开发(uniapp和vue混合开发)

为了减少app频繁上架,频繁更新,决定放弃纯uniapp开发,改用uniapp(后续简称uni)+h5的方式进行混合开发。 技术选型: 整个app架子用uni(vue3),h5采用vue3+vant4,然后使用uni的webview进行页面控制。由于我们是由vue2升级到vue3,所以之前的一些代码需要做调整,这里自己去看一下vue2和vue3的区别。在技术选型上也本着一个原则,如遇技术冲突,就以uniapp为主,h5只做页面展示。 其中还有几个点在这次升级中也提出来了,考虑到篇幅问题,这里只贴关键代码 1、页面跳转问题,uni有路由管理,h5也有路由管理,由于所有的h5界面都采用web-view方式访问,所以h5界面在开发的时候规定了不允许使用window.open(在ios系统中有可能出现无法使用的情况)和location.href方式跳转,也禁用了h5的路由方式跳转,代码如下:

//uni获取webview访问路径//该页面名称vuePage<template><view><web-view :src="indexUrl" @message="getMessage" @onPostMessage="getPostMessage"></web-view></view></template>onLoad(param) {let _this = thislet url=decodeURI(param.vuePage)url=base64.decode(url);//"/app_dyg"+url 前端路由地址_this.indexUrl = '前端访问地址'+"/app_dyg"+url},/** * 保留当前页面,跳转到vue界面,这种方式不需要全路径,只需要页面的路由 * @param url */const navigateToVueView = (url) => { url = Base64.toBase64(url) window.uni.webView.navigateTo({ url: '../vuePage/vuePage?vuePage=' + encodeURI(url) })}

这种方式就是h5界面调用uni提供的路由跳转接口进行页面跳转,需要注意的是h5界面需要引入uni.webview.1.5.2.js,具体引入方式可参考官方文档,就不过多赘述。这里只列举了一种,如有其他需要可参考这段代码进行编写,下图是uni提供的部分接口 2、页面返回之后h5界面没有刷新数据问题 由于所有的h5界面都是采用的webview方式访问的,页面都是存在uni页面栈里面的,所以返回之后h5的勾子函数会失效,但是uni的onShow()是有效的,所以在页面返回之后通过evalJS传值的方式来触发h5页面的刷新,代码如下:

onShow() {// #ifdef APP-PLUSif(typeof this.$mp!='undefined' && typeof this.$mp.page!='undefined'){var currentWebview = this.$mp.page.$getAppWebview();var wv = currentWebview.children()[0]if (typeof wv != 'undefined') {setTimeout(function() {wv.evalJS('appMsg()')}, 50);}}// #endif},

由于appMsg使用频率较高,为了方便使用,我将它注册到了window下面,方便在开发过程中进行调用

//将appMsg注册到window下面declare interface Window { uni: any tracking: any appMsg: any}//在需要刷新数据的界面进行调用window.appMsg = () => { getData()}

3、重要信息缓存问题 在使用过程中,我们会将用户信息,token等重要信息缓存起来,尤其是token这种数据,生命周期比较短,在我们系统中只有5分钟,就需要在uni不断的刷新token,如果多端进行数据维护也比较麻烦,所以在开发过程中h5端只调用uni缓存的信息,代码如下

if (window.plus) { setData(); } else { document.addEventListener('plusready', setData, false); } function setData() { sessionStorage.setItem('token', plus.storage.getItem('token')) sessionStorage.setItem('userInfo', plus.storage.getItem('user')) sessionStorage.setItem('appApiUrl', plus.storage.getItem('appApiUrl')) }

uni访问h5界面的时候都会触发该方法,所以h5界面会将uni缓存的最新数据进行存储,保证数据的一致性。这里在开发过程中遇到这样一个问题,目前主要是ios系统中发现了这个问题,就是数据缓存和页面加载不同步,也就是页面加载完了,但是token等数据还没有缓存好,所以在h5的路由配置的时候是做了一个延迟加载的处理

router.beforeEach((to: any, from, next) => { if (to.meta.title) { document.title = to.meta.title } if (to.matched.length === 0) { next('/404') } else { setTimeout(function () { next() }, 300) }})
本文链接地址:https://www.jiuchutong.com/zhishi/296055.html 转载请保留说明!

上一篇:Nodejs快速搭建简单的HTTP服务器,并发布公网远程访问(node.js环境搭建)

下一篇:vue-treeselect 的基本使用(vue treegrid)

  • 对公账户转到个人账号能提供发票吗?
  • 预付账款长期挂账风险
  • 对赌协议赢了怎么样
  • 收到固定资产抵账增值税计税基础
  • 业务招待费记账凭证摘要
  • 所有的进项税都在借方吗
  • 印花税应税凭证填是还是否
  • 专业合作社的业务范围
  • 地税注销流程
  • 增值税普票未上传怎么办
  • 销售淀粉的税率
  • 规范合同签订的重要性
  • 股权案例分析2020
  • 预收房款不征税发票
  • 房租发票税点是几个点
  • 母子公司之间的借款利息支出增值税能否抵扣
  • 付出去的款项退回怎么做账
  • window10的点在哪里
  • 退税账务处理分录
  • 公司购买理财产品账务处理
  • 福利费不需要发票
  • php中的类是什么
  • macos big sur卡在
  • PHP:stream_socket_get_name()的用法_Stream函数
  • 如何使用vim创建文件
  • 投资利润率用什么表示
  • 摩洛哥首都拉巴特简介
  • 详解php字符串替换
  • 巴尼奥斯附近的阿格杨瀑布
  • 国税系统怎么认证发票
  • js生成条形码的方式有哪些
  • novelai本地部署电脑要求
  • 训练集验证集和测试集
  • node.js快速入门
  • php require函数
  • php使用正则表达式检测是否包含非数字
  • 软件增值税即征即退网上备案
  • 仓库折旧会计分录
  • 增加固定资产原值50%以上
  • 委托银行贷款利息发票谁提供
  • 资产减值准备如何影响利润
  • 收到的技术服务费计入什么科目
  • 食堂维修费用计入什么科目
  • 普通发票领多了怎么处理
  • 什么是明细分类帐
  • 工资算营业成本还是管理费用
  • 固定资产清理主动
  • 含有增值税的工作有哪些
  • 行政单位基建账地质灾害评估报告计哪个科目
  • 付款申请单如何管理
  • 白条入账会计处理
  • 应收账款周转率越高越好吗
  • 房租收入怎么确认收入
  • 以非货币形式出资应办理什么手续
  • 土地出让金抵减销项税计算
  • 规划设计费入什么科目
  • 办公家具可以一次性抵扣吗?
  • 机票 进项抵扣
  • 重要性水平如何判断
  • 不含税价格怎么算公式(1+3%)
  • 新公司现金日记账怎么记账的
  • 查看mysql执行sql日志内容
  • python中的django
  • 重装系统东西
  • win8系统启动不了如何修复
  • linux 文件执行
  • linux添加启动
  • Linux通过netstat命令查看80端口连接数的方法
  • win7更新补丁80072efe
  • glUnmapBuffer
  • ES6 javascript的异步操作实例详解
  • js一维数组转树结构
  • 批处理常用命令
  • js 截取
  • ExpandableListView 实现分组购物车
  • python操作json字符串
  • 上海社保三方协议
  • 青岛市税务局长魏
  • 地铁发票如何取得
  • 郑州市地税局局长
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设