uni-app学习笔记 | 世外天堂

uni-app学习笔记

uni-app 跨平台框架官方教程
链接:https://ke.qq.com/course/343370

一、框架简介基础知识点

uniapp 生命周期
onLaunch 当 uniapp 初始化完成时进行触发,全局只触发一次
onShow 当 uniapp 启动或者从后台进入前台显示
onHide 当 uniapp 从前台进入后台
onUniNViewMessage 对 nvue 页面发送数据进行监听

uniapp 页面生命周期
https://uniapp.dcloud.io/frame
参看文档

路由
uni-app 有两种路由跳转方式:使用 navigator 组件跳转、调用 API 跳转。 1.打开新页面,页面重定向===》 调用 API uni.navigateTo 、使用组件 2.页面返回 调用 API uni.navigateBack 、使用组件 <navigator open-type=”navigateBack”/> 、用户按左上角返回按钮、安卓用户点击物理 back 按键

3.Tab 切换 调用 API uni.switchTab 、使用组件 <navigator open-type=”switchTab”/> 、用户切换 Tab

4.重加载 调用 API uni.reLaunch 、使用组件 <navigator open-type=”reLaunch”/>

Tips:

navigateTo, redirectTo 只能打开非 tabBar 页面。
switchTab 只能打开 tabBar 页面。
reLaunch 可以打开任意页面。
页面底部的 tabBar 由页面决定,即只要是定义为 tabBar 的页面,底部都有 tabBar。
不能在 App.vue 里面进行页面跳转。
页面样式与布局
uni-app 支持的通用 css 单位包括 px、upx、vh。
upx 是相对于基准宽度的单位,可以根据屏幕宽度进行自适应。uni-app 规定屏幕基准宽度 750upx。

upx2px
因为 upx 是编译器处理的,动态绑定 upx 不生效
可使用 uni.upx2px(Number) 转换为 px 后再赋值。
例如

1
return uni.upx2px(750 / 2) + 'px';

样式导入
使用@import 语句可以导入外联样式表,@import 后跟需要导入的外联样式表的相对路径,用;表示语句结束。

1
@import "../../common/uni.css";

内联样式
1.style:静态的样式统一写到 class 中。

1
<view :style="{color:color}" />

class:用于指定样式规则,其属性值是样式规则中类选择器名(样式类名)的集合,样式类名不需要带上.,样式类名之间用空格分隔。

1
<view class="normal_view" />

选择器
1 .class
2 #id
3 element 选择所有 view 组件

全局样式与局部样式
定义在 App.vue 中的样式为全局样式,作用于每一个页面。在 pages 目录下 的 vue 文件中定义的样式为局部样式,只作用在对应的页面,并会覆盖 App.vue 中相同的选择器。
注意: App.vue 中通过 @import 语句可以导入外联样式,一样作用于每一个页面。

CSS 变量

CSS变量 描述 5+App 小程序 H5
–status-bar-height 系统状态栏高度 系统状态栏高度 25px 0
–window-top 内容区域距离顶部的距离 0 0 NavigationBar的高度
–window-bottom 内容区域距离底部的距离 0 0 TabBar的高度

固定值
uni-app 中以下组件的高度是固定的,不可修改:

组件 描述 5+App H5
NavigationBar 导航栏 44px 44px
TabBar 底部选项卡 56px 50px

Flex 布局
为支持跨平台,框架建议使用 Flex 布局

背景图片
uni-app 支持使用在 css 里设置背景图片,使用方式与普通 web 项目相同,需要注意以下几点:

支持 base64 格式图片。
支持网络路径图片。
使用本地路径背景图片需注意:
图片小于 40kb,uni-app 会自动将其转化为 base64 格式;

图片大于等于 40kb, 需开发者自己将其转换为 base64 格式使用,或将其挪到服务器上,从网络地址引用。

本地背景图片的引用路径仅支持以 ~@ 开头的绝对路径(不支持相对路径)。

1
2
3
.test2 {
background-image: url('~@/static/logo.png');
}

字体图标
uni-app 支持使用字体图标,使用方式与普通 web 项目相同,需要注意以下几点:

支持 base64 格式字体图标。
支持网络路径字体图标。
网络路径必须加协议头 https。
http://www.iconfont.cn 上拷贝的代码,默认是没加协议头的。
uni-app 本地路径图标字体支持情况:
字体文件小于 40kb,uni-app 会自动将其转化为 base64 格式;

字体文件大于等于 40kb, 需开发者自己转换,否则使用将不生效;

