這是教程,也不是教程。
可以先看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è)面也有使用:
按鈕(button),index頁(yè)面的按鈕“簡(jiǎn)易計(jì)算器”
圖標(biāo)(icon),計(jì)算機(jī)的歷史記錄安靜使用的就是icon自帶的圖標(biāo)之一。
標(biāo)記方式調(diào)整頁(yè)面(navigator)
圖片(Image),首頁(yè)頭像
<block wx:for="{{logs}}" wx:for-item="log"> <view class="item">{{log}}</view> </block>
wx.navigateTo,導(dǎo)航,跳轉(zhuǎn),在當(dāng)前頁(yè)面打開(kāi)新頁(yè)面
每新建一個(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í)候還是要注意一下。
微信小程序總體來(lái)說(shuō)不難,官方的文檔也寫(xiě)的非常好,認(rèn)真閱讀官方文檔就好。
工作日 8:30-12:00 14:30-18:00
周六及部分節(jié)假日提供值班服務(wù)