uniappbanner-uni-app踩坑笔记
2024-09-26 02:12:50
前端最火热的话题无法就是flutter,不管是刷哪个论坛,必定有探讨flutter的文章。没用过flutter,但是对于跨平台的技术,我一直都在研究。
为什么是uni-app
之前一直在找解决跨平台的方案,尝试了很多方案,比如滴滴的变色龙,但是最终还是选择了uni-app,这里附上uni-app的官网。为什么会选择它呢,第一,vue语法,学习成本低,上手速度快,只要之前你做过vue的项目,那么就能很快上手,其实是vue和微信小程序的结合体,一半vue,一半微信小程序。第二,长期维护,之前做微信小程序的时候,选择了美团的mpvue,但是后面发现长期不维护了,提了Issues也没人理,随之就放弃了,而uni-app长期在维护,这样看出了开发团队的用心。第三,跨平台的能力,uni-app能够跨多个终端,H5,安卓,Ios,微信小程序,百度小程序,头条小程序,支付宝小程序,真正实现了一套代码,多端运行,而且很好适应了我国的市场。第四,日益丰富的插件市场,uni的插件市场也在日益强大,能够基本上满足我们平时的开发需求。
uni-app的组件有原生调用能力,第三方的vue库在调原生接口时跟5+runtime不兼容。就像nativescript有vue版和angular版,类似于reactnative,都是起源于phonegap/cordova
实际开发效果遵义小红椒做了一款app,打包了安卓,Ios,微信小程序3个平台,产出的效果都还是不错,总体还是比较满意。而且打包过程也很方便简单,配套的HBuilderX自动内置了打包功能,所以也省去了打包的烦恼。
遵义小红椒建议
如果你现在想做一款跨平台的产品,而且有vue和微信小程序的经验,最重要的,你不想学习一门新语言,那么uni-app也许是你的一个选择。
uni-app项目中的页面跳转方式官方详情介绍
uni-app的页面跳转只能跳转本地页面,且目标页面必须在中注册。跳转方式与
小程序
/vue的极为相似,只是方法和标签有所不同,分为和两种。
类似Vue的<router-link>标签
类似Vue({path:'xxx'})方法,uni-app提供了6钟不同的跳转方式,以方式调用。
官网详情
保留
当前页面,跳转到应用内的某个页面,可使用返回到原页面
object参数说明(其他跳转方式的参数与之大同小异):
接收数据(其他跳转方式的接收参数方法与之相同):
关闭
当前页面,跳转到应用内的某个页面,可理解为重定向页面
关闭所有
页面,跳转到应用内的某个页面
注意:
如果调用了(OBJECT)不会关闭,仅触发
生命周期
onHide
跳转到tabBar页面,并
关闭所有非tabBar
页面
注意:
如果调用了(OBJECT)不会关闭,仅触发生命周期onHide
返回上一页面/多级页面。可通过getCurrentPages()获取当前的页面栈,决定需要返回几层
预加载页面,是一种性能优化技术。被预载的页面,在打开时速度更快。
平台差异说明:
H5平台:
预加载/pages/test/test对应的js文件,不执行页面预渲染逻辑
App-nvue平台:
预加载nvue页面/pages/test/test
注意事项
e.g.
HBuilderX2.7.12+的hellouni-app,在navigator示例和uniui的日历示例中增加了页面预载示例。
uni-app踩坑笔记1.两个普通页面之间的跳转用(),url可携带参数。
2.普通页面跳tabbar配置过的页面需要(),url不能传值。
3.()万金油跳转,可以跳转任何页面(克服了普通页面跳tabbar配置的页面url不能传值的问题。)
4.突出中间按钮的midButton,是偶数才能显示,但只支持真机环境,浏览器是没有效果的。
6.页面生命周期(考虑的是页面刷新带来的影响):
onLoad、onShow、onReady
应用生命周期,指里面的这三个
7.箭头函数没有this指向(慎用),如果在控制台打印this是undefined的,证明是箭头函数在作怪,在特殊场合别贪方便,有时候会遇到抓破头皮也找不到问题所在,就是箭头函数搞的鬼。
8.({,success:function(res){})})请求成功返回的数据直接使用this直接赋值是不生效的,因为这是一个异步函数,需要借助一个指向:letthat=this
9.setStorageSync数据缓存是用来2个页面交互的,传数据传值,写在onLoad里面。
的<view>标签等于div标签,独占一行。
5.和风天气官网提供的API是免费的,每人一天1000次数,够练手了。
热门标签
