如何快速上手一个框架

查阅文档

快速上手一个框架，快速，必须先大致了解官方文档或开源文档，这样才能在遇到问题后快速找到解决方法；
例如：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.，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 启动 首次启动 登录/注册 首页 yes no

翻译：无痕模式不记录历史，无收藏功能及提示

Created with Raphaël 2.2.0 翻译 输入单词 验证非空 验证成功？ 有效字符串，调用API 返回结果 无痕模式？ 渲染结果 结束 历史记录/收藏 空字符串 yes no yes no

引用一句IT谚语：“软件开发中遇到的所有问题，都可以通过增加一层抽象而得以解决”。