转载于： //www.greatytc.com/p/132a3de98238
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.页面返回 调用 APIuni.navigateBack、使用组件<navigator open-type="navigateBack"/>、用户按左上角返回按钮、安卓用户点击物理back按键
3.Tab 切换 调用 APIuni.switchTab、使用组件<navigator open-type="switchTab"/>、用户切换 Tab
4.重加载 调用 APIuni.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。
因为upx是编译器处理的，动态绑定upx不生效
可使用 uni.upx2px(Number) 转换为 px 后再赋值。
例如
returnuni.upx2px(750/2)+'px';
使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束。
@import"../../common/uni.css";
1.style：静态的样式统一写到 class 中。
<view:style="{color:color}"/>
class：用于指定样式规则，其属性值是样式规则中类选择器名(样式类名)的集合，样式类名不需要带上.，样式类名之间用空格分隔。
<viewclass="normal_view"/>
1 .class
2 #id
3 element 选择所有 view 组件
定义在 App.vue 中的样式为全局样式，作用于每一个页面。在 pages 目录下 的 vue 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 App.vue 中相同的选择器。
注意： App.vue 中通过 @import 语句可以导入外联样式，一样作用于每一个页面。
CSS变量描述5+App小程序H5
--status-bar-height系统状态栏高度系统状态栏高度25px0
--window-top内容区域距离顶部的距离00NavigationBar 的高度
--window-bottom内容区域距离底部的距离00TabBar 的高度
uni-app中以下组件的高度是固定的，不可修改：
组件描述5+AppH5
NavigationBar导航栏44px44px
TabBar底部选项卡56px50px
为支持跨平台，框架建议使用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 模板中嵌套<template/>和<block/>，用来进行列表渲染和条件渲染。
<template/>和<block/>并不是一个组件，它们仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。
代码示例
<template><view><templatev-if="test"><view>test 为 true 时显示</view></template><templatev-else><view>test 为 false 时显示</view></template></view></template>
<template><view><blockv-for="(item,index) in list":key="index"><view>{{item}} - {{index}}</view></block></view></template>
uni-app 在支持绝大部分 ES6 API 的同时，也支持了 ES7 的 await/async。
uni-app支持使用npm安装第三方包。
在 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(){return{title:'Hello'}}//错误写法，会导致再次打开页面时，显示上次数据data:{title:'Hello'}
实现全局变量的方式需要遵循 Vue 单文件模式的开发规范。详细参考：uni-app全局变量的几种实现方式
lass 支持的语法:
<view:class="{ active: isActive }">111</view><viewclass="static"v-bind:class="{ active: isActive, 'text-danger': hasError }">222</view><viewclass="static":class="[activeClass, errorClass]">333</view><viewclass="static"v-bind:class="[isActive ? activeClass : '', errorClass]">444</view><viewclass="static"v-bind:class="[{ active: isActive }, errorClass]">555</view>
style 支持的语法:
<viewv-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">666</view><viewv-bind:style="[{ color: activeColor, fontSize: fontSize + 'px' }]">777</view>
非H5端不支持Vue官方文档：Class 与 Style 绑定中的classObject和styleObject语法。
不支持示例：
<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字符串，插入到页面中，举例说明：
<template><!-- 支持 --><viewclass="container":class="computedClassStr"></view><viewclass="container":class="{active: isActive}"></view><!-- 不支持 --><viewclass="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官方文档：列表渲染
如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态（如<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 中区分到底是什么事件，所以你在监听此类事件的时候同时监听事件名和事件类型既 。
为兼容各端，事件需使用 v-on 或 @ 的方式绑定，请勿使用小程序端的bind 和 catch 进行事件绑定。
事件修饰符
.stop：各平台均支持， 使用时会阻止事件冒泡，在非 H5 端同时也会阻止事件的默认行为
.prevent 仅在 H5 平台支持
.self：仅在 H5 平台支持
.once：仅在 H5 平台支持
.capture：仅在 H5 平台支持
.passive：仅在 H5 平台支持
若需要禁止蒙版下的页面滚动，可使用 @touchmove.stop.prevent="moveHandle"，moveHandle 可以用来处理 touchmove 的事件，也可以是一个空函数。
按键修饰符：uni-app运行在手机端，没有键盘事件，所以不支持按键修饰符。
建议开发过程中直接使用uni-app：表单组件。
组件是整个Vue.js中最复杂的部分，支持Vue官方文档：组件。
有且只能使用单文件组件（.vue 组件）的形式进行支持。其他的诸如：动态组件，自定义render，和<script type="text/x-template">字符串模版等非H5端都不支持。
uni-app提供了丰富的UI组件，比如：picker,map等，需要注意的是原生组件上的事件绑定，需要以vue的事件绑定语法来绑定，如bindchange="eventName"事件，需要写成@change="eventName"
示例
<pickermode="date":value="date"start="2015-09-01"end="2017-09-01"@change="bindDateChange"><viewclass="picker">当前选择: {{date}}</view></picker>
uni-app支持配置全局组件，需在main.js里进行全局注册，注册后就可在所有页面里使用该组件。
注意：Vue.component的第一个参数必须是静态的字符串。
示例
main.js 里进行全局注册
importVuefrom'vue'importpageHeadfrom'./components/page-head.vue'Vue.component('page-head',pageHead)
index.vue 里可直接使用组件
<template><view><page-head></page-head></view></template>
如何获取上个页面传递的数据
如何设置全局的数据和全局的方法
如何捕获 app 的 onError
组件属性设置不生效解决办法
条件编译是里用特殊的注释作为标记，在编译时根据这些特殊的注释，将注释里面的代码编译到不同平台。
写法：以 #ifdef 或 #ifndef 加** %PLATFORM%** 开头，以 #endif 结尾。
// #ifdef %PLATFORM%平台特有的API实现// #endif
为提升开发效率，HBuilderX将 uni-app 常用代码封装成了以 u 开头的代码块，如在 template 标签内输入 ulist 回车，会自动生成如下代码：
<viewclass="uni-list"><viewclass="uni-list-cell"><viewclass="uni-list-cell-navigate uni-navigate-right"v-for="(item,index) in list":key="index">{{item.value}}</view></view></view>
代码块分为Tag代码块、JS代码块，如在 script 标签内输入 uShowToast 回车，会自动生成如下代码：
uni.showToast({title:'',mask:falseduration:1500});
uni-app已支持代码块见下方列表。
Tag代码块
uButtonuCheckboxuGriduListuListMediauRadiouSwiper
JS代码块
uRequestuGetLocationuShowToastuShowLoadinguHideLoadinguShowModaluShowActionSheetuNavigateTouNavigateBackuRedirectTouStartPullDownRefreshuStopPullDownRefreshuLoginuShareuPay
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函数里面得到。}]}
链接：//www.greatytc.com/p/132a3de98238
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
