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