如何快速上手一個框架

查閱文檔

快速上手一個框架,快速,必須先大致瞭解官方文檔或開源文檔,這樣才能在遇到問題後快速找到解決方法;
例如:uni-app官網

uniapp >|—— 介紹:*安裝、*注意事項、*條件編譯、建議、案例
        |
        |—— 框架:*配置、框架接口(*生命週期、*頁面通訊)
        |
        |—— 組件:*基礎組件、擴展組件
        |
        |—— *API

過一遍介紹,知道有哪些坑,怎麼安裝,條件編譯和全局樣式;
詳細查閱配置,以及組件和API的列表標題,跳過具體內容,熟悉大體位置,按需上手。

上手關鍵點

生命週期

基於VUE的MVVM框架,熟悉應用週期、頁面週期、組件週期,理解事件邏輯和數據處理的基本規範

  • 應用週期:onLaunchonShowonHideonErroronUniNViewMessage;
  • 頁面週期:*onLoadonShowonReady、*onHideonUnload
    onResize
    onPageScroll
    *onPullDownRefresh
    *onReachBottom
    *onBackPress
    onTabItemTap
    onShareAppMessage
    onNavigationBarBottonTap
    onNavigationBarSearchInputClicked
    onNavigationBarSearchInputConfirmed
  • 組件週期:beforeCreatecreatedbeforeMountmountedbeforeUpdateupdatedbeforeDestroydestroyed,和vue.js生命週期一樣

頁面本是vue文件,也會響應自身的vue.js生命週期;

頁面通信

uni封裝的uni.$emituni.$onuni.$offuni.$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

mapGettersmapMutationsmapActions輔助函數引入,相當於在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

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

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

Created with Raphaël 2.2.0啓動首次啓動登錄/註冊首頁yesno

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

Created with Raphaël 2.2.0翻譯輸入單詞驗證非空驗證成功?有效字符串,調用API返回結果無痕模式?渲染結果結束歷史記錄/收藏空字符串yesnoyesno

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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章