uni-app一课一得

框架

uni-app 是一个使用 Vue.js (opens new window)开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。

开发工具

Hbuilder X 微信开发者工具 vscode

uni-app的开发结构

 pages目录： 存放页面

static目录：存放静态资源

App.vue文件：项目根组件

main.js文件：项目的入口文件，也就是项目加载时，先加载main.js文件

pages.json文件：配置页面的路由、底部导航、顶部标题按钮搜索框等页面类信息

uni.scss文件：配置一些样式

pages.json配置

"enablePullDownRefresh": true 开启下拉刷新功能

pages.json下的 配置基本的tabbar

配置如图：

 效果如图：

 

 基础组件

swiper 用来写轮播图，swiper-item就是每一个图片，可以设置是否自动滚动，间隔时长，是否显示指示点，甚至可以改成竖向滚

navigator 跳转组件，相当于js中的uni.navigateTo方法，只要设置跳转的url即可点击跳转新页面

uni.setStorage和uni.getStorage 是存取本地数据

uni.request 是请求网络

uni.showLoading uni.showToast uni.showModel 分别是加载框，提示框和弹窗

text组件 的基本使用

uniapp的一些组件，就像HTML中的div,p,span等标签作用一样，用于搭建页面的基本结构

text组件案例：

关于样式

 rpx：响应式px，一种根据屏幕宽度自适应的动态单位。 如果屏幕宽度发生变化rpx的数据也会随着变化。

uni-app支持基本常用的选择器，class类选择器，id选择器等。

@import url(“xxx”) 导入外联样式表信息

如图:

uniapp的数据绑定

和Vue一模一样。 插值语法 ， data函数是定义参数等等。

uni-app的生命周期

onLaunch 当uni-app 初始化完成时触发（全局只触发一次）

onShow 当 uni-app 启动，或从后台进入前台显示

onHide 当 uni-app 从前台进入后台

onError 当 uni-app 报错时触发

onUniNViewMessage 对 nvue 页面发送的数据进行监听，可参考 nvue 向 vue 通讯

onUnhandledRejection 对未处理的 Promise 拒绝事件监听函数（2.8.1+）

onPageNotFound 页面不存在监听函数

onThemeChange 监听系统主题变化

 

 页面对应的生命周期函数：

最重要的是onLoad，能拿到上个页面传递的数据。 注意tabbar的页面展示过一次后就保留在内存中。再次切换tabbar页面，只会触发每个页面的onShow，不会再触发onLoad函数。

 总结

总体来说，uni-app门槛很低，基本有个开发基础的就可以实现，但是要缩短开发时间，提高开发质量，还是需要多加练习。