**才見嶺頭雲似蓋，已驚巖下雪如塵。---《南秦雪》**前言
這幾天好多地方都下雪了,雪花真美呀,特地在網上搜上好看的圖片和詩句寫上。
本文主要從template【模板】講到一個demo，快速上手vue、react和微信小城序的項目開發。
1.template篇
1.1 vue-template-pc
1.效果圖
vue-template-pc項目，歡迎star
2.技術棧
vue+vue-router+vuex+axios+element-UI+iconfont(阿里)
3.適配方案
左側固定寬度，右側自適應
左側導航和右側導航分別配置滾動條
4.技能點分析
| 技能點 | 對應api |
|---|---|
| 常用指令 | @(v-on)綁定事件, v-if/v-show是否創建/和是否顯示,v-for循環 |
| 生命週期 | 8個生命週期beforeCreate,created,beforeMount,mounted,beforeUpdate,updated,beforeDestroy和destroy |
| 觀察計算 | computed和watch |
| data屬性 | 定義變量,同樣變量使用必須先定義 |
| 組件註冊 | components局部註冊,Vue.component()全局註冊 |
| 組件通訊 | 子傳父:this.$emit,父傳子:props,平級組件:vuex或路由傳參 |
| 插件註冊 | Vue.use()註冊插件,如Vue.use(element)是調用element內部的install方法 |
| 路由註冊 | vue-router:Vue.use(router)也是調用內部的install方法,掛載到vue實例中生成route和router屬性 |
| 路由模式 | mode屬性可以設置history和hash |
| 子路由 | children:[]可以配置子路由 |
| 路由鉤子 | router.beforeEach(實現導航鉤子守衛)和router.afterEach |
| vuex | 4個屬性,state,getters, actions(異步獲取數據)和mutations(同步獲取數據) |
| vuex | 4個輔助函數,mapState,mapGetters, mapActions和mapMutations,就是輔助處理commit或distapch方法 |
| axios | 攔截器,interceptors.request請求攔截器,interceptors.response響應攔截器 |
| axios | baseUrl配置公共請求路徑,必須符合http標準的鏈接,否則設置無效 |
| axios | 請求方法,get,post,put,delete等 |
| axios | 跨域,withCredentials: true,需要後端支持 |
| css | sass,對應嵌套不超過三層,滾動條樣式設置,文本兩行超出build問題 |
| iconfont | 阿里字體圖標，可以自定義icon |
5.那麼問題來了?
computed和watch的區別? 解析
路由傳參的方法? 解析
vue.use,vue.install,mixins方法區別? 解析
history和hash區別及實現原理? 區別解析原理解析vue-router官網
使用history和hash模式部署服務器有什麼問題?問題解析
vuex的輔助函數和基本屬性使用的區別?vuex官網
axios原理?axios源碼
簡單實現一個vue+vue-router+vuex的框架?
1.2 react-pc-template
1.效果圖
react-pc-template項目, 歡迎star
2.技術棧
dva+umi+ant-design-pro
dva:可拔插的react應用框架,基於react和redux
mui:集成react的router和redux
ant-design-pro:基於react和ant-pc的中後臺解決方案
3.適配方案
左側固定寬度，右側自適應
右側導航分別配置滾動條.控制整個page
4.技能點分析
| 技能點 | 對應api |
|---|---|
| JSX | react是基於jSX語法 |
| 生命週期 | 實例化(5個):getDefaultProps,getInitialState,componentWillMount,render,componentDidMount |
| 生命週期 | 更新:5個生命週期 |
| 生命週期 | 銷燬:componentWillUnmout |
| 路由 | 基於umi,裏面有push,replace,go等方法 |
| 狀態管理 | dva裏面的redux的封裝,屬性有state,effects,reducers |
| 組件傳值 | 父子:props,平級redux或umi的router |
| model | 項目的model和dom是通過@connect()連接並將部分屬性添加到props裏 |
| 登陸 | 登陸是通過在入口js裏面做路由判斷 |
5.那麼問題來了?
umi的router傳參形式? 解析
dva封裝的redux和原生的redux使用有那些不同? dva使用解析redux使用解析
umi裏面router實現原理?umi源碼
對比vue和react在原理和使用上的區別?
1.3 vue-mobile-template
移動端代碼見demo篇
1.4 小程序模板
由於小程序的IDE裏面有生成的模板,mobile也是基於vue,所以只在demo篇展示demo
1.5 快應用模板
1.template代碼實現
官方template生成教程
2.技能點分析
| 技能點 | 對應api |
|---|---|
| 佈局 | 基於彈性佈局 |
| 指令 | for：循環，if、show |
| 生命週期 | 頁面的生命週期：onInit、onReady、onShow、onHide、onDestroy、onBackPress、onMenuPress |
| app生命週期 | onCreate、onDestroy |
| 事件 | $on、$off、$emit、$emitElement |
| 路由配置 | manifest文件的router屬性配置 |
| 路由跳轉 | router.page |
| 組件通訊 | 父子組件：$emit，props，兄弟組件：通過 Publish/Subscribe 模型 |
| 原生組件 | list，map，tabs和canvas |
| 消息機制 | websocket使用 |
2.demo篇
2.1 vue-demo(vue-pc-demo)
1.效果圖
vue-demo項目地址, 歡迎star
2.技術棧
vue+vue-router+vuex+axios+element-UI+高德map+vue-split-table
高德map:高德地圖
vue-split-table:表格拆分插件,vue-split-table插件
3.適配方案
同上
4.技能點分析
比template篇多了map的使用,高德使用手冊
實現axios的api模塊化,並全局掛載api和axios
所以由此可以看出只要有了template,後期開發so-easy,只是新加tab頁
2.2 react-pc-demo
參考ant的ant-design-pro項目
2.3 vue-mobile-demo
1.效果圖
2.技術棧
vue+vue-router+vuex+vant+rem+sass+iconfont(阿里)
vant:有讚的電商mobile插件
3.適配方案
rem
4.技能點分析
iconfont的使用:官網配置icon,導出圖標,引入assets目錄下
vant使用:詳見vant官網
全局配置rem:在index.html文件配置
全局配置sass函數和mixin:在build/utils下面的scss的options屬性配置static目錄下面的函數和混入
5.那麼問題來了
vue-cli生成的項目src下面的assets和根路徑下面的static目錄的區別?解析
2.4 小程序demo
1.效果
min-program-demo項目,歡迎star
2.技術棧
weui+tabbar+分包+iconfont+自定義頂部導航+組件傳值+wx.request封裝
weui:Tencent推出的小程序UI
3.適配方案
rpx:微信小程序的單位
4.技能點分析
| 技能點 | 對應api |
|---|---|
| 常用指令 | bindtap綁定事件, wx:if/wx:show是否創建/和是否顯示,wx:for循環 |
| 生命週期1 | 應用生命週期(app.js裏):launch,show,hide |
| 生命週期2 | 頁面生命週期(page裏):load,show,ready,hide,unload |
| 生命週期3 | 組件週期(component裏):created,attached,moved,detached |
| wx.request | ajax請求 |
| 背景音樂 | wx.getBackgroundAudioManager |
| 音頻 | wx.createAudioContext |
| 圖片 | wx.chooseImage |
| 文件 | wx.getFileInfo |
| 路由 | 在app.json裏面pages屬性定義pages目錄下面的文件 |
| 路由切換 | wx.navigateTo，wx.navigateBack， wx.redirectTo，wx.switchTab，wx.reLaunch |
| 分包 | 在app.json裏面subPackages屬性定義分包路由 |
| weui組件 | weui官網 |
| 原生組件 | 微信原生組件 |
| 業務組件 | 在json文件usingComponents註冊 |
| 組件通訊 | 定義globalData，storage和路由 |
5.那麼問題來了
小程序的生命週期執行順序？page和應用生命週期 ， component生命週期解釋
幾種路由切換有什麼不同？路由介紹
小程序怎麼實現watch監聽數據變化？實現watch
6.小程序框架
wepy官網
基於wepy的商城項目
mpVue
基於mpVue的項目
分析:這兩個框架都是通過預編譯將對應風格的格式轉化成小程序格式
2.5 快應用demo
3.結語
對比下vue,react,微信小程序和快應用這幾種技術棧開發,可以分爲兩類,
一類是mvvm式的開發:vue,微信小程序和快應用
一類是基於JSX的view開發