字体文件的引用路径仅支持以 ~@ 开头的绝对路径(不支持相对路径)。

1
2
3
4
@font-face {
font-family: test1-icon;
src: url('~@/static/iconfont.ttf');
}

<template>和 <block>
uni-app 支持在 template 模板中嵌套 <template> 和 <block>,用来进行 列表渲染 和 条件渲染。

<template> 和 <block> 并不是一个组件,它们仅仅是一个包装元素,不会在页面中做任何渲染,只接受控制属性。

代码示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<template>
<view>
<template v-if="test">
<view>test 为 true 时显示</view>
</template>
<template v-else>
<view>test 为 false 时显示</view>
</template>
</view>
</template>
<template>
<view>
<block v-for="(item,index) in list" :key="index">
<view>{{item}} - {{index}}</view>
</block>
</view>
</template>

ES6 支持
uni-app 在支持绝大部分 ES6 API 的同时,也支持了 ES7 的 await/async。

NPM 支持
uni-app 支持使用 npm 安装第三方包。

TypeScript 支持
在 uni-app 中使用 ts 开发

小程序组件支持
uni-app 支持在 5+App 和小程序中使用小程序组件。

平台差异说明

平台 支持情况 小程序组件存放目录
H5 不支持
5+App 支持微信小程序组件 wxcomponents
微信小程序 支持微信小程序组件 wxcomponents
支付宝小程序 支持支付宝小程序组件 mycomponents
百度小程序 支持百度小程序组件 swancomponents

二、vue 使用注意事项

uni-app 在发布到 H5 时支持所有 vue 的语法;发布到 App 和小程序时,由于平台限制,无法实现全部 vue 语法,但 uni-app 仍是是对 vue 语法支持度最高的跨端框架。本文将详细讲解差异。

生命周期
uni-app 完整支持 Vue 实例的生命周期,同时还新增 应用生命周期 及 页面生命周期。

详见 Vue 官方文档:生命周期钩子。

注意

不要在选项属性或回调上使用箭头函数,比如 created: () => console.log(this.a) 或 vm.$watch(‘a’, newValue => this.myMethod())。因为箭头函数是和父级上下文绑定在一起的,this 不会是如你做预期的 Vue 实例,且 this.a 或 this.myMethod 也会是未定义的。
建议使用 uni-app 的 onReady 代替 vue 的 mounted。
建议使用 uni-app 的 onLoad 代替 vue 的 created。
模板语法
uni-app 完整支持 Vue 模板语法。

详见 Vue 官方文档:模板语法。

注意 如果使用老版的非自定义组件模式,即 manifest 中”usingComponents”:false,部分模版语法不支持,但此模式已不再推荐使用,详见。

老版非自定义组件模式不支持情况:

不支持纯 HTML
不支持部分复杂的 JavaScript 渲染表达式
不支持过滤器
data 属性
data 必须声明为返回一个初始数据对象的函数;否则页面关闭时,数据不会自动销毁,再次打开该页面时,会显示上次数据。

1
2
3
4
5
6
//正确用法,使用函数返回对象
data() {
return {
title: 'Hello'
}
}
1
2
3
4
//错误写法,会导致再次打开页面时,显示上次数据
data: {
title: 'Hello'
}

全局变量
实现全局变量的方式需要遵循 Vue 单文件模式的开发规范。详细参考:uni-app 全局变量的几种实现方式

lass 支持的语法:

1
2
3
4
5
<view :class="{ active: isActive }">111</view>
<view class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }">222</view>
<view class="static" :class="[activeClass, errorClass]">333</view>
<view class="static" v-bind:class="[isActive ? activeClass : '', errorClass]">444</view>
<view class="static" v-bind:class="[{ active: isActive }, errorClass]">555</view>

style 支持的语法:

1
2
<view v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">666</view>
<view v-bind:style="[{ color: activeColor, fontSize: fontSize + 'px' }]">777</view>

非 H5 端不支持 Vue 官方文档:Class 与 Style 绑定 中的 classObject 和 styleObject 语法。

不支持示例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<template>
<view :class="[activeClass]" :style="[baseStyles,overridingStyles]"></view>
</template>

<script>
export default {
data() {
return {
activeClass: {
'active': true,
'text-danger': false
},
baseStyles: {
color: 'green',
fontSize: '30px'
},
overridingStyles: {
'font-weight': 'bold'
}
}
}
}
</script>

注意:以:style=””这样的方式设置 px 像素值,其值为实际像素,不会被编译器转换。

