小程序模板網(wǎng)

經(jīng)典教程:一個微信小程序的實(shí)現(xiàn)--簡易計算器(附小程序方向思考圖) ... .

發(fā)布時間:2018-03-28 15:12 所屬欄目:小程序開發(fā)教程
作者:游泳的石頭
前言

我想,小程序其實(shí)不必多說。網(wǎng)上有很多小程序和方向的分析文章,昨天晚上我也在思考小程序的第一波紅利將會是哪些方向,哪些人拿到。于是默默的打開手機(jī)應(yīng)用時長,耐心的刷完了應(yīng)用市場下載排行榜前1000的app,整理了這樣一份微信小程序適合方向的清單出來,僅供大家參考。

 

小程序的注冊已經(jīng)開放了,相信第一波紅利將很快到來。不能馬上啟動開發(fā)的同學(xué)有好的idea也可以試試注冊一下,占個坑也是好的呀。

畫完這張圖之后,我就琢磨怎么快速開發(fā)一個簡單的小程序出來。想了想,貌似計算器應(yīng)該是開發(fā)起來最快的,也是抽了點(diǎn)時間馬上做了一個簡易計算器出來。

簡易計算器

先看效果圖(不知這張gif為何只能播一遍)

 

代碼就不多說了,已經(jīng)推到github上(傳送門),歡迎大家star和clone。界面全部使用flex布局,這里也不多說,不懂的同學(xué)請點(diǎn)這里查看阮一峰老師的文章,應(yīng)該是講的非常明白的,我的代碼也很清楚。這里主要介紹一下下面這張狀態(tài)機(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)下界面上顯示的計算結(jié)果。

上圖就是這6個狀態(tài)的轉(zhuǎn)換關(guān)系。

狀態(tài)機(jī)在計算機(jī)系統(tǒng)中其實(shí)被大量使用,編譯器里面用得最多。隨手貼個TCP協(xié)議的狀態(tài)機(jī)圖給大家看看。

 

 

結(jié)束語

簡易計算器Github傳送門:https://github.com/boyce-ywr/wxapp-calc。歡迎參考。、

文件下載:wxapp-calc-master.zip

對于熟悉前端開發(fā),熟悉angularjs或react開發(fā)的同學(xué),微信小程序的開發(fā)應(yīng)該是非??斓摹N⑿判〕绦蛲耆С諩S6語法,強(qiáng)烈推薦使用flex布局。

 


本文地址:http://22321a.com/wxmini/doc/course/22915.html 復(fù)制鏈接 如需定制請聯(lián)系易優(yōu)客服咨詢:800182392 點(diǎn)擊咨詢
QQ在線咨詢