uni-app 基本用法 ​

生命周期 ​

• onLoad： 监听页面加载，其参数为上个页面传递的数据
• onShow： 监听页面显示，页面每次出现在屏幕上都触发
• onReady：监听页面初次渲染完成，此时组件已挂载完成，DOM 树($el)已可用
• onHide： 监听页面隐藏
• onUnload： 监听页面卸载
• onResize： 监听窗口尺寸变化
• onShareAppMessage： 用户点击右上角分享
• onBackPress： 监听页面返回

页面加载时序：

1. 首先根据pages.json的配置，创建页面。

2. 页面template里的组件，创建dom（处理的静态dom），对于通过js/uts更新data然后通过v-for再创建的列表数据，不在第一批处理。

3. 触发onLoad，此时页面还未显示，所以这里不能直接操作dom，可以在这时候处理上页的参数，联网取数据，更新data。

   uni.request或云开发联网，在子线程运行，不会干扰UI线程，并行处理可以更快的拿到数据、渲染界面。

4. 新页面开始进入的转场动画，动画默认耗时300ms。

5. UI层才能完成了页面上真实元素的创建，即触发了onReady，首批界面也渲染了。

   如果元素排版和渲染过慢，转场动画结束都没有内容，就会造成白屏。

   注意：onReady和转场动画开始、结束之间，没有必然的先后顺序，完全取决于dom的数量和复杂度。

6. 转场动画结束。

注意问题：

• 联网不要在onReady里，那样太慢了，在onLoad里早点联网。
• 页面dom太多会拖累整体页面。
• 在pages.json里配置原生导航栏和背景色。

常用API接口 ​

getApp() ​

getApp() 函数用于获取当前应用实例，一般用于获取globalData。

const app = getApp()
console.log(app.globalData)
app.doSomething() // 调用 App.vue methods 中的 doSomething 方法

const app = getApp()
console.log(app.globalData)
app.doSomething() // 调用 App.vue methods 中的 doSomething 方法

可以通过 this.$scope 获取对应的app实例。

$getAppWebview() ​

可以得到当前webview的对象实例，从而实现对 webview 更强大的控制。注意：此方法仅 App 支持

uni.$on(eventName,callback) ​

监听全局的自定义事件。

uni.$emit(eventName,OBJECT) ​

触发全局的自定义事件。附加参数都会传给监听器回调。

uni.$once(eventName,callback) ​

监听全局的自定义事件。只触发一次，在第一次触发之后移除监听器。

uni.$off([eventName, callback]) ​

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

路由 ​

框架以栈的形式管理当前所有页面， 当发生路由切换的时候，页面栈的表现如下：

页面关闭时，只是销毁了页面实例，未完成的网络请求、计时器等副作用需开发者自行处理。

条件编译 ​

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

• #ifdef：if defined 仅在某平台存在
• #ifndef：if not defined 除了某平台均存在
• %PLATFORM%：平台名称

具体平台类型，查看这里 。

组件 ​

基础组件 ​

视图容器（View Container）：

基础内容（Basic Content）：

表单组件（Form）：

媒体组件（Media）：

扩展组件 ​

从插件市场里可以获取，把这个uni-rate组件导入到你的uni-app项目下。

easycom组件 ​

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

如果你的组件名称或路径不符合easycom的默认规范，可以在pages.json的easycom节点进行个性化设置。

{
    "easycom": {
		"autoscan": true,
		"custom": {
			"^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
		}
	},
}

{
    "easycom": {
		"autoscan": true,
		"custom": {
			"^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
		}
	},
}

注意 ​

页面级的代码大多写在export default {}中。写在里面的代码，会随着页面关闭而关闭。

谨慎编写export default {}外面的代码：

1. 在应用启动时执行。也就是这里的代码执行时机是应用启动、而不是页面加载。如果这里的代码写的太复杂，会影响应用启动速度和内存占用。
2. 不跟随页面关闭而回收。在外层的静态变量不会跟随页面关闭而回收。