uniapp 学习笔记

框架

生命周期

应用生命周期

主要生命周期

• onLaunch

当uni-app 初始化完成时触发（全局只触发一次）

• onShow

当 uni-app 启动，或从后台进入前台显示

• onHide

当 uni-app 从前台进入后台

• onError

当 uni-app 报错时触发

• onUnhandledRejection

对未处理的 Promise 拒绝事件监听函数（2.8.1+）

• onPageNotFound

页面不存在监听函数。页面打开之后（比如通过分享卡片、小程序码直接打开某个页面）发现页面不存在，才会触发，api 跳转不存在的页面不会触发（如 uni.navigateTo）

注意事项

• 应用生命周期仅可在App.vue中监听，在其它页面监听无效。

页面生命周期

主要生命周期

• onLoad

监听页面加载，其参数为上个页面传递的数据，参数类型为 Object（用于页面传参），参考示例

// 在test.vue页面接受参数
export default {
    onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数
        console.log(option.id); //打印出上个页面传递的参数。
        console.log(option.name); //打印出上个页面传递的参数。
    }
}

• onShow

  监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面。

• onReady

  监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发。

• onHide

  监听页面隐藏

• onUnload

  监听页面卸载

• onPullDownRefresh

  监听用户下拉动作，一般用于下拉刷新。

• onReachBottom

  页面滚动到底部的事件，常用于下拉下一页数据。

  如使用scroll-view导致页面没有滚动，则触底事件不会被触发。

• onTabItemTap

  点击 tab 时触发，参数为Object。

  属性	类型	说明
  index	String	被点击tabItem的序号，从0开始
  pagePath	String	被点击tabItem的页面路径
  text	String	被点击tabItem的按钮文字

  onTabItemTap常用于点击当前tabitem，滚动或刷新当前页面。如果是点击不同的tabitem，一定会触发页面切换。

  onTabItemTap : function(e) {
      console.log(e);
      // e的返回格式为json对象： {"index":0,"text":"首页","pagePath":"pages/index/index"}
  }

   

• onShareAppMessage

  用户点击右上角分享

• onPageScroll

  监听页面滚动，参数为Object

  属性	类型	说明
  scrollTop	Number	页面在垂直方向已滚动的距离（单位px）

  • 不要写交互复杂的js，比如频繁修改页面。因为这个生命周期是在渲染层触发的，在非h5端，js是在逻辑层执行的，两层之间通信是有损耗的。如果在滚动过程中，频发触发两层之间的数据交换，可能会造成卡顿。

  • stiky吸顶示例

  • 在App、微信小程序、H5中，也可以使用wxs监听滚动

• onShareTimeline

  监听用户点击右上角转发到朋友圈

• onAddToFavorites

  监听用户点击右上角收藏

Vue生命周期

activated，deactivated

小程序不支持

 

全局变量

公用模块

这种方式维护起来比较方便，但是缺点就是每次都需要引入。

1. 在 uni-app 项目根目录下创建 common 目录，然后在 common 目录下新建 global.js 用于定义公用的方法和属性。

// common/global.js
const websiteUrl = 'http://uniapp.dcloud.io';  
const now = Date.now || function () {  
    return new Date().getTime();  
};  
const isArray = Array.isArray || function (obj) {  
    return obj instanceof Array;  
};  
​
export default {  
    websiteUrl,  
    now,  
    isArray  
}

2. 接下来在 pages/index/index.vue 中引用该模块

<script>  
    import helper from '@/common/global.js';  
​
    export default {  
        onLoad(){  
            console.log('now:' + helper.now());  
        }
    }  
</script>

挂载globalProperties

将一些使用频率较高的常量或者方法，直接扩展到 globalProperties 上。只需要在 main.js 中定义好即可在每个页面中直接调用。

// main.js
app.config.globalProperties.$websiteUrl='http://www.baidu.com'
​
// index.vue
console.log(this.$websiteUrl)

 

注意事项

• 每个页面中不要在出现重复的属性或方法名。

• 这种方式只支持vue页面。

globalData

App.vue 中定义globalData的相关配置

export default {  
    globalData: {  
        text: 'text'  
    }
}  

index.vue 中可以获取和修改这个值

console.log(getApp().globalData.text)
getApp().globalData.text = 'test'
console.log(getApp().globalData.text)

注意事项

在应用onLaunch时，getApp对象还未获取，暂时可以使用this.globalData获取globalData。

 

跨端开发

body的元素选择器请改为page，同样，div和ul和li等改为view、span和font改为text、a改为navigator、img改为image

