Uni-app 学习笔记

转载自 https://www.jianshu.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 、使用组件 <navigator open-type="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 后再赋值。
例如

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

样式导入

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

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

内联样式

1.style：静态的样式统一写到 class 中。

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

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

<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 格式图片。
• 支持网络路径图片。
• 使用本地路径背景图片需注意：

  1. 图片小于 40kb，uni-app 会自动将其转化为 base64 格式；

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

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

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

字体图标

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

• 支持 base64 格式字体图标。
• 支持网络路径字体图标。
• 网络路径必须加协议头 https。
• 从 http://www.iconfont.cn 上拷贝的代码，默认是没加协议头的。
• uni-app 本地路径图标字体支持情况：

  1. 字体文件小于 40kb，uni-app 会自动将其转化为 base64 格式；

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

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

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

<template/>和 <block/>

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>

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 支持的语法:

<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: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 语法。

不支持示例：

<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>
    <!-- 支持 -->
    <view class="container" :class="computedClassStr"></view>
    <view class="container" :class="{active: isActive}"></view>
&lt;!-- 不支持 --&gt;
&lt;view class="container" :class="computedClassObject"&gt;&lt;/view&gt;

</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"><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官方文档：表单控件绑定。

建议开发过程中直接使用 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"

示例

<picker mode="date" :value="date" start="2015-09-01" end="2017-09-01" @change="bindDateChange">
    <view class="picker">
      当前选择: {{date}}
    </view>
</picker>

全局组件

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 里可直接使用组件

<template>
  <view>
    <page-head></page-head>
    </view>
</template>

常见问题

1. 如何获取上个页面传递的数据
2. 如何设置全局的数据和全局的方法
3. 如何捕获 app 的 onError
4. 组件属性设置不生效解决办法

使用nvue Weex注意事项

使用HTML5+注意事项

条件编译

条件编译是里用特殊的注释作为标记，在编译时根据这些特殊的注释，将注释里面的代码编译到不同平台。

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

API 的条件编译

// #ifdef  %PLATFORM%
平台特有的API实现
// #endif

组件的条件编译

pages.json 的条件编译

static 目录的条件编译

+性能优化建议

+uni-app跨端开发注意事项

+高效开发技巧

- 使用代码块直接创建组件模板

为提升开发效率，HBuilderX将 uni-app 常用代码封装成了以 u 开头的代码块，如在 template 标签内输入 ulist 回车，会自动生成如下代码：

<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 回车，会自动生成如下代码：

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函数里面得到。
        }
    ]
}