此外还可以用 computed 方法生成 class 或者 style 字符串,插入到页面中,举例说明:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<template>
<!-- 支持 -->
<view class="container" :class="computedClassStr"></view>
<view class="container" :class="{active: isActive}"></view>
<!-- 不支持 -->
<view class="container" :class="computedClassObject"></view>
</template>
<script>
export default {
data () {
return {
isActive: true
}
},
computed: {
computedClassStr () {
return this.isActive ? 'active' : ''
},
computedClassObject () {
return { active: this.isActive }
}
}
}

</script>

用在组件上

非 H5 端暂不支持在自定义组件上使用 Class 与 Style 绑定

计算属性
完整支持 Vue 官方文档:计算属性。

条件渲染
完整支持 Vue 官方文档:条件渲染

列表渲染
完整 vue 列表渲染 Vue 官方文档:列表渲染

key
如果列表中项目的位置会动态改变或者有新的项目添加到列表中,并且希望列表中的项目保持自己的特征和状态(如 <input> 中的输入内容,<switch> 的选中状态),需要使用 :key 来指定列表中项目的唯一的标识符。

:key 的值以两种形式提供

使用 v-for 循环 array 中 item 的某个 property,该 property 的值需要是列表中唯一的字符串或数字,且不能动态改变。
使用 v-for 循环中 item 本身,这时需要 item 本身是一个唯一的字符串或者数字
当数据改变触发渲染层重新渲染的时候,会校正带有 key 的组件,框架会确保他们被重新排序,而不是重新创建,以确保使组件保持自身的状态,并且提高列表渲染时的效率。

如不提供 :key,会报一个 warning, 如果明确知道该列表是静态,或者不必关注其顺序,可以选择忽略。

注意:

事件映射表中没有的原生事件也可以使用,例如 map 组件的 regionchange 事件直接在组件上写成 @regionchange,同时这个事件也非常特殊,它的 event type 有 begin 和 end 两个,导致我们无法在 handleProxy 中区分到底是什么事件,所以你在监听此类事件的时候同时监听事件名和事件类型既 <map @regionchange=”functionName” @end=”functionName” @begin=”functionName”>
为兼容各端,事件需使用 v-on 或 @ 的方式绑定,请勿使用小程序端的 bind 和 catch 进行事件绑定。
事件修饰符
.stop:各平台均支持, 使用时会阻止事件冒泡,在非 H5 端同时也会阻止事件的默认行为
.prevent 仅在 H5 平台支持
.self:仅在 H5 平台支持
.once:仅在 H5 平台支持
.capture:仅在 H5 平台支持
.passive:仅在 H5 平台支持
若需要禁止蒙版下的页面滚动,可使用 @touchmove.stop.prevent=”moveHandle”,moveHandle 可以用来处理 touchmove 的事件,也可以是一个空函数。

1
<view class="mask" @touchmove.stop.prevent="moveHandle"></view>

按键修饰符:uni-app 运行在手机端,没有键盘事件,所以不支持按键修饰符。

表单控件绑定
支持 Vue 官方文档:表单控件绑定。

建议开发过程中直接使用 uni-app:表单组件。

组件
Vue 组件
组件是整个 Vue.js 中最复杂的部分,支持 Vue 官方文档:组件 。

有且只能使用单文件组件(.vue 组件)的形式进行支持。其他的诸如:动态组件,自定义 render,和<script type=”text/x-template”> 字符串模版等非 H5 端都不支持。

uni-app 组件
uni-app 提供了丰富的 UI 组件,比如: picker,map 等,需要注意的是原生组件上的事件绑定,需要以 vue 的事件绑定语法来绑定,如 bindchange=”eventName” 事件,需要写成 @change=”eventName”

示例

1
2
<picker mode="date" :value="date" start="2015-09-01" end="2017-09-01" @change="bindDateChange">
<view class="picker">

当前选择: date


全局组件
uni-app 支持配置全局组件,需在 main.js 里进行全局注册,注册后就可在所有页面里使用该组件。

注意:Vue.component 的第一个参数必须是静态的字符串。

示例

main.js 里进行全局注册

1
2
3
import Vue from 'vue'
import pageHead from './components/page-head.vue'
Vue.component('page-head',pageHead)

index.vue 里可直接使用组件

1
2
3
4
5
<template>
<view>
<page-head></page-head>
</view>
</template>

常见问题
如何获取上个页面传递的数据
如何设置全局的数据和全局的方法
如何捕获 app 的 onError
组件属性设置不生效解决办法
使用nvue Weex注意事项
使用HTML5+注意事项
条件编译
条件编译是里用特殊的注释作为标记,在编译时根据这些特殊的注释,将注释里面的代码编译到不同平台。

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

