經(jīng)典教程：一個微信小程序的實(shí)現(xiàn)--簡易計(jì)算器（附小程序方向思考圖） ... .
我想，小程序其實(shí)不必多說。網(wǎng)上有很多小程序和方向的分析文章，昨天晚上我也在思考小程序的第一波紅利將會是哪些方向，哪些人拿到。于是默默的打開手機(jī)應(yīng)用時長，耐心的刷完了應(yīng)用市場下載排行榜前1000的app，整理了這樣一份微信小程序適合方向的清單出來，僅供大家參考。
小程序的注冊已經(jīng)開放了，相信第一波紅利將很快到來。不能馬上啟動開發(fā)的同學(xué)有好的idea也可以試試注冊一下，占個坑也是好的呀。
畫完這張圖之后，我就琢磨怎么快速開發(fā)一個簡單的小程序出來。想了想，貌似計(jì)算器應(yīng)該是開發(fā)起來最快的，也是抽了點(diǎn)時間馬上做了一個簡易計(jì)算器出來。
簡易計(jì)算器先看效果圖（不知這張gif為何只能播一遍）
代碼就不多說了，已經(jīng)推到github上（傳送門），歡迎大家star和clone。界面全部使用flex布局，這里也不多說，不懂的同學(xué)請點(diǎn)這里查看阮一峰老師的文章，應(yīng)該是講的非常明白的，我的代碼也很清楚。這里主要介紹一下下面這張狀態(tài)機(jī)圖。
在這個簡單的計(jì)算器里，我一共定義了6個狀態(tài)，分別是：
init: 初始狀態(tài)。最初進(jìn)入時的狀態(tài)，或者重置后的狀態(tài)。
first_undot: 第一個操作數(shù)錄入中, 無小數(shù)點(diǎn)。這個狀態(tài)下界面上顯示的是第一個操作數(shù)。
first_dot: 第一個操作數(shù)錄入中, 有小數(shù)點(diǎn)。這個狀態(tài)下界面上顯示的是第一個操作數(shù)。
second_undot: 第二個操作數(shù)錄入中, 無小數(shù)點(diǎn)。這個狀態(tài)下界面上顯示的是第二個操作數(shù)。
second_dot: 第二個操作數(shù)錄入中, 有小數(shù)點(diǎn)。這個狀態(tài)下界面上顯示的是第二個操作數(shù)。
result: 結(jié)果狀態(tài)。這個狀態(tài)下界面上顯示的計(jì)算結(jié)果。
上圖就是這6個狀態(tài)的轉(zhuǎn)換關(guān)系。
狀態(tài)機(jī)在計(jì)算機(jī)系統(tǒng)中其實(shí)被大量使用，編譯器里面用得最多。隨手貼個TCP協(xié)議的狀態(tài)機(jī)圖給大家看看。
結(jié)束語
簡易計(jì)算器Github傳送門：https://github.com/boyce-ywr/wxapp-calc。歡迎參考。、
文件下載：wxapp-calc-master.zip
對于熟悉前端開發(fā)，熟悉angularjs或react開發(fā)的同學(xué)，微信小程序的開發(fā)應(yīng)該是非?？斓?。微信小程序完全支持ES6語法，強(qiáng)烈推薦使用flex布局。
