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

╰半橙微兮° 2023-05-31 06:42 18阅读 0赞

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

**一：uni-app开发流程**

（一）首先我们需要HBX，如果还没有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：用于 组件，点击分别会触发 组件的 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页面中引入以下代码:

<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
    
    <script type="text/javascript"> if (navigator.userAgent.indexOf('AlipayClient') > -1) { document.writeln('<script src="https://appx/web-view.min.js"' + '>' + '<' + '/' + 'script>'); }</script>
    
    
    
    <script type="text/javascript" src="https://b.bdstatic.com/searchbox/icms/searchbox/js/swan-1.7.0.js"></script>
    
    
    
    <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。**

[HBX]: https://www.dcloud.io/hbuilderx.html