uni-app开发之二uni-app开发流程及常用组件讲解

1字数 2581阅读 6630

上一篇我们讲了uni-app的各种优缺点,接下来我们要讲一下uni-app的开发流程和一些常用组件。此篇文章为uni-app基础篇,如果你是uni-app开发大神可以忽略此篇文章,当然如果您发现了文章的不足也请您不吝指出。

一:uni-app开发流程

(一)首先我们需要HBX,如果还没有HBX的同学,请自行点击以下链接进行下载:HBX下载地址

接下来如果你已经安装了HBX,请继续往下看。

HBX体量很小,不需要安装就可以使用,下载完成后直接解压,进入文件夹找到HBX图标双击就可以愉快的和它玩耍了。打开HBX后选择文件->新建->项目,选择uni-app项目,然后给你的项目命名,并选择模板,如果你已经有过开发经验可以自信的选择默认模板,当然如果你是萌新可以选择hello uni-app模板,里面有一些封装好的组件和css样式可以直接供你使用。选择好模板以后点击创建,一个uni-app项目就这样出现在了你的编辑器里啦,可以说我们已经走完了伟大的第一步,然后可能会有同学要问了,那我的项目是存在哪里的呢,那让我来告诉你,在你创建项目的时候里面有一个默认的存储位置。如果你没有注意的话,建议你重新建一个项目然后把它记住(偷笑)。

(二)接下来我们要讲的是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- 配置页面的路由、导航条、选项卡等页面类信息

(三)应用的生命周期及页面的生命周期

应用的生命周期可以在app.vue里面进行配置:

onLaunch:应用初始化完成时触发,全局只触发一次。可以做一些业务逻辑的判断,比如区分开发环境然后调用不同服务器的接口(本地开发时配置测试服务器的域名,生产环境下配置成线上服务器的域名)具体的一些处理细节会在以后的文章中详细介绍。

onShow:当应用启动或者,从后台进入前台时触发。

onHide:当应用从前台进入后台时触发。

onUniNViewMessage: 对nvue(nativevue)页面发送的数据进行监听。

页面的生命周期可以在每个业务页面里面配置:

onLoad:页面加载时触发,可以用来在页面之间传参,具体的一些处理会在以后的文章详细介绍。

onShow:页面显示时触发

onReady:页面初次渲染完成时触发

onHide:页面隐藏时触发

onUnload:页面卸载时触发

onPullDownRefresh:用户下拉时触发

onReachBottom:页面上拉触底时触发

onNavigationBarButtonTap: 原生标题栏点击时触发,可以用于分享app等功能,详细介绍会在后面的文章中介绍

onBackPress:页面返回时触发

如果你用过或者学过vue,那你有可能要问我了vue的生命周期在uni-app里面是否支持呢,答案是当然是支持啦,不过如果你写的是uni-app应用还是建议用onLoad代替created,用onReady代替mounted。

(四)关于样式

uni-app因为要适配不同端,所以使用的布局方式都是flex布局,关于flex如果你还不是太理解建议你去看看阮一峰的博客,讲解的很到位,在这里就不赘述了,不过有一点要跟大家说,在uni-app里都是使用upx来代替px作为单位的。

upx 是相对于基准宽度的单位,可以根据屏幕宽度进行自适应。uni-app 规定屏幕基准宽度750upx。另外页面元素宽度在 uni-app 中的宽度计算公式为:750 * 元素在设计稿中的宽度 / 设计稿基准宽度

(五)条件编译

这也是uni-app的一大亮点,有了它可以在你的项目里优雅的实现平台个性化

条件编译是用特殊的注释作为标记,在编译时根据这些特殊的注释,将注释里面的代码编译到不同平台。

写法:以 #ifdef 或 #ifndef 加 %PLATFORM% 开头,以 #endif 结尾。

 %PLATFORM% 的可选值为:APP-PLUS(5+APP),APP-PLUS-NVUE(5+app,nvue),H5(H5),MP-WEIXIN(微信小程序),MP-ALIPAY(支付宝小程序),MP-BAIDU(百度小程序),MP(微信小程序/支付宝小程序/百度小程序)。

