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