查閱文檔
快速上手一個框架,快速,必須先大致瞭解官方文檔或開源文檔,這樣才能在遇到問題後快速找到解決方法;
例如: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諺語:“軟件開發中遇到的所有問題,都可以通過增加一層抽象而得以解決”。