剖析簡(jiǎn)易計(jì)算器帶你入門(mén)微信小程序開(kāi)發(fā)
這是教程，也不是教程。
可以先看Demo的操作動(dòng)圖，看看是個(gè)什么玩意兒，GitHub地址（https://github.com/dunizb/wxapp-sCalc）
自從微信小程序內(nèi)測(cè)以來(lái)，我的網(wǎng)絡(luò)信息幾乎被它刷屏，一瞬間，都不知道發(fā)生了什么。特別是當(dāng)晚有人熬夜吐血出教程，我勒個(gè)去，這么拼，感覺(jué)不立馬學(xué)習(xí)等會(huì)兒就會(huì)被別人踩死在這個(gè)行業(yè)。惶恐惶恐的過(guò)來(lái)幾天，等到了國(guó)慶終于也可以跟風(fēng)熬夜研究了。
好吧，來(lái)吧，所以說(shuō)菜鳥(niǎo)只會(huì)寫(xiě)計(jì)算器。。。。嗯，是的，我想不出什么好創(chuàng)意。下面介紹一下這個(gè)簡(jiǎn)易計(jì)算器，以及開(kāi)發(fā)過(guò)程中踩的一些坑吧。
首先，什么Web開(kāi)發(fā)者工具之類(lèi)的、文檔之類(lèi)的，網(wǎng)上多的是，我就不重復(fù)了，已經(jīng)不需要什么破解了，微信官方已經(jīng)修改驗(yàn)證機(jī)制，沒(méi)有APPID也能玩了，只不過(guò)部分功能受限。
其次，微信小程序開(kāi)發(fā)其實(shí)不難，在沒(méi)掌握之前我也是不明覺(jué)厲，看似高大上。其實(shí)他相對(duì)我們傳統(tǒng)的寫(xiě)法更簡(jiǎn)單，高度封裝了，按照他們的規(guī)則和規(guī)范來(lái)，寫(xiě)起來(lái)體驗(yàn)還是很不錯(cuò)的。
但因?yàn)闆](méi)有權(quán)限，目前的微信小程序都是在開(kāi)發(fā)者工具的模擬器中運(yùn)行的，不知道在微信上真實(shí)情況如何。
xxx.wxml文件和xxx.wxss文件wxml是微信自己開(kāi)發(fā)的一套標(biāo)記語(yǔ)言，你可以直接看做是HTML文件也沒(méi)問(wèn)題，因?yàn)槲覀兊慕缑鏄?gòu)建都是在這個(gè)文件里編寫(xiě)，只是沒(méi)有HTML標(biāo)簽了，只有wxml標(biāo)簽了，而wxml標(biāo)簽數(shù)量也是很少的。
wxss是微信自己開(kāi)發(fā)的一套樣式文件格式，等同于我們的CSS文件，寫(xiě)法也是一樣的，只是換了個(gè)文件后綴，以前我們?cè)趺磳?xiě)CSS的在微信小程序中我們依然怎么寫(xiě)。
wxml加上wxss我們就可以構(gòu)建出我們想要的界面UI了。
xxx.js和xxx.json文件xxx.js文件就是寫(xiě)JS的地方，每個(gè)xxx.js對(duì)應(yīng)一個(gè)同名的xxx.wxml文件，xxx.js文件必須有Page對(duì)象，哪怕該頁(yè)面沒(méi)有任何業(yè)務(wù)邏輯。輸入Page微信Web開(kāi)發(fā)者工具會(huì)自動(dòng)生成一些列空方法待你實(shí)現(xiàn)，當(dāng)然你可以不實(shí)現(xiàn)，只是把你把骨架搭好而已。
xxx.josn文件就是配置文件，一般是全局配置才用，比如根目錄的app.josn，定義了小程序由哪些頁(yè)面構(gòu)成，小程序?qū)Ш紹ar樣式等，屬性看名字就知道什么意思了。
pages屬性配置的是頁(yè)面，第一個(gè)就是啟動(dòng)頁(yè)，所有頁(yè)面都必須在這里配置，如果你建了一個(gè)頁(yè)面忘記在這里添加了，那么你會(huì)很郁悶的，應(yīng)為到時(shí)候頁(yè)面跳轉(zhuǎn)的時(shí)候onLoad方法不會(huì)執(zhí)行，我就被這個(gè)浪費(fèi)好多時(shí)間抓耳饒腮好奇不斷。
整體結(jié)構(gòu)看看下面的項(xiàng)目結(jié)構(gòu)圖，一個(gè)頁(yè)面是一個(gè)文件夾，一個(gè)面通常都有js、wxml、wxss，wxml和js文件是必須的，可以有沒(méi)有樣式。
calc（計(jì)算器頁(yè)面）、history（歷史記錄）、index（小程序首頁(yè)、啟動(dòng)頁(yè)）、logs（日志信息）、utils（js工具類(lèi)）,logs和utils是自帶的，可以有可以沒(méi)有。
源碼分析這個(gè)簡(jiǎn)易計(jì)算器界面布局依然延續(xù)祖制，采用CSS Flexbox布局，貌似微信官方也是這么推薦的（官方文檔中就是使用Flexbox）。
計(jì)算器的按鍵，都是用<text>標(biāo)簽來(lái)做的，加上wxss樣式即可，當(dāng)然也可以直接用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，看名字就知道是用來(lái)綁定事件的，跟我們?cè)贖TML中使用onclick一個(gè)道理。id={{id9}} 雙大括號(hào)中的值來(lái)自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就沒(méi)什么好說(shuō)的了，唯一需要注意的是微信提供了一個(gè)尺寸單位rpx，responsive pixel ，可以根據(jù)屏幕寬度進(jìn)行自適應(yīng)，官網(wǎng)文檔有詳細(xì)解析。我在計(jì)算器的history頁(yè)面也有使用：
主要涉及組件
- view、text，大部分頁(yè)面都是它倆哥們。
-
按鈕（button），index頁(yè)面的按鈕“簡(jiǎn)易計(jì)算器”
-
圖標(biāo)（icon）,計(jì)算機(jī)的歷史記錄安靜使用的就是icon自帶的圖標(biāo)之一。
-
標(biāo)記方式調(diào)整頁(yè)面（navigator）
-
圖片（Image），首頁(yè)頭像
-
for循環(huán)，歷史記錄顯示頁(yè)面用到了，得從Storage中讀取數(shù)據(jù)展示，而Storage中保存就是一個(gè)數(shù)組
<block wx:for="{{logs}}" wx:for-item="log"> <view class="item">{{log}}</view> </block>
主要涉及API
-
wx.navigateTo，導(dǎo)航，跳轉(zhuǎn)，在當(dāng)前頁(yè)面打開(kāi)新頁(yè)面
-
Storage，本地存儲(chǔ)，保存計(jì)算歷史記錄用到了它
有setStorage、getStorage，同時(shí)還有帶Sync結(jié)尾的異步方法
-
每新建一個(gè)頁(yè)面一定要記得去app.josn的pages屬性中添加，不然的話使用navigateTo跳轉(zhuǎn)到新頁(yè)面后新頁(yè)面的onLoad方法不會(huì)執(zhí)行。
-
微信小程序中沒(méi)有window等JavaScript對(duì)象，所以在寫(xiě)JS前想好替代方案，比如本計(jì)算器就被坑大了，本來(lái)使用eval函數(shù)可以方便的計(jì)算表達(dá)式，結(jié)果沒(méi)法用，繞了好大的彎。
-
微信小程序中的JS并不是真正的JS，wxss也并不是真正的CSS，所以寫(xiě)的時(shí)候還是要注意一下。
- 本計(jì)算器存在不完善和bug，因?yàn)橹攸c(diǎn)不是實(shí)現(xiàn)全部功能，而是搞清楚微信小程序開(kāi)發(fā)方法，所以非關(guān)注點(diǎn)不用在意。
微信小程序總體來(lái)說(shuō)不難，官方的文檔也寫(xiě)的非常好，認(rèn)真閱讀官方文檔就好。
