微信小程序基礎(chǔ)
|
2018 年過(guò)了不到一個(gè)月，時(shí)間雖短但有一樣新東西在這短短時(shí)間里就火了起來(lái)。從“跳一跳”，到“坦克大戰(zhàn)”，再到“頭腦王者”，微信小游戲好像突然將時(shí)間拉回到了過(guò)去。餐桌上、休息時(shí)大家不再是各自刷著微博、段子，而是聚在一起開始一場(chǎng)場(chǎng)緊（ge）張（zhong）刺（zhuang）激（bi）的對(duì)戰(zhàn)。小游戲充分利用了人們零碎的時(shí)間，并將娛樂(lè)和社交有效地結(jié)合起來(lái)。 在小游戲推出之前，本人是看衰小程序的，所以一直沒(méi)有入坑。然而，小游戲狠狠地打了我的臉，它的出現(xiàn)讓我眼前一亮，不單單讓我覺(jué)得小游戲有著很大的想象空間，更讓我覺(jué)得微信這個(gè)平臺(tái)有著無(wú)限的可能。 當(dāng)前，微信是將小游戲作為小程序的一個(gè)分類，所以暫時(shí)先亡羊補(bǔ)牢看看什么是小程序。 小程序要學(xué)一樣新東西的最好辦法自然是看官網(wǎng)教程。 小程序的官網(wǎng)是微信公眾平臺(tái)，其他什么亂七八糟的都是外包廣告啦~ 在官網(wǎng)上可以輕松地找到小程序和小游戲的教程。微信的教程也相當(dāng)詳細(xì)，這邊就不再贅述了。 如果跟著教程走，其中第二步微信會(huì)推薦你安裝一個(gè)開發(fā)者工具，這里要吹一波這個(gè)工具。 接近完美的開發(fā)者工具新版的開發(fā)者工具和之前僅能夠用于調(diào)試的代理工具完全不同，可以說(shuō)是鳥槍換炮。 接著就來(lái)看一下這個(gè)工具到底驚艷在哪里？ 首次打開工具，你會(huì)看到一個(gè)類似下圖的界面，會(huì)讓你填一些項(xiàng)目的基礎(chǔ)信息。其中的 AppID 可以通過(guò)注冊(cè)獲得，不過(guò)即使沒(méi)有 AppID 也可以先創(chuàng)建項(xiàng)目進(jìn)行開發(fā)，這里先選體驗(yàn)小程序。
如果，選擇一個(gè)空文件夾作為項(xiàng)目的目錄，那么，在工具的最下方就會(huì)出現(xiàn)一個(gè)模板項(xiàng)目的選項(xiàng)。勾選它，創(chuàng)建的項(xiàng)目就包含了一個(gè)微信的 Demo 項(xiàng)目。這個(gè)小功能當(dāng)然不是這個(gè)工具的亮點(diǎn)所在，這里先點(diǎn)確定生成一個(gè) Demo 項(xiàng)目。 登登登等~
有沒(méi)有被驚艷到？ 工具左上角的 3 個(gè)按鈕分別控制模擬器、編輯器和調(diào)試器區(qū)域的顯示與否。模擬器和調(diào)試器的模樣是不是非常熟悉？[滑稽] 這個(gè)開發(fā)者工具可以說(shuō)是集成了瀏覽器和 IDE，以及代理等工具于一身，所有的開發(fā)工作幾乎可以在這一個(gè)工具中完成，再也不用在一個(gè)個(gè)應(yīng)用之間來(lái)回切換了。 整潔、干凈、完美?。ㄒ晃哿?..） PS: 雖然，可以在設(shè)置里修改編輯器的配置，不過(guò)和真正的 IDE 比樣子還是丑了一點(diǎn)。 開發(fā)工具就說(shuō)到這，更多功能等你自己去探索?？赐炅丝犰诺墓ぞ?，平復(fù)一下心情，繼續(xù)來(lái)看 Demo 項(xiàng)目。 WXML, WXSS 和 WXS在 Demo 項(xiàng)目中，你會(huì)看到兩種新類型的文件：.wxml 和 .wxss。這也是我之前看（xian）衰（qi）小程序的主要原因，它并沒(méi)有使用標(biāo)準(zhǔn)的文件類型及語(yǔ)法，而是創(chuàng)立了一套微信自己的標(biāo)準(zhǔn)。 WXML先看一下 wxml 里面究竟有什么名堂？
<!--index.wxml-->
<view class="container">
<view class="userinfo">
<button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 獲取頭像昵稱 </button>
<block wx:else>
<image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
<text class="userinfo-nickname">{{userInfo.nickName}}</text>
</block>
</view>
<view class="usermotto">
<text class="user-motto">{{motto}}</text>
</view>
</view>
是不是又很熟悉？這不就是多了些默認(rèn)組件的 vue 嘛。 需要注意的是，{{}} 與引號(hào)之間不能有空格，否則會(huì)解析為字符串。其他語(yǔ)法層面就沒(méi)有什么難點(diǎn)了，再擼一遍基礎(chǔ)組件文檔就差不多了。 WXSSwxss 的變化就更小了，就多提供了一個(gè)單位 rpx。 1rpx 等于屏幕尺寸的 1/750。（UI 出 750 的圖就很好做啦...） 剩下就提供了一些簡(jiǎn)單的選擇器，類、Id、元素和前后的偽類，沒(méi)有其他的學(xué)習(xí)成本。 最后說(shuō)一下 wxs（Demo 項(xiàng)目中沒(méi)有用到）。 WXS什么是 WXS？微信官方是這樣說(shuō)的： WXS（WeiXin Script）是小程序的一套腳本語(yǔ)言，結(jié)合 WXML，可以構(gòu)建出頁(yè)面的結(jié)構(gòu)。 但是，整個(gè)文檔看下來(lái)，除了在模塊的處理上有些許的不同之外，其他可以說(shuō)是破產(chǎn)版的 js 吧。既然，它是 js 的子集，那么，都用 js 來(lái)寫也沒(méi)什么毛病，暫時(shí)也沒(méi)有看出什么場(chǎng)景必須使用它。 感覺(jué)整套都是 kpi 的產(chǎn)物哪... 小程序其他的配置文件文檔里已經(jīng)寫得很清晰了。至此，小程序的基礎(chǔ)就暫告一段落，下篇將關(guān)于小游戲相關(guān)內(nèi)容，敬請(qǐng)期待。
|
