30分钟快速上手Uni-app小程序开发

个人学习笔记：Uni-app开发入门

学前准备工具

在开始学习之前，我们需要准备好以下工具：

• 编译器hbx：用于编译项目。
• 微信开发者工具：用于开发和调试微信小程序。

什么是Uni-app

Uni-app是一个基于Vue.js的前端应用开发框架，它允许开发者编写一套代码，然后发布到iOS、Android、H5以及各种小程序平台（如微信、支付宝等）。

入门案例

创建一个项目

编译运行项目

编译并运行项目时，如果需要运行小程序，记得打开微信开发者工具并确保服务端口已启动。

好，这里就成功编译运行成功了。

文件目录介绍

以下是Uni-app项目中常见的文件目录结构：

• unpackage：编译后的源代码目录，包含不同平台的编译代码。
• components：存放项目中的公共组件，可在不同页面复用。
• pages：存放各个页面的目录，每个页面通常包含一个.vue文件。
• static：存放静态资源文件，如图片、字体等。
• App.vue：应用的配置文件，配置全局样式、生命周期等。
• main.js：Vue初始化入口文件，进行全局配置和插件引入。
• manifest.json：应用配置文件，配置应用名称、图标、权限等。
• pages.json：页面配置文件，配置页面路径、顶部导航栏样式等。
• uni.scss：全局样式文件，定义全局样式变量、函数等。

全局配置和页面配置

通过globalStyle进行全局配置，设置应用的状态栏、导航条、标题、窗口背景色等。

另外补充一个，常用的操作："navigationStyle": "custom" // 可自定义顶部样式，如图下面的样式：

创建新的message页面

在pages目录下新建message目录，并在其中创建一个新的.vue文件。注意，页面名称后面不能带后缀，否则会报错。

配置Tabbar

如果应用是多tab应用，可以通过tabBar配置项指定tab栏的表现和tab切换时显示的对应页。

条件启动模式配置

启动模式配置仅在开发期间生效，用于模拟直达页面的场景。

启动模式配置，仅开发期间生效，用于模拟直达页面的场景，如：小程序转发后，用户点击所打开的页面。

组件的基本使用

Uni-app提供了丰富的基础组件，开发者可以像搭积木一样组合各种组件构建应用。

组件示例

• view组件：类似于HTML中的div组件，是块级组件。
• button组件：常用于创建按钮。
• image组件：用于显示图片，mode属性中的aspectfit和aspectfill使用较多。

view组件，它类似于HTML当中的div组件：

块级组件，会自动换行：

 

hover-stop-propagation 防止冒泡；

hover-start-time 按住之后多久时间触发；

 

 

button按钮组件的常用用法:

 

 

 

 

image组件的使用

mode中的aspectfit和aspectfill用的比较多。

uni-app中的样式

支持外联样式导入，全局样式在app.vue的style标签内定义。

外联的样式导入，支持相对路径。

 

 

全局样式：

在app.vue的style里面写的，就是全局样式，当然局部样式自己的样式，是优先的。

在uni-app使用制字体图标：

在app.vue导入全局的iconfont，这个可以去阿里巴巴矢量图下载；

还有一种就是用 uni.scss的颜色变量，这是scss的一个操作；

直接将变量拿来用，就是让代码写的更优雅，更容易维护。

数据绑定

在页面中定义数据，与Vue 3一致，直接在data中定义即可，不过不建议和这里一样，建议直接将setup写在script标签内 要不然还需要return返回，特别麻烦~~~

都是vue的知识点，问题不大，上手很快。

uni-app的生命周期

生命周期是指一个对象从创建、运行到销毁的整个过程。Uni-app支持多种应用生命周期函数。

下拉刷新

开启下拉刷新功能，触发onPullDownRefresh方法。

一旦下拉就会触发onPullDownRefresh方法

在uni-app中有两种方式开启下拉刷新

• 需要在 pages.json 里，找到的当前页面的pages节点，并在 style 选项中开启 enablePullDownRefresh

更新完毕之后，需要关闭一直刷新的

上拉加载

通过监听onReachBottom触底行为，触发加载更多数据。

通过onReachBottom监听到触底的行为

 

与下拉刷新同函数级别，页面触底就触发

 

 

通过在pages.json文件中找到当前页面的pages节点下style中配置onReachBottomDistance可以设置距离底部开启加载的距离，默认为50px

 

这个主要用来做，可以继续加载下面的数据。

 

这里尝试一下

 

然后，就能够看到，刷新到距离200px的时候，就会加载新的数据了。

网络请求

使用uni.request方法进行网络请求，注意小程序中需要配置域名白名单。

uni.request();

url 是开发者服务器接口地址

data 请求参数

header  请求头

success 收到开发者服务成功返回的回调函数

这些是必用的。

在h5发现，有跨域的问题：

如何解决，在我另外一个笔记里。

数据缓存

使用uni.setStorage进行数据缓存，这是异步操作。还有同步方法uniStorageSync和清除所有缓存的方法uni.clearStorage。

uni.setStorage来存取缓存数据;

这是异步的操作

还有一种sync的方法,这是获取数据同步的接口

还有是一个clearStoreage 清除所有，基本上不用。

图片上传和预览

使用uni.chooseFile选择文件，然后使用相关API进行图片预览。

最后代码展示：

然后是图片预览的api：

urls放图片数组，current 当前图片链接

条件注释实现跨段兼容

条件编译允许在编译时根据不同平台的标识，将特定代码编译到不同平台。

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

**写法：**以 #ifdef 加平台标识 开头，以 #endif 结尾。

平台标识

代码展示：

灵机一动，是不是可以用这种办法，来解决微信端请求和H5请求的问题。

果然在\(^o^)/~

微信小程序端

以及h5端，都成功请求到了网络：

导航跳转

Uni-app支持编程式跳转和声明式跳转，类似于HTML中的a标签。

1、利用navigator进行跳转

2、navigator详细文档：文档地址

有两种，编程式跳转 和 声明式跳转

感觉有点像a标签呢，这个是

想要跳转到table-bar 页面就要设置open-type="switchTab"

感觉bug要满天飞了。

不加上就会报这个错误,fail can not navigateTo a tabbar page….

编程式导航：

如果要跳转至信息页，有switchTab的，

就需要如何定义？

同样的redirectTo({})

uni-app中组件的创建

在Uni-app中，创建组件与Vue相似，通过创建.vue文件并注册组件即可。

在uni-app中，可以通过创建一个后缀名为vue的文件，即创建一个组件成功，其他组件可以将该组件通过impot的方式导入，在通过components进行注册即可

这个和vue的生命周期，蛮像的。

通讯传递

组件间的通讯与Vue相同，支持父子组件和兄弟组件间的传递。

父给子传递：

 

这里通过title传递一个字符串到test子组件之中，

 

 

子给父传递：

 

兄弟组件传递：

 

uni.$emit(事件名, {携带的附加参数});

uni.$on()

 

 

在a.vue组件中：

 

在b.vue组件中：

Uni.UI

Uni.UI是一个基于Vue的UI库，提供了一套跨全端的UI框架组件。

这里稍微介绍一下，Uni.UI 是基于vue组件，flex布局，无dom的跨全端的UI框架组件。

 

 

直接下载导入插件，就OK了。

 

 

 

 

用法，往下拖就行了：

 

 

 

 

总结

如果你熟悉Vue，上手Uni-app会非常快。希望这份学习笔记对你有所帮助！