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 、使用组件 、用户按左上角返回按钮、安卓用户点击物理back按键

3.Tab 切换 调用 API uni.switchTab 、使用组件 、用户切换 Tab

4.重加载 调用 API uni.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 后再赋值。
例如

return uni.upx2px(750 / 2) + ‘px’;
样式导入
使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束。

@import “…/…/common/uni.css”;
内联样式
1.style：静态的样式统一写到 class 中。

class：用于指定样式规则，其属性值是样式规则中类选择器名(样式类名)的集合，样式类名不需要带上.，样式类名之间用空格分隔。 选择器 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格式使用，或将其挪到服务器上，从网络地址引用。

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

.test2 {
background-image: url(’~@/static/logo.png’);
}
字体图标
uni-app 支持使用字体图标，使用方式与普通 web 项目相同，需要注意以下几点：

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

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

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

@font-face {
font-family: test1-icon;
src: url(’~@/static/iconfont.ttf’);
}
和
uni-app 支持在 template 模板中嵌套 和 ，用来进行 列表渲染 和 条件渲染。

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

代码示例

test 为 true 时显示 test 为 false 时显示 { {item}} - { {index}} 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 必须声明为返回一个初始数据对象的函数；否则页面关闭时，数据不会自动销毁，再次打开该页面时，会显示上次数据。

//正确用法，使用函数返回对象
data() {
return {
title: ‘Hello’
}
}

//错误写法，会导致再次打开页面时，显示上次数据
data: {
title: ‘Hello’
}
全局变量
实现全局变量的方式需要遵循 Vue 单文件模式的开发规范。详细参考：uni-app全局变量的几种实现方式

lass 支持的语法:

111
222
333
444
555
style 支持的语法:

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

不支持示例：

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

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

<!-- 不支持 -->
<view class="container" :class="computedClassObject"></view>

用在组件上

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

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

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

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

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

:key 的值以两种形式提供

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

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

注意：

事件映射表中没有的原生事件也可以使用，例如map组件的regionchange 事件直接在组件上写成 @regionchange,同时这个事件也非常特殊，它的 event type 有 begin 和 end 两个，导致我们无法在handleProxy 中区分到底是什么事件，所以你在监听此类事件的时候同时监听事件名和事件类型既 <map @regiοnchange=“functionName” @end=“functionName” @begin=“functionName”>

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

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

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

有且只能使用单文件组件（.vue 组件）的形式进行支持。其他的诸如：动态组件，自定义 render，和

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

示例

<picker mode=“date” :value=“date” start=“2015-09-01” end=“2017-09-01” @change=“bindDateChange”>

当前选择: { {date}}


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

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

示例

main.js 里进行全局注册

import Vue from ‘vue’
import pageHead from ‘./components/page-head.vue’
Vue.component(‘page-head’,pageHead)
index.vue 里可直接使用组件

常见问题 如何获取上个页面传递的数据 如何设置全局的数据和全局的方法 如何捕获 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 回车，会自动生成如下代码：

{ {item.value}} 代码块分为Tag代码块、JS代码块，如在 script 标签内输入 uShowToast 回车，会自动生成如下代码：

uni.showToast({
title: ‘’,
mask: false
duration: 1500
});
uni-app已支持代码块见下方列表。

Tag代码块

uButton
uCheckbox
uGrid
uList
uListMedia
uRadio
uSwiper
JS代码块

uRequest
uGetLocation
uShowToast
uShowLoading
uHideLoading
uShowModal
uShowActionSheet
uNavigateTo
uNavigateBack
uRedirectTo
uStartPullDownRefresh
uStopPullDownRefresh
uLogin
uShare
uPay

• 使用 Chrome 调试
• 使用各家小程序开发工具调试
• 关于 App 的调试
  +常见问题
  uni-app 中可使用的 UI 框架：http://ask.dcloud.net.cn/article/35489

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数组，页面模版自动刷新列表

        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 打开文章页

      @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.显示文章页面

        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: () => {} 
        });

4. 根目录的pages.json严格模式可以跳转自定义页面测试

   “condition”: { //模式配置，仅开发期间生效
   “current”: 0, //当前激活的模式（list 的索引项）
   “list”: [{
   “name”: “news”, //模式名称
   “path”: “pages/info/info”, //启动页面，必选
   “query”: “newsid=5196737” //启动参数，在页面的onLoad函数里面得到。
   }
   ]
   }