從項目中由淺入深的學習vue,微信小程序和快應用 (1)

**才見嶺頭雲似蓋，已驚巖下雪如塵。---《南秦雪》**

前言

這幾天好多地方都下雪了,雪花真美呀,特意在網上搜上好看的圖片和詩句寫上。
本文主要從template【模板】講到一個demo，快速上手vue、react和微信小城序的項目開發。
若是你不熟悉這中間的某一個技術棧,能夠clone下來跑一跑。 若是所有能上手,中間有些細節耶能夠看看。開擼

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 vue-mobile-template

移動端代碼見demo篇

1.3 小程序模板

因爲小程序的IDE裏面有生成的模板,mobile也是基於vue,因此只在demo篇展現demo

1.4 快應用模板

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 vue-mobile-demo

1.效果圖

vue-mobile項目

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.3 小程序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
自定義導航欄	app.json 設置的navigationStyle設置爲custom
分包預加載	app.json 設置preloadRule
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開發