uni-app跨平台框架官⽅教程
链接：
⼀、框架简介基础知识点
uniapp⽣命周期
onLaunch 当uniapp初始化完成时进⾏触发，全局只触发⼀次
onShow 当uniapp启动或者从后台进⼊前台显⽰
onHide 当uniapp从前台进⼊后台
onUniNViewMessage 对nvue页⾯发送数据进⾏监听
uniapp页⾯⽣命周期
参看⽂档
路由
uni-app有两种路由跳转⽅式：使⽤组件跳转、调⽤跳转。
1.打开新页⾯，页⾯重定向===》调⽤ API uni.navigateTo 、使⽤组件 <navigator open-type="navigateTo"/>
2.页⾯返回调⽤ API 、使⽤组件、⽤户按左上⾓返回按钮、安卓⽤户点击物理back按键
3.Tab 切换调⽤ API 、使⽤组件、⽤户切换 Tab
4.重加载调⽤ API 、使⽤组件
Tips：
navigateTo, redirectTo只能打开⾮ tabBar 页⾯。
switchTab只能打开tabBar页⾯。
reLaunch可以打开任意页⾯。
页⾯底部的tabBar由页⾯决定，即只要是定义为tabBar的页⾯，底部都有tabBar。
不能在App.vue⾥⾯进⾏页⾯跳转。
手机上可以打html与css的app页⾯样式与布局
uni-app⽀持的通⽤css单位包括px、upx、vh。
upx 是相对于基准宽度的单位，可以根据屏幕宽度进⾏⾃适应。uni-app 规定屏幕基准宽度750upx。
因为upx是编译器处理的，动态绑定upx不⽣效
可使⽤ uni.upx2px(Number) 转换为 px 后再赋值。
例如
return uni.upx2px(750 / 2) + 'px';
使⽤@import语句可以导⼊外联样式表，@import后跟需要导⼊的外联样式表的相对路径，⽤；表⽰语句结束。
@import "../../common/uni.css";
1.style：静态的样式统⼀写到 class 中。
<view : />
2. class：⽤于指定样式规则，其属性值是样式规则中类选择器名(样式类名)的集合，样式类名不需要带上.，样式类名之间⽤空格分隔。
<view class="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+App H5
NavigationBar导航栏44px44px
TabBar底部选项卡56px50px
为⽀持跨平台，框架建议使⽤Flex布局
uni-app⽀持使⽤在 css ⾥设置背景图⽚，使⽤⽅式与普通web项⽬相同，需要注意以下⼏点：
⽀持 base64 格式图⽚。
⽀持⽹络路径图⽚。
使⽤本地路径背景图⽚需注意：
1. 图⽚⼩于 40kb，uni-app会⾃动将其转化为 base64 格式；
2. 图⽚⼤于等于 40kb，需开发者⾃⼰将其转换为base64格式使⽤，或将其挪到服务器上，从⽹络地址引⽤。
3. 本地背景图⽚的引⽤路径仅⽀持以 ~@ 开头的绝对路径（不⽀持相对路径）。
.test2 {
background-image: url('~@/static/logo.png');
}
uni-app⽀持使⽤字体图标，使⽤⽅式与普通web项⽬相同，需要注意以下⼏点：
⽀持 base64 格式字体图标。
⽀持⽹络路径字体图标。
⽹络路径必须加协议头https。
从上拷贝的代码，默认是没加协议头的。
uni-app本地路径图标字体⽀持情况：
1. 字体⽂件⼩于 40kb，uni-app会⾃动将其转化为 base64 格式；
2. 字体⽂件⼤于等于 40kb，需开发者⾃⼰转换，否则使⽤将不⽣效；
3. 字体⽂件的引⽤路径仅⽀持以 ~@ 开头的绝对路径（不⽀持相对路径）。
@font-face {
font-family: test1-icon;
src: url('~@/f');
}
uni-app⽀持在 template 模板中嵌套<template/>和<block/>，⽤来进⾏和。
<template/>和<block/>并不是⼀个组件，它们仅仅是⼀个包装元素，不会在页⾯中做任何渲染，只接受控制属性。
代码⽰例
<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>
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 => Method())。因为箭头函数是和⽗级上下⽂绑定在⼀起的，this不会是如你做预期的Vue实例，且this.a或Method也会是未定义的。
建议使⽤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 单⽂件模式的开发规范。详细参考：
lass ⽀持的语法:
<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 ⽀持的语法:
<view v-bind:>666</view>
<view v-bind:>777</view>
⾮H5端不⽀持中的classObject和styleObject语法。
不⽀持⽰例：
<template>
<view :class="[activeClass]" :></view>
</template>
<script>
export default {
data() {
return {
activeClass: {
'active': true,
'text-danger': false
},
baseStyles: {
color: 'green',
fontSize: '30px'
},
overridingStyles: {
'font-weight': 'bold'
}
}
}
}
</script>
注意：以:这样的⽅式设置px像素值，其值为实际像素，不会被编译器转换。此外还可以⽤computed⽅法⽣成class或者style字符串，插⼊到页⾯中，举例说明：
<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列表渲染
如果列表中项⽬的位置会动态改变或者有新的项⽬添加到列表中，并且希望列表中的项⽬保持⾃⼰的特征和状态（如<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"><map>。
为兼容各端，事件需使⽤ v-on 或 @ 的⽅式绑定，请勿使⽤⼩程序端的bind 和 catch 进⾏事件绑定。
事件修饰符
.stop：各平台均⽀持，使⽤时会阻⽌事件冒泡，在⾮ H5 端同时也会阻⽌事件的默认⾏为
.prevent 仅在 H5 平台⽀持
.self：仅在 H5 平台⽀持
.once：仅在 H5 平台⽀持
.capture：仅在 H5 平台⽀持
.passive：仅在 H5 平台⽀持
若需要禁⽌蒙版下的页⾯滚动，可使⽤ @touchmove.stop.prevent="moveHandle"，moveHandle 可以⽤来处理 touchmove 的事件，也可以是⼀个空函数。
<view class="mask" @touchmove.stop.prevent="moveHandle"></view>
按键修饰符：uni-app运⾏在⼿机端，没有键盘事件，所以不⽀持按键修饰符。
⽀持。
建议开发过程中直接使⽤。
组件是整个Vue.js中最复杂的部分，⽀持。
有且只能使⽤单⽂件组件（.vue 组件）的形式进⾏⽀持。其他的诸如：动态组件，⾃定义render，和<script type="text/x-template">字符串模版等⾮H5端都不⽀持。
uni-app提供了丰富的，⽐如：picker,map等，需要注意的是原⽣组件上的事件绑定，需要以vue的事件绑定语法来绑定，如
bindchange="eventName"事件，需要写成@change="eventName"
⽰例
<picker mode="date" :value="date" start="2015-09-01" end="2017-09-01" @change="bindDateChange">
<view class="picker">
当前选择: {{date}}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。