微信小程序基礎

發布時間：2018-05-07 14:58 所屬欄目：小程序開發教程

2018 年過了不到一個月，時間雖短但有一樣新東西在這短短時間里就火了起來。從“跳一跳”，到“坦克大戰”，再到“頭腦王者”，微信小游戲好像突然將時間拉回到了過去。餐桌上、休息時大家不再是各自刷著微博、段子，而是聚在一起開始一場場緊（ge）張（zhong）刺（zhuang）激（bi）的對戰。小游戲充分利用了人們零碎的時間，并將娛樂和社交有效地結合起來。

在小游戲推出之前，本人是看衰小程序的，所以一直沒有入坑。然而，小游戲狠狠地打了我的臉，它的出現讓我眼前一亮，不單單讓我覺得小游戲有著很大的想象空間，更讓我覺得微信這個平臺有著無限的可能。

當前，微信是將小游戲作為小程序的一個分類，所以暫時先亡羊補牢看看什么是小程序。

小程序

要學一樣新東西的最好辦法自然是看官網教程。

小程序的官網是微信公眾平臺，其他什么亂七八糟的都是外包廣告啦~

在官網上可以輕松地找到小程序和小游戲的教程。微信的教程也相當詳細，這邊就不再贅述了。

如果跟著教程走，其中第二步微信會推薦你安裝一個開發者工具，這里要吹一波這個工具。

接近完美的開發者工具

新版的開發者工具和之前僅能夠用于調試的代理工具完全不同，可以說是鳥槍換炮。

接著就來看一下這個工具到底驚艷在哪里？

首次打開工具，你會看到一個類似下圖的界面，會讓你填一些項目的基礎信息。其中的 AppID 可以通過注冊獲得，不過即使沒有 AppID 也可以先創建項目進行開發，這里先選體驗小程序。

如果，選擇一個空文件夾作為項目的目錄，那么，在工具的最下方就會出現一個模板項目的選項。勾選它，創建的項目就包含了一個微信的 Demo 項目。這個小功能當然不是這個工具的亮點所在，這里先點確定生成一個 Demo 項目。

登登登等~

有沒有被驚艷到？

工具左上角的 3 個按鈕分別控制模擬器、編輯器和調試器區域的顯示與否。模擬器和調試器的模樣是不是非常熟悉？[滑稽]

這個開發者工具可以說是集成了瀏覽器和 IDE，以及代理等工具于一身，所有的開發工作幾乎可以在這一個工具中完成，再也不用在一個個應用之間來回切換了。

整潔、干凈、完美！（要被吸粉了...）

PS: 雖然，可以在設置里修改編輯器的配置，不過和真正的 IDE 比樣子還是丑了一點。

開發工具就說到這，更多功能等你自己去探索。看完了酷炫的工具，平復一下心情，繼續來看 Demo 項目。

WXML, WXSS 和 WXS

在 Demo 項目中，你會看到兩種新類型的文件：.wxml 和 .wxss。這也是我之前看（xian）衰（qi）小程序的主要原因，它并沒有使用標準的文件類型及語法，而是創立了一套微信自己的標準。

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>

是不是又很熟悉？這不就是多了些默認組件的 vue 嘛。

需要注意的是，{{}} 與引號之間不能有空格，否則會解析為字符串。其他語法層面就沒有什么難點了，再擼一遍基礎組件文檔就差不多了。