uni-app的学习之路

在面试的的过程中问到uni-app这个六个问题
你打包上线过app项目吗
上线的用的打包软件
混编app你做过吗
跨平台你是咋样开发的
uni-app你会用吗
如何快速开发一款软件
下面围绕上面六个问题去找答案
uni-app是一套可以适用多端的开源框架,一套代码可以同时生成ios,Android,H5,微信小程序,支付宝小程序,百度小程序等8个平台。uni-app对前端开发人员比较友好,学习成本比较低,首先uni-app是基于vue.js的。其次封装的组件和微信小程序的组件一模一样,所以对于现在的主流前端人员来说学习几乎0成本,如果你做为一个前端开发,没有接触过vue和微信小程序的话那建议你多去看看vue官网和微信开发文档了。uni-app使用HBX进行开发,HBX对于vue语法等支持可以说是比较完备了。使用HBX进行开发可以说是速度杠杠的。开发速度比较快,虽然我平时用vscode,但是也还是不得不说HBX做的也很不错了。毕竟是国人开发的软件,国产我们当然要支持一下啦!uni-app拓展能力强,封装了H5+,支持nvue,也支持原生Android,ios开发。可以将原有的移动应用和H5应用改成uni-app应用。
不足之处uni-app问世的时间还比较短,有很多地方还不是完善,但我相信不久会发展更好,对于使用中的一些bug及问题,不过可以加一下qq群或者去社区和其他uni-app开发者一起讨论呀
uin-app的开发流程
1首先安装HBX,下载链接https://www.dcloud.io/hbuilderx.html
2.下载完成后直接解压,进入文件夹找到HBX图标双击就可以啦,打开HBX后选择文件->新建->项目,选择uni-app项目,然后给你的项目命名,并选择模板,如果你已经有过开发经验可以选择默认模板,当然如果你是新手可以选择hello uni-app模板,里面有一些封装好的组件和css样式可以直接供你使用。选择好模板以后点击创建,一个uni-app项目就这样出现在了你的编辑器里
在这里插入图片描述uni-app的目录说明
common-common文件夹可以用来存放一些公共css及js文件
component-component文件夹可以存放我们自己封装的一些组件
static-static文件夹用来存放我们的静态文件比如图片,icon之类的
hybrid-该文件夹可以存放我们写的本地html文件
platforms-存放各平台专用页面的目录
pages-存放业务文件的文件夹
main.js- vue.js的初始化入口文件
App.vue- 用来配置app的全局样式以及监听应用的生命周期
manifest.json- 配置应用的各种信息
pages.json- 配置页面的路由、导航条、选项卡等页面类信息
uni-app的生命周期
应用的生命周期可以在app.vue里面进行配置:
onLaunch:应用初始化完成时触发,全局只触发一次。可以做一些业务逻辑的判断,比如区分开发环境然后调用不同服务器的接口(本地开发时配置测试服务器的域名,生产环境下配置成线上服务器的域名)具体的一些处理细节会在以后的文章中详细介绍。
onShow:当应用启动或者,从后台进入前台时触发。
onHide:当应用从前台进入后台时触发。
onUniNViewMessage: 对nvue(nativevue)页面发送的数据进行监听。
页面的生命周期:
onLoad:页面加载时触发,可以用来在页面之间传参,具体的一些处理会在以后的文章详细介绍。
onShow:页面显示时触发
onReady:页面初次渲染完成时触发
onHide:页面隐藏时触发
onUnload:页面卸载时触发
onPullDownRefresh:用户下拉时触发
onReachBottom:页面上拉触底时触发
nNavigationBarButtonTap: 原生标题栏点击时触发,可以用于分享app等功能
onBackPress:页面返回时触发
重点打包上线的流程
1.manifest.json目录的配置选项(选择准备自己的一个邮箱进行账号注册)然后根据自己的需求需求信息
在这里插入图片描述2.在发行目录中选择云打包(测试时用)上线打包用本地打包在这里插入图片描述愉快的学习结束啦,想学习更多知识可以到官网学习加油!
欢迎热爱学习的小伙伴加入下方微信群,死粉勿扰!
开心工作,快乐生活。财源广进,事事顺心。
在这里插入图片描述

  • 9
    点赞
  • 33
    收藏
    觉得还不错? 一键收藏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值