剖析簡易計算器帶你入門微信小程序開發

寫在前面，可是重點在後面

這是教程，也不是教程。

能夠先看Demo的操做動圖，看看是個什麼玩意兒，GitHub地址（https://github.com/dunizb/wxapp-sCalc）

自從微信小程序內測以來，個人網絡信息幾乎被它刷屏，一瞬間，都不知道發生了什麼。特別是當晚有人熬夜吐血出教程，我勒個去，這麼拼，感受不立馬學習等會兒就會被別人踩死在這個行業。惶恐惶恐的過來幾天，等到了國慶終於也能夠跟風熬夜研究了。

好吧，來吧，因此說菜鳥只會寫計算器。。。。嗯，是的，我想不出什麼好創意。下面介紹一下這個簡易計算器，以及開發過程當中踩的一些坑吧。

首先，什麼Web開發者工具之類的、文檔之類的，網上多的是，我就不重複了，已經不須要什麼破解了，微信官方已經修改驗證機制，沒有APPID也能玩了，只不過部分功能受限。

其次，微信小程序開發其實不難，在沒掌握以前我也是不明覺厲，看似高大上。其實他相對咱們傳統的寫法更簡單，高度封裝了，按照他們的規則和規範來，寫起來體驗仍是很不錯的。

但由於沒有權限，目前的微信小程序都是在開發者工具的模擬器中運行的，不知道在微信上真實狀況如何。

xxx.wxml文件和xxx.wxss文件

wxml是微信本身開發的一套標記語言，你能夠直接看作是HTML文件也沒問題，由於咱們的界面構建都是在這個文件裏編寫，只是沒有HTML標籤了，只有wxml標籤了，而wxml標籤數量也是不多的。

wxss是微信本身開發的一套樣式文件格式，等同於咱們的CSS文件，寫法也是同樣的，只是換了個文件後綴，之前咱們怎麼寫CSS的在微信小程序中咱們依然怎麼寫。

wxml加上wxss咱們就能夠構建出咱們想要的界面UI了。

xxx.js和xxx.json文件

xxx.js文件就是寫JS的地方，每一個xxx.js對應一個同名的xxx.wxml文件，xxx.js文件必須有Page對象，哪怕該頁面沒有任何業務邏輯。輸入Page微信Web開發者工具會自動生成一些列空方法待你實現，固然你能夠不實現，只是把你把骨架搭好而已。

xxx.josn文件就是配置文件，通常是全局配置才用，好比根目錄的app.josn，定義了小程序由哪些頁面構成，小程序導航Bar樣式等，屬性看名字就知道什麼意思了。

pages屬性配置的是頁面，第一個就是啓動頁，全部頁面都必須在這裏配置，若是你建了一個頁面忘記在這裏添加了，那麼你會很鬱悶的，應爲到時候頁面跳轉的時候onLoad方法不會執行，我就被這個浪費好多時間抓耳饒腮好奇不斷。

總體結構

看看下面的項目結構圖，一個頁面是一個文件夾，一個面一般都有js、wxml、wxss，wxml和js文件是必須的，能夠有沒有樣式。

calc（計算器頁面）、history（歷史記錄）、index（小程序首頁、啓動頁）、logs（日誌信息）、utils（js工具類）,logs和utils是自帶的，能夠有能夠沒有。

源碼分析

這個簡易計算器界面佈局依然延續祖制，採用CSS Flexbox佈局，貌似微信官方也是這麼推薦的（官方文檔中就是使用Flexbox）。

計算器的按鍵，都是用<text>標籤來作的，加上wxss樣式便可，固然也能夠直接用button組件。

wxml:

<view class="btnGroup">
    <view class="item blue" bindtap="clickBtn" id="{{id9}}">9</view>
    <view class="item blue" bindtap="clickBtn" id="{{id8}}">8</view>
    <view class="item blue" bindtap="clickBtn" id="{{id7}}">7</view>
    <view class="item orange" bindtap="clickBtn" id="{{idj}}">－</view>
</view>

這裏bindtap，看名字就知道是用來綁定事件的，跟咱們在HTML中使用onclick一個道理。id={{id9}} 雙大括號中的值來自js文件中data屬性定義的同名屬性

wxss:

.btnGroup {
    display: flex;
    flex-direction: row;
    flex: 1;
    width: 100%;
    background-color: #fff;
}
.item {
    width:25%;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    margin-top: 1px;
    margin-right: 1px;
}
.item:active {
    background-color: #ff0000;
}

css就沒什麼好說的了，惟一須要注意的是微信提供了一個尺寸單位rpx，responsive pixel ，能夠根據屏幕寬度進行自適應，官網文檔有詳細解析。我在計算器的history頁面也有使用：

主要涉及組件

• view、text，大部分頁面都是它倆哥們。

• 按鈕（button），index頁面的按鈕「簡易計算器」
  

• 圖標（icon）,計算機的歷史記錄安靜使用的就是icon自帶的圖標之一。
  

• 標記方式調整頁面（navigator）
  

• 圖片（Image），首頁頭像
  

• for循環，歷史記錄顯示頁面用到了，得從Storage中讀取數據展現，而Storage中保存就是一個數組

<block wx:for="{{logs}}" wx:for-item="log">
    <view class="item">{{log}}</view>
</block>

主要涉及API

• wx.navigateTo，導航，跳轉，在當前頁面打開新頁面
  

• Storage，本地存儲，保存計算曆史記錄用到了它
  有setStorage、getStorage，同時還有帶Sync結尾的異步方法

注意事項

1. 每新建一個頁面必定要記得去app.josn的pages屬性中添加，否則的話使用navigateTo跳轉到新頁面後新頁面的onLoad方法不會執行。

2. 微信小程序中沒有window等JavaScript對象，因此在寫JS前想好替代方案，好比本計算器就被坑大了，原本使用eval函數能夠方便的計算表達式，結果無法用，繞了好大的彎。

3. 微信小程序中的JS並非真正的JS，wxss也並非真正的CSS，因此寫的時候仍是要注意一下。

4. 本計算器存在不完善和bug，由於重點不是實現所有功能，而是搞清楚微信小程序開發方法，因此非關注點不用在乎。

微信小程序整體來講不難，官方的文檔也寫的很是好，認真閱讀官方文檔就好。

---

最後，歡迎小夥伴star或fork【微信小程序版簡易計算器】進行參考和學習，因爲本人水平有限，程序中或博客中若有不對或錯誤之處請留言指出，謝謝！

另外，個人github還有【微信小程序-豆瓣電影】項目，歡迎學習