API 的条件编译
// #ifdef %PLATFORM%
平台特有的 API 实现
// #endif
组件的条件编译
pages.json 的条件编译
static 目录的条件编译 +性能优化建议
+uni-app 跨端开发注意事项 +高效开发技巧

使用代码块直接创建组件模板
为提升开发效率,HBuilderX 将 uni-app 常用代码封装成了以 u 开头的代码块,如在 template 标签内输入 ulist 回车,会自动生成如下代码:

1
2
3
4
5
6
7
<view class="uni-list">
<view class="uni-list-cell">
<view class="uni-list-cell-navigate uni-navigate-right" v-for="(item,index) in list" :key="index">
{{item.value}}
</view>
</view>
</view>

代码块分为Tag代码块、JS代码块,如在 script 标签内输入 uShowToast 回车,会自动生成如下代码:

1
2
3
4
5
uni.showToast({
title: '',
mask: false
duration: 1500
});

uni-app 已支持代码块见下方列表。

Tag 代码块

1
2
3
4
5
6
7
uButton
uCheckbox
uGrid
uList
uListMedia
uRadio
uSwiper

JS 代码块

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
uRequest
uGetLocation
uShowToast
uShowLoading
uHideLoading
uShowModal
uShowActionSheet
uNavigateTo
uNavigateBack
uRedirectTo
uStartPullDownRefresh
uStopPullDownRefresh
uLogin
uShare
uPay

uni-app App 整包升级检测: https://ask.dcloud.net.cn/article/34972

uni-app 资源热更新: https://ask.dcloud.net.cn/article/35667

uni-app 导航栏开发指南: https://ask.dcloud.net.cn/article/34921

uni-app 实现全局变量: https://ask.dcloud.net.cn/article/35021

微信小程序转换 uni-app 指南:https://ask.dcloud.net.cn/article/35786

mpvue 项目(组件)迁移指南、示例及资源汇总: https://ask.dcloud.net.cn/article/34945

uni-app 引用 npm 第三方库: https://ask.dcloud.net.cn/article/19727

uni-app 中使用微信小程序第三方 SDK 及资源汇总:https://ask.dcloud.net.cn/article/35070

uni-app 中使用 5+ 的原生界面控件(包括 map、video、livepusher、barcode、nview):https://ask.dcloud.net.cn/article/35036

uni-app 的 H5 版使用注意事项:https://ask.dcloud.net.cn/article/35232

uni-app 各环节(HBuilderX、cli、自定义基座、本地 sdk、云打包引擎)版本兼容性说明:https://ask.dcloud.net.cn/article/35845

uni-app 中选择和上传非图像、视频文件:https://ask.dcloud.net.cn/article/35547

=============================================

模版语法和数据绑定
实例 1.请求数据,把数据 data 存储入 news 数组,页面模版自动刷新列表

1
2
3
4
5
6
7
8
9
10
11
uni.request({
url: 'https://unidemo.dcloud.net.cn/api/news',
method: 'GET',
data: {},
success: res => {
console.log(res);
this.news = res.data;
},
fail: () => {},
complete: () => {}
});

2.点击传入文章 id,通过 uni.navigateTo url+id 打开文章页

1
2
3
4
5
6
7
8
9
10
@tap="tapnews" :data-newsid="item.post_id"

tapnews(e){
console.log(e);
var newsids= e.currentTarget.dataset.newsid;
console.log(newsids);
uni.navigateTo({
url: '../info/info?newsid='+ newsids
});
}

3.显示文章页面

1
2
3
4
5
6
7
8
9
10
11
12
13
uni.request({
url: 'https://unidemo.dcloud.net.cn/api/news/36kr/'+ e.newsid,
method: 'GET',
data: {},
success: res => {
this.title = res.data.title;
this.strings = res.data.content;
console.log(strings);
uni.hideLoading();
},
fail: () => {},
complete: () => {}
});
  1. 根目录的 pages.json 严格模式可以跳转自定义页面测试
    1
    2
    3
    4
    5
    6
    7
    8
    9
    "condition": { //模式配置,仅开发期间生效
    "current": 0, //当前激活的模式(list 的索引项)
    "list": [{
    "name": "news", //模式名称
    "path": "pages/info/info", //启动页面,必选
    "query": "newsid=5196737" //启动参数,在页面的 onLoad 函数里面得到。
    }
    ]
    }