查阅文档
快速上手一个框架，
快速
，必须先大致了解官方文档或开源文档，这样才能在遇到问题后快速找到解决方法；
例如：uni-app官网
uniapp >|—— 介绍：*安装、*注意事项、*条件编译、建议、案例
|
|—— 框架：*配置、框架接口(*生命周期、*页面通讯)
|
|—— 组件：*基础组件、扩展组件
|
|—— *API
过一遍介绍，知道有哪些坑，怎么安装，条件编译和全局样式；
详细查阅配置，以及组件和API的
列表标题
，跳过具体内容，熟悉大体位置，按需上手。
上手关键点
生命周期
基于
VUE
的MVVM框架，熟悉应用周期、页面周期、组件周期，理解事件逻辑和数据处理的基本规范
-
应用周期：
onLaunch
、
onShow
、
onHide
、
onError
、
onUniNViewMessage
; -
页面周期：*
onLoad
、
onShow
、
onReady
、*
onHide
、
onUnload
、
onResize
、
onPageScroll
、
*
onPullDownRefresh
、
*
onReachBottom
、
*
onBackPress
、
onTabItemTap
、
onShareAppMessage
、
onNavigationBarBottonTap
、
onNavigationBarSearchInputClicked
、
onNavigationBarSearchInputConfirmed
； -
组件周期：
beforeCreate
、
created
、
beforeMount
、
mounted
、
beforeUpdate
、
updated
、
beforeDestroy
、
destroyed
，和vue.js生命周期一样
页面本是vue文件，也会响应自身的vue.js生命周期；
页面通信
uni封装的
uni.$emit
、
uni.$on
、
uni.$off
、
uni.$once
都是APP全局跨页面、组件；注意与原生
$emit
、
$on
的差异：父子组件通信(props，$emit)；
监听事件后必须按需销毁事件；
状态管理
引入
vuex
进行状态管理；
uniapp >|—— store |—— index.js
| |—— state.js
| |—— getters.js
| |—— mutations.js
| |—— actions.js //异步函数
|
|—— main.js
// store、getters、mutations、actions
export default {
// 相关变量或函数
}
// store -> index.js
import Vue from "vue"
import Vuex from "vuex"
import state from './state.js'
import getters from './getters.js'
import mutations from './mutations.js'
import actions from './actions.js'
Vue.use(Vuex)
const store = new Vuex.Store({
state,
getters,
mutations,
actions
})
export default store
// main.js
import Vue from 'vue'
import App from './App'
import store from './store'
Vue.config.productionTip = false
App.mpType = 'app'
Vue.prototype.$store = store
const app = new Vue({
store,
...App
})
app.$mount()
mutations和actions可以再细分功能块；
uniapp >|—— store |—— index.js
| |—— state.js
| |—— getters.js
| |—— mutations.js
| |—— actions |—— index.js
| | |—— component1.js
| | |—— component2.js
| | |—— component3.js
|
|—— utils |—— opts1.js
| |—— opts2.js
| |—— opts3.js
|
|—— server.js
|—— main.js
mapGetters
、
mapMutations
、
mapActions
辅助函数引入，相当于在computed引入
this.$store.getters.<getters_name>
，methods引入
this.$store.commit()
和
this.$store.dispatch()
;
<template>
<view