微信小程序入門指南

本文同步發布在 https://www.cssge.com

因為下個項目需要用微信小程序來開發，所以就找了小程序開發文檔來研究。下面記錄一下微信小程序的主要開發流程和語法。

賬號注冊

開發小程序的第一步，你需要擁有一個小程序帳號，通過這個帳號你就可以管理你的小程序。注冊地址~點我點我，注冊過程這里就不說了，按照要求一步一步來就行了。

注冊成后，登錄小程序管理平台，在這里你可以管理你的小程序的權限，查看數據報表，發布小程序等操作。

我們可以在菜單 “設置”-“開發設置” 可以小程序的 AppID 。

小程序的 AppID 相當於小程序平台的一個身份證，后續你會在很多地方要用到 AppID。

有了賬號，我們還需要一個開發工具來開發小程序。

安裝開發工具

前往 開發者工具下載頁面 ，根據自己的操作系統下載對應的安裝包進行安裝，有關開發者工具更詳細的介紹可以查看 《開發者工具介紹》 。

打開小程序開發者工具，用微信掃碼登錄開發者工具，准備開發你的第一個小程序吧！

框架介紹

小程序提供了自己的視圖層描述語言 WXML 和 WXSS，以及基於 JavaScript 的邏輯層框架，並在視圖層與邏輯層間提供了數據傳輸和事件系統，可以讓開發者可以方便的聚焦於數據與邏輯上。類似於現在非常熱門的MVVM框架。

響應的數據綁定

框架的核心是一個響應的數據綁定系統。

整個系統分為兩塊。視圖層（View）和邏輯層（App Service）。

框架可以讓數據與視圖非常簡單地保持同步。當做數據修改的時候，只需要在邏輯層修改數據，視圖層就會做相應的更新。

下面看個簡單的🌰：

// view 層

<view> Hello {{name}}! </view>
<button bindtap="changeName"> Click me! </button>

// App Service 層

var helloData = {
  name: 'WeChat'
}

// Register a Page.
Page({
  data: helloData,
  changeName: function(e) {
    // sent data change to view
    this.setData({
      name: 'MINA'
    })
  }
})

• 我們通過框架將邏輯層數據中的 name 與視圖層的 name 進行了綁定，所以在頁面一打開的時候會顯示 Hello WeChat!
• 當點擊按鈕的時候，視圖層會發送 changeName 的事件給邏輯層，邏輯層找到對應的事件處理函數。
• 邏輯層執行了 setData 的操作，將 name 從 WeChat 變為 MINA，因為該數據和視圖層已經綁定了，從而視圖層會自動改變為 Hello MINA! 。

代碼結構

我們通過開發者工具快速創建了一個項目。你可以留意到這個項目里邊生成了不同類型的文件:

1. json 后綴的 JSON 配置文件
2. wxml 后綴的 WXML 模板文件
3. wxss 后綴的 WXSS 樣式文件
4. js 后綴的 JS 腳本邏輯文件

接下來我們分別看看這4種文件的作用。

JSON 配置

我們可以看到在項目的根目錄有一個 app.json 和 project.config.json，此外在 pages/logs 目錄下還有一個 logs.json，我們依次來說明一下他們的用途。

小程序配置 app.json

app.json 是對當前小程序的全局配置，包括了小程序的所有頁面路徑、界面表現、網絡超時時間、底部 tab 等。

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  }
}

我們簡單說一下這個配置各個項的含義:

1. pages字段 —— 用於描述當前小程序所有頁面路徑，這是為了讓微信客戶端知道當前你的小程序頁面定義在哪個目錄。
2. window字段 —— 小程序所有頁面的頂部背景顏色，文字顏色定義在這里的。

其他配置項細節可以參考文檔 小程序的配置 app.json 。

工具配置 project.config.json

小程序開發者工具在每個項目的根目錄都會生成一個 project.config.json，你在工具上做的任何配置都會寫入到這個文件，當你重新安裝工具或者換電腦工作時，你只要載入同一個項目的代碼包，開發者工具就自動會幫你恢復到當時你開發項目時的個性化配置，其中會包括編輯器的顏色、代碼上傳時自動壓縮等等一系列選項。

其他配置項細節可以參考文檔 開發者工具的配置 。

頁面配置 page.json

這里的 page.json 其實用來表示 pages/logs 目錄下的 logs.json 這類和小程序頁面相關的配置。

如果你整個小程序的風格是藍色調，那么你可以在 app.json 里邊聲明頂部顏色是藍色即可。實際情況可能不是這樣，可能你小程序里邊的每個頁面都有不一樣的色調來區分不同功能模塊，因此我們提供了 page.json，讓開發者可以獨立定義每個頁面的一些屬性，例如剛剛說的頂部顏色、是否允許下拉刷新等等。

其他配置項細節可以參考文檔 小程序的配置 page.json 。

WXML 模板

在小程序中沒有HTML，但是有XWML，WXML 充當的就是類似 HTML 的角色。打開 pages/index/index.wxml，你會看到以下的內容:

<view class="container">
  <view class="userinfo">
    <button wx:if="{{!hasUserInfo && canIUse}}"> 獲取頭像昵稱 </button>
    <block wx:else>
      <image 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>

有沒有發現和 HTML 非常相似，有標簽、屬性等等構成。

小程序的 WXML 用的標簽是 view, button, text 等等，這些標簽就是小程序給開發者包裝好的基本能力，微信小程序還提供了地圖、視頻、音頻等等組件能力 更多詳細的組件請參考 小程序的能力

WXSS 樣式

WXSS 具有 CSS 大部分的特性，小程序在 WXSS 也做了一些擴充和修改。

1. 新增了尺寸單位。在寫 CSS 樣式時，開發者需要考慮到手機設備的屏幕會有不同的寬度和設備像素比，采用一些技巧來換算一些像素單位。WXSS 在底層支持新的尺寸單位 rpx ，開發者可以免去換算的煩惱，只要交給小程序底層來換算即可，由於換算采用的浮點數運算，所以運算結果會和預期結果有一點點偏差。

2. 提供了全局的樣式和局部樣式。和前邊 app.json, page.json 的概念相同，你可以寫一個 app.wxss 作為全局樣式，會作用於當前小程序的所有頁面，局部頁面樣式 page.wxss 僅對當前頁面生效。

3. 此外 WXSS 僅支持部分 CSS 選擇器

更詳細的文檔可以參考 WXSS 。

JS 交互邏輯

一個服務僅僅只有界面展示是不夠的，還需要和用戶做交互：響應用戶的點擊、獲取用戶的位置等等。在小程序里邊，我們就通過編寫 JS 腳本文件來處理用戶的操作。

<view>{{ msg }}</view>
<button bindtap="clickMe">點擊我</button>

點擊 button 按鈕的時候，我們希望把界面上 msg 顯示成 "Hello World"，於是我們在 button 上聲明一個屬性: bindtap ，在 JS 文件里邊聲明了 clickMe 方法來響應這次點擊操作：

Page({
  clickMe: function() {
    this.setData({ msg: "Hello World" })
  }
})

響應用戶的操作就是這么簡單，更詳細的事件可以參考文檔 WXML - 事件 。

總結

通過簡單了解，我們已經基本上可以上手開發一個簡單的小程序了。后面會繼續分享在小程序開發過程中遇到的問題。