- 环境搭建
- 页面外观配置
- 数据绑定
- uni-app的生命周期
- 组件的使用
- 条件注释跨端兼容
- uni-app的事件
- 导航跳转
- 组件创建和通信
1 uni-app简介
1.1 简介
uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉）等多个平台。官网：https://uniapp.dcloud.io/
1.2 环境搭建
（1）安装编辑器Hbuilder，地址：https://www.dcloud.io/hbuilderx.html ，推荐下载版本为App开发版
（2）微信开发者工具下载，地址：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
注意：如果是第一次使用，需要先配置小程序ide的相关路径，才能运行成功。需在输入框输入微信开发者工具的安装路径。如果提示工具的服务端口已关闭。要使用命令行调用工具，请打开工具 -> 设置 -> 安全设置，将服务端口开启
1.3 开发规范
为了实现多端兼容，综合考虑编译速度、运行性能等因素，uni-app 约定了如下开发规范：
- 页面文件遵循 Vue 单文件组件 (SFC) 规范
- 组件标签靠近小程序规范，详见uni-app 组件规范
- 接口能力（JS API）靠近微信小程序规范，但需将前缀 wx 替换为 uni，详见uni-app接口规范
- 数据绑定及事件处理同 Vue.js规范，同时补充了App及页面的生命周期
- 为兼容多端运行，建议使用flex布局进行开发
1.4 目录结构
pages：业务页面文件存放的目录
components：组件存放目录
static：静态资源存放目录，如图片等
unpackage：打包目录，在这里有各个平台的打包文件
App.vue：应用配置，用来配置App全局样式以及监听应用生命周期
main.js：Vue初始化入口文件
manifest.json：配置应用名称、appid、logo、版本等打包信息
pages.json：用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等
uni.scss：方便总体控制应用风格。比如按钮颜色，边框风格。内置了常用样式变量
1.4 配置
1.1 pages.json
1：globalStyle
2：pages
- pages节点的第一项为应用入口页（即首页）
- 应用中新增/减少页面，都需要对 pages 数组进行修改
- 文件名不需要写后缀，框架会自动寻找路径下的页面资源
3：tabBar
- 当设置 position 为 top 时，将不会显示 icon(top 值仅微信小程序支持)
- tabBar 中的 list 是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序。
2 组件简介
1.1 view
1.2 text
1.3 button
1.4 image
3 uniapp中的样式
尺寸单位
uni-app 支持的通用 css 单位包括 px、rpx
- px 即屏幕像素
- rpx 即响应式px，一种根据屏幕宽度自适应的动态单位。以750宽的屏幕为基准，750rpx恰好为屏幕宽度。屏幕变宽，rpx 实际显示效果会等比放大。
样式导入
使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束。定义在 App.vue 中的样式为全局样式
选择器
支持.class、#id、element选择器等
4 uniapp中的数据绑定
在页面中需要定义数据，和之前vue中一样，直接在data中定义数据即可
export default {
data() {
return {
msg: 'hello',
flag: true,
imgUrl: 'http://destiny001.gitee.io/image/monkey_02.jpg',
arr: [
{
id:1,
name:'张三',
age: 20
},
{
id:2,
name:'李三',
age: 30
},
{
id:3,
name:'德三',
age: 40
}
]
}
}
}
4.1插值表达式的使用
- 利用插值表达式渲染基本数据
<view>{{msg}}</view>
- 基本运算
<view>{{1+1}}</view>
- 插值表达式中使用三元运算
<view>{{flag?'真的':'假的'}}</view>
4.2v-bind
<image :src="imgUrl"></image>
4.2v-for
<view v-for="(item,index) in arr" :key="item.id">
序号：{{index}},姓名：{{item.name}},年龄：{{item.age}}
</view>
5 uniapp中的事件
5.1事件绑定和传参
和vue中是一样的，使用v-on进行绑定
<button type="primary" @click="clickHandle">按钮</button>
methods: {
clickHandle(num,e) {
console.log(num, e)
}
}
默认如果没有传递参数，事件函数第一个形参为事件对象。如果有参数还想获取事件对象可以在参数后加入$event
<button type="primary" @click="clickHandle(10,$event)">按钮</button>
methods: {
clickHandle(num,e) {
console.log(num, e)
}
}
6 生命周期
6.1 应用生命周期
6.2页面生命周期
- onPullDownRefresh 监听用户下拉动作，一般用于下拉刷新
- onReachBottom 页面上拉触底事件的处理函数(pages.json里的onReachBottomDistance 页面上拉触底事件触发时距页面底部距离)
7 网络请求
uni.request
8 数据缓存
- 异步方法：
uni.setStorage
uni.getStorage
uni.removeStorage
- 同步方法：
网友评论