為啥最近的工作那麼像前端呢，算了，別管什麼工作都還是要做的。之前從未想過會開發微信小程式這玩意，結果就遇到了不少問題。

0x1 初識小程式

得到這個要求之後我第一時間看了下微信的api，恩，都是類似於ajax一類的，看起來不算很難，不過，和其他的東西有點不太一樣的是，原生的小程式有三部分，wxml（什麼鬼，微信XML嗎），wxss，還有一個js。

wxml就是類似html檔案的一個東西，wxss是他的樣式表，js在這裡充當頁面的controller，處理各類業務邏輯，其實乍一看上去怎麼感覺有點像vue框架的東西呢，好奇之下我就在百度搜了搜，，，果然不是我自己這麼想的，已經有人在嘗試整合vue到這個上面了。

那麼，他們分別是WePy還有mpVue，既然已經找到了就折騰下試試看吧。

0x2 框架的選擇

mpvue這個框架是美團出的，也是最早嘗試使用的小程式框架，它的作用是把vue和vuex轉換為微信的形式，只不過由於微信自身的原因，vue的router就坑在這了，這個框架每一個頁面需要一個vue component的頁面檔案，另外還有一個main.js，看起來應該是編譯的時候的一些配置之類的，還有main.json。

檔案顯得多了點，但是有一個外掛可以整合他們，當然就算不整合也沒什麼問題的。

為了方便開發，我決定在這裡面安裝一個ui框架，就像這樣：

npm install vant --save
 

很快就安裝完畢了，就在安裝之後進行編譯的時候，出現了成堆的js異常，恩，原來vue的框架不能直接放到微信裡面用啊，雖然mpvue什麼的長得很像vue

微信需要自己的一套ui庫，專為微信小程式提供的那種，不是隨便一個vue的庫拿過來就能用的，例如vant-Weapp之類的，雖然我沒找到這玩意在哪，後來用來蘑菇街的minUI，這個ui庫附帶有一個命令列工具min，是可以編譯元件到微信的。

他可以直接建立一個工程，這就很容易誤解了，我嘗試使用它建立好的工程，然後新增元件，然而一旦

min dev

恩，剛剛install的元件就沒了，真讓人頭大。 正確的開啟方式應該是用其他的東西建立工程，然後使用min

不過不知道為啥，npm安裝的一些元件似乎mpvue讀不到，折騰了一段時間也沒有什麼頭緒，就決定換用WePy試試。

Wepy是騰訊的，他和mpvue一樣，有自己的一套檔案格式，可以直接採用Vue的開發環境直接開發，相對mpvue，他的元件是單個檔案。使用這個框架對於微信開發工具是有一定要求的，要關掉開發工具的es6轉es5這些亂七八糟的東西，這些看官方說明就ok了。

最讓人頭大的就是wepy使用redux管理資料，就是那個經常和react一起出現的那個redux。

0x3 Redux

redux分為三塊，reducer，type以及action。

type裡面定義了很多名稱，就僅僅只是名稱，沒有別的，這些名字標識著各種各種動作，當一個動作被觸發（比如說使用者點了一個按鈕什麼的），就會執行一個過程（Action）修改某些資料（Store），然後修改的結果合併到之前的資料中並且導致介面的變化（Reducer）。

觸發redux的是store的dispatch方法，它有這樣的使用方式：

	store.dispatch({type: 'ACTION_NAME',payload: 'DATA'});

這種方式會直接向Reducer給出Action的名字和被修改的資料，Reducer會被觸發並且處理這些資料，但是如果需要Action的參與，那麼就不應該這樣做了，而是改為：

	import {ACTION} from 'action/action'
	import wepy from 'wepy'
	@connect({
		processCode(state){
			return state.user.code;
		}
	},{
		action: ACTION
	})
	export default class ViewMain extends wepy.page{
	// 省略其他無關部分
	store.dispatch(action());
	

@connect這樣的類似於java中的註解的語法是ECMA2017的新語法，稱為裝飾器，在connect中，第一個object中可以編寫一些方法用來返回state中的一些資料,而第二個是各種Action或是一些Reducer，在store中dispatch他們就會導致Action被觸發，從而完整的完成redux的處理。