uniapp开发的知名项目(uni app项目)
本篇文章给大家谈谈uniapp开发的知名项目,以及uni app项目对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。
uni-app 入门到精通 (二)
18 年时候有幸接触到 uniapp , 写了一篇 《uni-app 入门到精通》 ,由于一些原因,该方案并没有执行,该项目一系列文章也就没有再写下去,所以遭受到了许多人评论的吐槽,到如今公司项目的需求又要根据 uniapp 写 H5 嵌入到 app 中,所以想根据项目实际开发分享一下,有兴趣的伙伴可以参考和吐槽。
这一篇文章主要分享一下内容
uniapp 模板项目有两种初始化方式
由于无法舍弃 VSCode ,我们采用 vue-cli 来初始化项目, HBuilderX 大家可以参照官方文档
这种方式是可以通过 vue 脚手架命令指定模板,这个是 dcloudio 的官方提供模板
我们选择默认模板即可,
成功后我们执行
打开浏览器地址,直接运行即可。
一般刚接触前端的小伙伴可能会对 postcss 不太了解,这里简单介绍一下,
当然 PostCSS 具体使用是需要引入一些插件的,例如常用的是 autoprefixer postcss-preset-env 等, 具体如何使用大家可以自行参考资料,毕竟这块知识还是挺多的就不具体展开解释了。
通常我们在写移动端时候需要做的是页面适配方案的确定, uni-app 支持的通用 css 单位包括 px、rpx , 之前的 upx 方案已经被废弃掉,官方解释是目前市面上已经基本上支持了微信的 rpx 方案,所以 upx 中转方案已经意义不大了,不过还可以继续使用,不过已经不再推荐。
rpx 之初是由微信小程序提出一种方案,即根据宽度来进行适配以 750 宽屏幕为基准, 750rpx 恰好为屏幕宽度, uni-app 规定屏幕基准宽度 750rpx 。所以说如果你们的UI 设计以 750*1334 iphone 6/6s 为基准设计的话,你只需要将屏幕上 px 写为 rpx 即可,不用做任何换算,如果不是的话,你就需要做如下换算:
uniapp 有自己一套路由管理机制,而未采用 vue-route 方案,个人认为这套方案还是比较成熟和好用的,以及可以满足我们日常的需求:
保留当前页面,跳转到应用内的某个页面,使用uni.navigateBack可以返回到原页面。
2.uni.redirectTo(OBJECT)
关闭当前页面,跳转到应用内的某个页面。
3.uni.reLaunch(OBJECT)
关闭所有页面,打开到应用内的某个页面。
注意: 如果调用了 uni.preloadPage(OBJECT)) 不会关闭,仅触发生命周期 onHide
4.uni.switchTab(OBJECT)
跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面。
注意: 如果调用了 uni.preloadPage(OBJECT)不会关闭,仅触发生命周期 onHide
5.uni.navigateBack(OBJECT)
关闭当前页面,返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈,决定需要返回几层。
5.uni.preloadPage(OBJECT)
预加载页面,是一种性能优化技术。被预载的页面,在打开时速度更快。
以上路由API 已经满足我们的需求,当然进行路由跳转的前提是我们需要在 pages.json 进行路由配置, 包括路由和具体的样式配置
而进行具体路由跳转我们需要如下,需要多加一个 /
需要特别注意的一点是, 利用浏览器 在 进行 移动H5页面调试时候,会出现页面刷新之后页面栈会消失,此时navigateBack不能返回,如果一定要返回可以使用history.back()导航到浏览器的其他历史记录。
uniapp 提供网络请求的 api 是 uni.request ,具体支持的请求方法可以参考官网 method 有效值
不过我们通常不会直接使用,而是进过一系列的封装以方便我们的使用,具体封装接口使用会在随根据页面数据请求一并展示。
uniapp和graceUI介绍
uniapp是一个跨平台的基于Vuejs的前段框架,一次开发,支持包括小程序,APP,H5等等的8个端。
uni-app官方网站
uni-app如何学习
于是我找到一个基于uniapp的前段样式库框架GraceUI,
使用GraceUI不会降低使用uniapp的优势,并补全了关于样式和组件方面的教学和完善,下面是GraceUI我认为的优点。
graceUI是一款基于uni-app和微信小程序开发的前段样式库,拥有全局样式表,组件,表单认证等等功能。
GraceUI官网
GraceUI免费教学
uniapp是未来的趋势吗?
未来太遥远,不想这么多,技术栈几年一换才是常态。目前很多应用开发者在尝试使用uni-app,可以尝试一下,多学一点多一个技术选择不是坏事。
想学一个长久可用的技术,在IT界特别是中国,并不太现实。如果选择了前端,那情况只怕是更糟。
uniapp是未来趋势?NO!NO!
说uniapp成为趋势感觉有点好笑。
不懂行的可能不了解,我就换个说法。
我可以说手机行业小米手机会成为未来的趋势吗?
你认为可能性多大?当然不可否认小米很优秀了,当然实话实说,这也是相对的。想变成趋势可谓有点夜郎自大。
uniapp是什么?简单点说说吧
一个基于vue的跨平台开发的框架,有了它你可以写一套代码打包成安卓、苹果安装包,还可以导出各种小程序,还可以导出h5…,反正功能很强大。
它的出现,只要你懂点前端,只要你会点vue,OK那你就可以开发APP了。
厉害不厉害?可以说在某种程度上确实很牛逼,很方便,特别又是国产,文档、demo之类的很多。
平台又出有云服务,支付,广告等各种插件。小白上手也很快。所以一时圈了很粉,社区还算凑合吧。
uniapp之所以被越来越多的人需要,不得不说下跨平台。
APP开发跨平台确实是个刚需,也是一个真正的趋势。毕竟纯原生开发一个APP太复杂了,成本也高。有些APP根本不需要关心所谓的性能、流畅度之类的。所以跨平台,一套代码完全搞定,可谓是个不错的选择。
但是跨平台可选性的技术方案太多,与uniapp直接相对的,apicloud,在国产圈也是拉了不少粉。
此外rn,lonic,cordova,weex等之类的前辈仍然具有一定的地位,还有新起来flutter也是火的不得了。
所以uniapp只能说在小范围内可以说很好,但是和那些成熟,风靡海内外的技术框架还是有差距的。
uniapp真的好用吗?
首先,我感觉它越来越废了。有时真是感觉积累!
开发APP就专业开发APP吧,你还搞的适配一堆小程序,所以造成越来越臃肿。文档杂乱。
有时,选择你,我就是想仅仅开发APP。压根不要小程序!
所以,特别是新手,因此会有一定的烦恼。
另一个 值得 吐槽的就是不太稳定!
架构经常换,而且之前的很难兼容!
为此估计不少人想骂人。特别那些已经有了成熟运营的APP。
再次升级的话,不好意思,很多东西重写吧。
从当初非自定义组件、自定义组件,再到今天的v3架构。可谓一步一个坑,真的严重依赖它的话,真的花费大精力去踩坑了。
当然一般的开发拿来用用还是不错的
我司项目开始用的h5+那一套,也用uniapp做过几个项目。反正要求不是很高,效果感觉还可以。
真的真的去完全适配安卓,苹果的话,要做的还是有很多。
OK,就这了。技术本身无所谓好坏,只有适合不适合。
有时基于时间、项目成本、人员技术水平,只要合适就是最好的。
uniapp也一样,希望它快快成长,快快稳定,完善吧!
uniapp目前确实很火,暂且不说uniapp这种框架是不是未来的趋势,但大前端绝对是未来的趋势。
在计算机编程领域,前端近几年的技术更新速度达到了顶峰。
这并不是得益于前端的语言优势,而是开放繁荣的生态。
uniapp这类框架正是前端进军移动互联网的利刃。
移动互联网过时了吗?不,移动互联网正在以新的形态进军PC。
所以,未来几年uniapp这类框架还会繁荣,而前端慢慢融合,PC与移动的前端界限越来越模糊。
serverless是趋势,unicloud正好整合了阿里云与腾讯云!
最重要的是unicloud开始标准化,uni-id ,unicloud-admin就是苗头!
听从开发者建议且更新频繁的框架!两年左右完善度已经非常高!
现在他们需要做的功能太多,所以一些细节性并未完善,一旦稳定下来,他们能把一些细节做好,这个框架与开发者工具绝对不容小嘘!
免费的服务器,免费的框架,对于初创团队,或者个人创业者,有想法的开发者,可以省大多成本!
自己独立完成的项目(超级档案)已上架小米,华为,苹果应用商店,同时,各大平台小程序也全部上架!
不是。h5类的优势在于开发简单,周期短,一套代码跑多端。适合初创快速迭代。任何一个成熟的产品在达到一定规模后,都会回归原生,或者混合。这是性能,用户体验,安全等多方面因素决定的。这也是有了rn后,为什么还会有flutter出现的原因。
何为趋势?在互联网高速发达的时代,物竞天择的规律同样适用,这个开发平台的主要目的就是解决了多平台重复,跨平台生态不好,开发和使用用户体验不好的问题,真正做到了一套代码全平台适用,一劳永逸,同时还不影响平台特色,随着整个业内开发者的用户数越来越多,势必会取代不合时宜的开发平台。从目前的使用广度和应用产品的市场反馈来看,它是具备这个能力的。
uniapp还是很多人用的,尤其在现在这个时间,用来开发小程序还是不错的
如果没有意外的话,他还会保持现状很长时间
对于小型项目或者交互要求不高的项目来说,基本是够用的,这种项目又普遍对成本或者开发效率非常敏感,在这点做的比uniapp好的确实不多,所以他的用户群会非常稳定
至于感觉上没人讨论的原因也很简单
一是有影响力的开发人员几乎不可能是uniapp的用户,uniapp的用户多数也提不出值得讨论的内容
二是这东西真没什么可讨论的,上限实在不高
uniapp目前在国内的生态很好,因为大前端是趋势,是uniapp在未来一段时间内还是很火的,个人认为如果创业阶段如果没有原生客户端工程师,只有web团队,uniapp非常适合
目前来说uniapp是 一款很好的开发小程序的编码工具,
优点有
一:简单易学,学习成本低。
二:可以跨多个平台,制作一套代码可以在多个平台发布
三:运行比较流畅,运行体验更好,兼容weex,组件·api和微信小程序一致
综合以上几点来看uniapp前景不错。
目前确实有这个趋势。用uniapp开发了一款app,叫小 时尚 ,目前已经在各大应用商店上线。
uni-app开发一个小视频应用(二)
前情回顾uni-app开发一个小视频应用(一)上篇文章,我们已经实现了首页的头部导航栏组件、底部的tabBar导航栏组件、中间的视频列表组件以及视频列表组件中的视频播放组件,传入视频列表渲染后已经可以上下滑动进行视频切换和播放,接下来我们将完成首页的剩余部分,左侧信息栏组件、右侧图标栏组件,以及完善视频切换动画、播放控制等功能。
左侧的信息栏组件,主要分三块: 作者名、视频标题名、音乐名。这个左侧信息栏信息是和当前播放视频相关联的,所以应该在循环视频列表的时候,将左侧信息栏组件一起渲染出来,所以左侧信息栏组件应该加到swiper-item中。
// components/list-left.vue
// components/video-list.vue
右侧图标栏组件,主要分为: 头像图标(头像设置border-radius)、收藏图标(iconfont图标)、评论图标(iconfont图标)、分享图标(iconfont图标)、音乐图标(图片设置border-radius),右侧图标栏组件设置一个固定宽度,然后让各种图标依次排列即可,如:
// components/list-right.vue
当点击头像下部的加号图标,可以对该用户进行关注,即隐藏加号图标,还有就是收藏爱心图标颜色切换,当点击收藏爱心图标,爱心图标变成红色,再次点击收藏爱心图标,爱心图标变回白色,这里先只处理颜色的变化,具体后台交互暂不处理。
// 在头像图标下方通过绝对定位添加一个加号图标,并定位到头像底部
所谓滑动播放,即向上滑动的时候,暂停当前播放视频并且播放下一个视频,向下滑动的时候,暂停当前播放视频,播放上一个视频,而这最关键的就是如何判断是向上滑动还是向下滑动。swiper组件给我们提供了一个change事件,我们可以监听这个change事件,拿到滑动完成后滑动到了第几页,即swiper-item的序号(从0开始),然后与滑动前的当前page相比较,就可以知道是向上滑还是向下滑了。
判断好了是上滑还是下滑后,我们还需要对上滑和下滑作出正确的处理,我们需要能够拿到每个视频播放组件,然后调用视频播放组件上的相关方法对播放进行控制,这就是涉及到了父组件如何调用子组件上方法,父组件要想调用子组件上的方法,关键是父组件要能够拿到子组件对象,我们可以通过ref实现,因为每一个视频播放组件是video-list视频列表组件的一个子组件,所以我们可以在video-list视频列表组件中给每一个video-player视频播放组件添加上一个ref="player",即可拿到对应的视频播放组件了。
// components/video-list.vue
要想实现单击视频播放组件,视频可以进行播放和暂停切换,那么我们需要给视频播放组件添加一个isPlay属性表示视频是否处于播放中,如果是播放中,那么点击就暂停,如果不是播放中,那么点击就播放,同时,由于uni-app不支持vue的dblclick事件的,所以我们还需要对单击和双击操作进行判断,我们需要定义一个变量用于记录用户点击次数,如果300ms内用户点击次数大于等于2,那么就是双击,否则就是单击,如:
双击的时候会向video-list父组件(视频列表组件)发送一个follow事件,video-list组件监听到follow事件后再通知list-right组件调用其方法让其爱心图标变红即可,如:
之前我们的视频播放组件接收了一个index属性,即当前视频对应的索引号,我们可以通过这个索引号判断当前视频是否是第一个,然后将其video组件的autoPlay设置为true即可自动播放。
至此,首页已经完成,效果图如下:
原文地址:
【uni-app】Vuex介绍和使用
无论你是使用 HX 还是使用 vue-cl i创建的uniapp项目,都已内置 Vuex ,无需再进行安装
uni-app也像小程序一样有 globalData ,这是一种简单的 全局变量 机制
globalData 是简单的全局变量,如果使用状态管理,请使用 vuex
项目文件结构
1.在 main.js 中导入store文件。
2.组装模块并导出 store
3.定义cart.js模块(这里以购物车为例)
4.定义根级别的getters
5.使用
查看下效果
点击添加按钮
web前端简历上uni-app开发项目怎么写
web前端简历上uni-app开发项目需要在下载HBuliderX编辑器完成
首先,创建项目,选择uniapp项目,选择运行方式运行,开发完成之后选择发行到web前端。
uni-app是一个使用 Vuejs开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、Web(响应式)、以及各种小程序,微信、支付宝、百度、头条、QQ、钉钉、淘宝,快应用等多个平台。
关于uniapp开发的知名项目和uni app项目的介绍到此就结束了,不知道你从中找到你需要的信息了吗 ?如果你还想了解更多这方面的信息,记得收藏关注本站。