uni-app学习笔记

vue, uni-app 2020-06-07

uni-app学习笔记

2020-06-07

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 后再赋值。
例如

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

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

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

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

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

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

<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>
    <!-- 不支持 -->
    <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 的事件，也可以是一个空函数。

<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

全局组件
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>

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

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

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

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