非H5端有原生组件并引发了原生组件层级高于前端组件的概念，要遮挡video、map等原生组件，请使用cover-view组件。

url(//alicdn.net)等路径，改为url(https://alicdn.net)，因为在App端//是file协议

语法

Vue2

基础

v-once

h5、微信小程序均不支持

v-html

App端和H5端支持 v-html ，微信小程序会被转为 rich-text，其他端不支持 v-html 。

class和style

支持属性对象，字符串数组，计算属性字符串

不支持在自定义组件上使用 Class 与 Style 绑定。

条件渲染

v-show 不支持 template 元素，也不支持 v-else

列表渲染

用 v-for 来遍历一个对象的 property。

<template>
    <view>
    <view v-for="(value, name) in object">
        {{ name }}: {{ value }}
    </view>
    </view>
</template>
<script>
    export default {
        data() {
            return {
                object: {
                    title: 'How to do lists in Vue',
                    author: 'Jane Doe',
                    publishedAt: '2020-04-10'
                }
            }
        }
    }
</script>

• 在H5平台 使用 v-for 循环整数时和其他平台存在差异，如 v-for="(item, index) in 10" 中，在H5平台 item 从 1 开始，其他平台 item 从 0 开始，可使用第二个参数 index 来保持一致。

• 小程序端数据为差量更新方式，由于小程序不支持删除对象属性，使用的设置值为 null 的方式替代，导致遍历时可能出现不符合预期的情况，需要自行过滤一下值为 null 的数据（相关反馈）。

事件处理器

事件修饰符

• .stop: 各平台均支持， 使用时会阻止事件冒泡，在非 H5 端同时也会阻止事件的默认行为

• .native: 监听原生事件，各平台均支持

事件映射表

{
    click: 'tap'
}

组件

小程序支持性

uni-app只支持 vue单文件组件（.vue 组件）。

不支持动态组件

不支持自定义 render

不支持 <script type="text/x-template"> 字符串模版

不支持异步插槽

不支持keep-alive

不支持transition

语法

ref

非H5端只能用于获取自定义组件，不能用于获取内置组件实例（如：view、text）

is

由于不支持动态组件，所以该属性不支持

内置组件

component

小程序不支持

transition，transition-group

app，小程序不支持

keep-alive

app，小程序不支持

 

API

全局API

nextTick

微信小程序不支持，但是实例内部的vm.$nextTick()是支持的。

directive

微信小程序不支持

filter

微信小程序不支持

实例属性

vm.$el

app，小程序不支持

vm.$attrs，vm.$listeners

小程序不支持

模板指令

v-html

微信小程序会被转成 rich-text

v-pre

这个节点内的内容不会被编译，可以显示原生的双括号，小程序不支持

v-cloak

和 CSS 规则如 [v-cloak] { display: none } 一起用，在编译完成之前不会显示未编译的标签。

app，小程序不支持

v-once

小程序不支持

Vuex

modules

在modules中的getters，mutations，actions不会分模块，同名方法，以最先定义的为准

// moduleA.js
export default{
	state:{
		text:'A text'
	},
	getters:{
		timeNow(state){
			return state.text
		}
	}
}
//moduleB.js
export default{
	state:{
		text:'B text',
		timestamp:new Date()
	},
	getters:{
		timeNow(state){
			return state.timestamp
		}
	}
}

// store/index.js
modules:{moduleA,moduleB}

//index.vue
data() {
    return {
        text:this.$store.getters.timeNow // 返回 A text
    }
}

Vue3

迁移

生命周期

在Vue3中组件卸载的生命周期被重新命名

• destroyed 修改为 unmounted

• beforeDestroy 修改为 beforeUnmount

事件

emits

Vue3 现在提供了一个emits选项，类似于现有props选项。此选项可用于定义组件可以向其父对象发出的事件

<template>
  <div>
    <p>{{ text }}</p>
    <button v-on:click="$emit('accepted')">OK</button>
  </div>
</template>
<script>
  export default {
    props: ['text'],
    emits: ['accepted']
  }
</script>

修饰符

去除了.native修饰符

v-model

Vue3 v-model prop 和事件默认名称已更改 props.value 修改为 props.modelValue ,event.value 修改为 update:modelValue

filters

从 Vue 3.0 开始，过滤器已删除，不再支持，建议用方法调用或计算属性替换它们。

事件处理

多事件处理器

事件处理程序中可以有多个方法，这些方法由逗号运算符分隔：

<template>
	<view>
    <!-- 这两个 one() 和 two() 将执行按钮点击事件 -->
    <button @click="one($event), two($event)">
        Submit
    </button>
    </view>
</template>
<script>
    export default {
        methods: {
            one(event) {
                // first handler logic...
                console.log("event1: ",event);
            },
            two(event) {
                // second handler logic...
                console.log("event2: ",event);
            }
        }
    }
</script>

组件

Prop 的大小写命名

HTML 中的 attribute 名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时，camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名

属性继承

如果你不希望组件的根元素继承 attribute，你可以在组件的选项中设置 inheritAttrs: false。例如：

<template>
<view class="date-picker">
    <input type="datetime" v-bind="$attrs" />
    </view>
</template>
<script>
    export default {
        inheritAttrs: false
    }
</script>

有了这个新配置，data status attribute 将应用于 input 元素！

<!-- Date-picker 组件 使用非 prop attribute -->
    <date-picker data-status="activated"></date-picker>

<!-- 渲染 date-picker 组件 -->
    <view class="date-picker">
        <input type="datetime" data-status="activated" />
	</view>

自定义事件

推荐始终使用 kebab-case (短横线隔开式) 的事件名。

建议定义所有发出的事件，以便更好地记录组件应该如何工作。

export default {
    //1.声明自定义事件：组件的自定义事件，必须事先声明在emits节点中
    emits:['count-change'],
    ...
}
    
// 验证自定义事件
// 要添加验证，将为事件分配一个函数，该函数接收传递给 $emit 调用的参数，并返回一个布尔值以指示事件是否有效。
export default {
    emits: {
        // 没有验证
        click: null,

        // 验证submit 事件
        submit: ({ email, password }) => {
            if (email && password) {
                return true
            } else {
                console.warn('Invalid submit event payload!')
                return false
            }
        }
	},
    methods: {
        submitForm() {
            this.$emit('submit', { email, password })
        }
    }
}

v-model

默认情况下，组件上的 v-model 使用 modelValue 作为 prop 和 update:modelValue 作为事件。我们可以通过向 v-model 传递参数来修改这些名称：

<my-component v-model:foo="bar"></my-component>

现在可以在单个组件实例上创建多个 v-model 绑定

在本例中，子组件将需要一个 foo prop 并发出 update:foo 要同步的事件：

<template>
    <view>
        <input type="text" :value="foo" @input="$emit('update:foo', $event.target.value)" >
    </view>
</template>
<script>
    export default {
        props: {
            foo: String
        }
    }
</script>

处理 v-model 修饰符

通过 modelModifiers prop 提供给组件

// 父组件
<my-component v-model.capitalize="myText"></my-component>
// 子组件
<input type="text" :value="modelValue" @input="emitValue" style="border: red solid 1px;">
<script>
    export default {
        props: {
            modelValue: String,
            modelModifiers: {
                default: () => ({})
            }
        },
        methods: {
            emitValue(e) {
                let value = e.target.value
                if (this.modelModifiers.capitalize) {
                    value = value.charAt(0).toUpperCase() + value.slice(1) // 处理修饰符
                }
                this.$emit('update:modelValue', value)
            }
        }
    }
</script>

对于带参数的 v-model 绑定，生成的 prop 名称将为 arg + "Modifiers"：

// 父组件
<my-component v-model:foo.capitalize="bar"></my-component>
// 子组件
<input type="text" :value="foo" @input="$emit('update:foo', $event.target.value)">

API

实例方法

• $forceUpdate

  迫使组件实例重新渲染。注意它仅仅影响实例本身和插入插槽内容的子组件，而不是所有子组件。

WXS

wxs是微信小程序在视图层的脚本语言，可以实现更好的前端交互，优化性能。

多用于视图层的dom操作。

触发方式与js相同，使用@符号触发，逻辑写在视图层。通过module指定调用时需要使用的前缀，lang指定脚本类型为wxs。

微信的canvas无法通过wxs操作

<template>
	<view>
		<view class="area">
			<view @touchstart="test.touchstart" @touchmove="test.touchmove" class="movable">{{test.msg}}</view>
		</view>
	</view>
</template>
<script module="test" lang="wxs">
	var startX = 0
	var startY = 0
	var lastLeft = 50;
	var lastTop = 50

	function touchstart(event, ins) {
		console.log("touchstart")
		var touch = event.touches[0] || event.changedTouches[0]
		startX = touch.pageX
		startY = touch.pageY
	}

	function touchmove(event, ins) {
		var touch = event.touches[0] || event.changedTouches[0]
		var pageX = touch.pageX
		var pageY = touch.pageY
		var left = pageX - startX + lastLeft
		var top = pageY - startY + lastTop
		startX = pageX
		startY = pageY
		lastLeft = left
		lastTop = top
		ins.selectComponent('.movable').setStyle({
			left: left + 'px',
			top: top + 'px'
		})
		return false
	}
	module.exports = {
		msg: 'Hello',
		touchstart: touchstart,
		touchmove: touchmove
	}
</script>

样式与布局

样式导入

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

示例代码：

<style>
    @import "../../common/uni.css";

    .uni-card {
        box-shadow: none;
    }
</style>

• 微信小程序自定义组件中仅支持 class 选择器

• 定义在 App.vue 中的样式为全局样式，作用于每一个页面。

• 在 pages 目录下 的 vue 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 App.vue 中相同的选择器。

• 本地背景图片的引用路径推荐使用以 ~@ 开头的绝对路径。

内置 CSS 变量

CSS变量	描述	App	小程序	H5
--status-bar-height	系统状态栏高度	系统状态栏高度、nvue注意见下	25px	0
--window-top	内容区域距离顶部的距离	0	0	NavigationBar 的高度
--window-bottom	内容区域距离底部的距离	0	0	TabBar 的高度

微信/QQ/百度/字节跳动这四家小程序，自定义组件在渲染时会比App/H5端多一级节点，在写样式时需要注意

配置

manifest.json

networkTimeout

配置request，socket，文件上传及下载的超时时间，单位为毫秒

{
	"name": "Demo",
	"appid": "",
	"networkTimeout": 6000
}

 

pages.json

globalStyle

• onReachBottomDistance

  页面上拉触底事件触发时距页面底部距离，单位只支持px，默认为50.

easycom

只要组件安装在项目的components目录下，并符合components/组件名称/组件名称.vue目录结构。就可以不用引用、注册，直接在页面中使用。

组件

表单组件

picker

H5 的 select 标签用 picker 组件进行代替

radio-group

表单元素 radio 用 radio-group 组件进行代替

小程序自定义组件

1. 将自定义组件复制到对应的目录

┌─wxcomponents                  微信小程序自定义组件存放目录
│   └──custom                   微信小程序自定义组件
│        ├─index.js
│        ├─index.wxml
│        ├─index.json
│        └─index.wxss

2. 引入组件

在 pages.json 对应的页面配置中，加入需要引入的组件

{
    "path": "pages/slide-view/slide-view",
    "style": {
        "navigationBarTitleText": "slide-view",
        "usingComponents": {
            "slide-view": "/wxcomponents/slideview/index"
        }
    }
}

 

3. 使用自定义组件

自定义组件的名称，与 usingComponents 中定义的名称需一致

<slide-view width="750" height="110" slide-width="500">
    <view slot="left" class="l">
        <image src="/static/file_transfer.jpg" class="img"></image>
        <view class='text'>
            <view class='title'>文件传输助手</view>
            <view class='time'>7:00 PM</view>
        </view>
    </view>
    <view slot="right" class="r">
        <view class='read'>标为已读</view>
        <view class='delete'>删除</view>
    </view>
</slide-view>

4. 编译运行

编译时，会在自定义组件目录下，生成对应的vue文件

5. 注意事项

• 当需要在 vue 组件中使用小程序组件时，注意在 pages.json 的 globalStyle 中配置 usingComponents，而不是页面级配置。

 

框架接口

页面通讯

• App 全局级别的，跨任意组件，页面，nvue，vue 等

• 使用时，注意及时销毁事件监听

uni.$once(eventName,callback)

监听全局的自定义事件。事件可以由 uni.$emit 触发，但是只触发一次，在第一次触发之后移除监听器。

参数	类型	描述
eventName	String	事件名
callback	Function	事件的回调函数

uni.$once('update',function(data){
    console.log('监听到事件来自 update ，携带参数 msg 为：' + data.msg);
})

uni.$on(eventName,callback)

监听全局的自定义事件。事件可以由 uni.$emit 触发。

参数	类型	描述
eventName	String	事件名
callback	Function	事件的回调函数

uni.$on('update',function(data){
    console.log('监听到事件来自 update ，携带参数 msg 为：' + data.msg);
})

uni.$emit(eventName,OBJECT)

触发全局的自定事件。

参数	类型	描述
eventName	String	事件名
OBJECT	Object	触发事件携带的附加参数

uni.$emit('update',{msg:'页面更新'})

uni.$off(eventName, callback)

移除全局自定义事件监听器。

参数	类型	描述
eventName	Array＜String＞	事件名
callback	Function	事件的回调函数

Tips

• 如果没有提供参数，则移除所有的事件监听器；

• 如果只提供了事件，则移除该事件所有的监听器；

• 如果同时提供了事件与回调，则只移除这个回调的监听器；

• 提供的回调必须跟$on的回调为同一个才能移除这个回调的监听器；

API

网络请求

request

小程序端无法保持cookie，可以使用工具解决：

一行代码让微信、头条、百度、支付宝小程序支持 cookie，兼容 uni-app

可以使用第三方的拦截器拦截请求：

luch-request

上传文件

微信小程序只支持单文件上传

可参考hello uni-app中的客服反馈，支持多图上传

下载文件

文件的临时路径，在应用本次启动期间可以正常使用，如需持久保存，需在主动调用 uni.saveFile，才能在应用下次启动时访问得到。

WebSocket

微信小程序平台1.7.0 及以上版本，最多可以同时存在5个WebSocket 连接。

媒体

图片预览

在非H5端，previewImage是原生实现的，界面自定义灵活度较低。

插件市场有前端实现的previewImage，性能低于原生实现，但界面可随意定义

选择图片或视频

部分手机不支持指定前置摄像头，需打开拍摄界面自行切换

微信小程序ios真机可以选择的文件个数不能大于9

选择文件（非图片视频）

微信小程序不支持选择文件

可以使用wx.chooseMessageFile(OBJECT)，从微信聊天会话中选择文件。

音频

uni.createInnerAudioContext()可实现音频的播放

如需音频的倍速播放，可通过video的倍速播放替代实现。插件市场有封装好的插件音频倍速播放

背景音频

退出小程序后仍在播放

因为背景音频播放耗费手机电量，所以平台都有管控，需在manifest中填写申请。

小程序平台，需在manifest.json 对应的小程序节点下，填写"requiredBackgroundModes": ["audio"]。发布小程序时平台会审核

相机组件

uni.createCameraContext

实现的是非全屏摄像头

微信小程序下实现OCR等证件识别等需求，插件市场也有封装，搜索 ocr 可见。

需要摄像头访问权限

文件

uni.saveFile

saveFile 会把临时文件移动，因此调用成功后传入的 tempFilePath 将不可用。

uni.openDocument

微信内打开文件

数据缓存

• 各个小程序端为其自带的storage api，数据存储生命周期跟小程序本身一致，即除用户主动删除或超过一定时间被自动清理，否则数据都一直可用。

• 非App平台清空Storage会导致uni.getSystemInfo获取到的deviceId改变

位置

uni.getLocation

小程序：api默认不返回详细地址中文描述。可以使用高德地图API获取

在微信小程序中，当用户离开应用后，此接口无法调用，需要申请后台持续定位权限，另外新版本中需要使用 wx.onLocationChange 监听位置信息变化；当用户点击“显示在聊天顶部”时，此接口可继续调用。

<map> 组件默认为国测局坐标，调用 uni.getLocation 返回结果传递给 <map> 组件时，需指定 type 为 gcj02。

uni.openLocation

打开地图查看位置

路由与页面跳转

不能在 App.vue 里面进行页面跳转。

uni.navigateTo

保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面。

参数说明

1. url

   路径+参数 path?key=value&key2=value2

   //在起始页面跳转到test.vue页面并传递参数
   uni.navigateTo({
       url: 'test?id=1&name=uniapp'
   });

   url有长度限制，太长的字符串会传递失败

   参数中出现空格等特殊字符时需要对参数进行编码

<navigator :url="'/pages/test/test?item='+ encodeURIComponent(JSON.stringify(item))"></navigator>

<script>
// 在test.vue页面接受参数
onLoad: function (option) {
    const item = JSON.parse(decodeURIComponent(option.item));
}
</script>

2. events

   页面间通信接口，用于监听被打开页面发送到当前页面的数据。

// 2.8.9+ 支持
uni.navigateTo({
  events: {
    // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
    acceptDataFromOpenedPage: function(data) {
      console.log(data)
    },
    someEvent: function(data) {
      console.log(data)
    }
  }
})

// uni.navigateTo 目标页面 pages/test.vue
onLoad: function(option) {
  const eventChannel = this.getOpenerEventChannel();
  eventChannel.emit('acceptDataFromOpenedPage', {data: 'test'});
  eventChannel.emit('someEvent', {data: 'test'});
}

3. success

   接口调用成功的回调函数

success: function(res) {
    // 通过eventChannel向被打开页面传送数据
    res.eventChannel.emit('acceptDataFromOpenerPage', { data: 'test' })
}

// uni.navigateTo 目标页面 pages/test.vue
onLoad: function(option) {
  const eventChannel = this.getOpenerEventChannel();
  // 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据
  eventChannel.on('acceptDataFromOpenerPage', function(data) {
    console.log(data)
  })
}

4. fail

   接口调用失败的回调函数

5. complete

   接口调用结束的回调函数（调用成功、失败都会执行）

注意事项

• 只能打开非 tabBar 页面。

• 路由API的目标页面必须是在pages.json里注册的vue页面

• 如果想打开web url，在App平台可以使用 plus.runtime.openURL或web-view组件；H5平台使用 window.open；小程序平台使用web-view组件（url需在小程序的联网白名单中）。

uni.redirectTo

注意事项

• 只能打开非 tabBar 页面。

uni.switchTab

注意事项

• 只能打开 tabBar 页面。

uni.reLaunch

注意事项

• 可以打开任意页面。

uni.navigateBack

注意事项

• H5端页面刷新之后页面栈会消失，此时navigateBack不能返回，如果一定要返回可以使用history.back()导航到浏览器的其他历史记录。

EventChannel

页面间事件通信通道

EventChannel.on(string eventName, function fn)

持续监听一个事件

• string eventName 事件名称

• function fn 事件监听函数

EventChannel.once(string eventName, function fn)

监听一个事件一次，触发后失效

• string eventName 事件名称

• function fn 事件监听函数

EventChannel.emit(string eventName, any args)

触发一个事件

• string eventName 事件名称

• any args 事件参数

EventChannel.off(string eventName, function fn)

取消监听一个事件。给出第二个参数时，只取消给出的监听函数，否则取消所有监听函数。

• string eventName 事件名称

• function fn 事件监听函数

 

界面

下拉刷新

onPullDownRefresh

需要在 pages.json 里，找到的当前页面的pages节点，并在 style 选项中开启 enablePullDownRefresh。

{
    "pages": [
        {
            "path": "pages/index/index",
            "style": {
                "navigationBarTitleText": "uni-app",
                "enablePullDownRefresh": true
            }
        }
    ]
}

和onLoad等生命周期函数同级

export default {
    onPullDownRefresh() {
        console.log('refresh');
    }
}

uni.startPullDownRefresh(OBJECT)

开始下拉刷新，调用后触发下拉刷新动画，效果与用户手动下拉刷新一致。

可以使用uni.setBackgroundTextStyle动态设置下拉背景字体、loading 图的样式。

OBJECT 参数说明

参数名	类型	必填	说明
success	Function	否	接口调用成功的回调
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

success 返回参数说明

参数	类型	说明
errMsg	String	接口调用结果

uni.startPullDownRefresh({
    success: (errMsg) => {
        console.log(errMsg) // {"errMsg":"startPullDownRefresh:ok"}
    },
    fail:(errMsg) => {
        console.log(errMsg)
    },
    complete:(errMsg) => {
        console.log(errMsg) // {"errMsg":"startPullDownRefresh:ok"}
    }
});

uni.stopPullDownRefresh()

当处理完数据刷新后，uni.stopPullDownRefresh 可以停止当前页面的下拉刷新。

onPullDownRefresh() {
    console.log('refresh');
    setTimeout(function () {
        uni.stopPullDownRefresh();
    }, 1000);
}

导航条

当用户打开的小程序最底层页面是非首页时，默认展示“返回首页”按钮，开发者可在页面onShow中调用hideHomeButton进行隐藏。

TabBar

如果想要一个中间带+号的tabbar，在HBuilderX中新建uni-app项目、选择 底部选项卡 模板

人脸识别

uni-app微信小程序接入人脸核身SDK

性能优化

小程序端

对于复杂页面，更新某个区域的数据时，需要把这个区域做成组件，这样更新数据时就只更新这个组件，否则会整个页面的数据更新，造成点击延迟卡顿。

uniCloud

云存储

uni-file-picker 文件选择上传

 

 

疑问

路由与页面跳转

• 页面底部的 tabBar 由页面决定，即只要是定义为 tabBar 的页面，底部都有 tabBar。

• 页面路由拦截和管理，插件市场有很多封装好的工具类，搜索路由