二:uni-app常用组件讲解

如果你做过微信小程序的话会发现uni-app封装的组件和微信小程序组件几乎一毛一样。在此我不会全部讲解,我只讲几个我常用的组件。关于其他的组件大家可以去uni-app官网自行查看

(一)最基础的视图容器:view

在uni-app里用view代替div作为基础视图容器,如果你在项目中使用了div它也会在编译的时候帮你编译成view,

view一共有四种属性:

hover-class:指定按下去的样式类,默认为none,当其为none是没有点击态效果

hover-stop-propagation:指定是否阻止本节点的祖先节点出现点击态,其类型为布尔值,默认值为false

hover-start-time:按住后多久出现点击态,单位为毫秒,默认为400ms

hover-stay-time:手指松开后点击态保留的时间,单位为毫秒,默认为50ms

(二)最基础的表单组件:button

button一共有十一种属性:

size:按钮的大小,它有两个有效值:default,mini

type:按钮的样式类型,它有三个有效值:primary(app下为蓝色,微信小程序下为绿色),default,warn

plain:按钮是否为镂空,背景色透明,默认为false

disabled:是否禁用按钮,默认为false

loading:名称前是否带 loading 图标,默认为false

form-type:用于 <form> 组件,点击分别会触发 <form> 组件的 submit/reset 事件,可选值为submit/reset

open-type:开放能力,有效值为feedback(打开“意见反馈”页面,用户可提交反馈内容并上传日志,在app及小程序下可用),share(触发用户转发,微信小程序下可用),getUserInfo(获取用户信息,可以从@getuserinfo回调中获取到用户信息,在微信小程序下可用)

hover-class:指定按下去的样式类,默认为button-hover,当其为none是没有点击态效果,button-hover 默认为 {background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;}

hover-start-time:按住后多久出现点击态,单位为毫秒,默认为20ms

hover-stay-time:手指松开后点击态保留的时间,单位为毫秒,默认为70ms

@getuserinfo:用户点击该按钮时,会返回获取到的用户信息,从返回参数的detail中获取到的值同uni.getUserInfo,只有在微信小程序下好用。

(三)web-view

这个组件是我要重点讲的组件,如果你以前做过很多H5页面想直接把它嵌套到app里,那这个组件便派上用场啦。

它的属性一共有三种:

src:webview 指向网页的链接

webview-styles: webview 的样式

@message: 网页向应用 postMessage 时,会在特定时机(后退、组件销毁、分享)触发并收到消息。

接下来要说的是重点-请拿好小本本记下来。在uni-app项目里,它赋予了web-view嵌套的页面一些使用uni-appAPI的能力,首先你要改造一下你的H5页面在,H5页面中引入以下代码:

<!-- 微信 JS-SDK 如果不需要兼容微信小程序,则无需引用此 JS 文件。 -->

<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>

<!-- 支付宝的 JS-SDK 防止 404 需要动态加载,如果不需要兼容支付宝小程序,则无需引用此 JS 文件。 --><script type="text/javascript"> if (navigator.userAgent.indexOf('AlipayClient') > -1) { document.writeln('<script src="https://appx/web-view.min.js"' + '>' + '<' + '/' + 'script>'); }</script>

<!-- 百度 JS-SDK 如果不需要兼容百度小程序,则无需引用此 JS 文件。 -->

<script type="text/javascript" src="https://b.bdstatic.com/searchbox/icms/searchbox/js/swan-1.7.0.js"></script>

<!-- uni 的 SDK -->

<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.0.2.2.js"></script>

待H5触发 UniAppJSBridgeReady 事件后,即可调用 uni 的 API。

<script>

document.addEventListener('UniAppJSBridgeReady',function(){

uni.postMessage({data:{action:'message'}});uni.getEnv(function(res){

console.log('当前环境:'+JSON.stringify(res));

});

});

</script>

好了,今天先介绍到这里吧,下一讲,讲一讲uni-app的API及我在做uni-app时遇到的坑,以及填坑的经历(干货呦),希望大家多多支持噢,一起进步。如果有什么不明白的地方可以在文章下方留言一起讨论噢,哈哈。

推荐阅读更多精彩内容