教你做一個開源的小程式計算器

這是一個小程式新手練習的專案（基於微信quick demo改寫），做了一個計算器。有基本的UI，有基本的跳轉及簡單的js邏輯，很適合初學者閱讀。

讀別人的程式碼，就是歸整自己的程式設計技能。

涉及微信小程式開發相關知識：

1、CSS Flexbox佈局

2、事件綁定、頁面跳轉

3、Page、 window、App全域設定

4、wxml、wxsss、js、json檔案使用方法

5、view、text、icon、button元件使用方法

6、navigate 、wx.setStorageSync、資料綁定等API

Setup

#1、Clone the repo

$ git clone github.com/dunizb/wxapp-sCalc.git

2、Import to Wechat DEV Tools

#把專案導入到微信開發者工具中即可

編者註：源碼中有兩點值得注意－

1，作者並沒有給每一個計算器按鈕綁定一個事件函數，統一綁定於blickBtn這一函數，而透過id與e.target.id來分別使用者點擊的是哪一個按鈕，並且作者直接用了計算按鈕的屏顯數字做了id，簡單直接

2，點擊按鈕時有一個紅色的高亮效果，該效果是透過css實現的：

.item:active {
background-color: #ff0000;
}

一行簡單的程式碼，就使UE體驗上升了不少。值得學習~

另外，再分享一個小程式遊戲，雖說微信官方禁止小遊戲上架，但是誰又能阻止學習者的腳步呢。微信小程式文件中那些繪圖API與動畫API，可能也是為將來做遊戲準備的。

github.com/natee/wxapp-2048

這個一個2048遊戲，如果喜歡計算器風格的demo，這個可能你也會喜歡。

以上是教你做一個開源的小程式計算器的詳細內容。更多資訊請關注PHP中文網其他相關文章！