如何快速上手一個框架

查閱文檔

快速上手一個框架，快速，必須先大致瞭解官方文檔或開源文檔，這樣才能在遇到問題後快速找到解決方法；
例如：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>{{yo}}</view>
</template>
<script>
import {mapGetters,mapActions} from 'vuex'
export default {
	computed:{
		...mapGetters:[{
			'getter1',
			yo:'getter2'
		}]
	},
	methods:{
	test(){
		let tmp = this.getter1;
		this.action1();
	},
	...mapActions:[{
		'action1'
	}]
	}
}
</script>

按需查閱組件和API

接下來的事情就是按需使用，在試錯和調優中，不斷完善；
處理好跨域、數據動態綁定及解耦、組件化，模塊化。

DEMO

在線的樣品， 頁面刷新讀取緩存未完善

首次啓動：首次啓動會跳轉到，登錄註冊頁面(可跳過)，進入首頁，緩存狀態，之後啓動非首次啓動

翻譯：無痕模式不記錄歷史，無收藏功能及提示

引用一句IT諺語：“軟件開發中遇到的所有問題，都可以通過增加一層抽象而得以解決”。