小程式 – 簡單入門

雲捲雲舒丶發表於2019-03-02

環境搭建

申請賬號

開發小程式的第一步，你需要擁有一個小程式帳號，通過這個帳號你就可以管理你的小程式。

點選 https://mp.weixin.qq.com/wxopen/waregister?action=step1 根據指引填寫資訊和提交相應的資料，就可以擁有自己的小程式帳號。

登入 https://mp.weixin.qq.com ，我們可以在選單 “設定”-“開發設定” 看到小程式的 AppID 了 。

小程式 – 簡單入門

小程式的 AppID 相當於小程式平臺的一個身份證，後續你會在很多地方要用到 AppID (注意這裡要區別於服務號或訂閱號的 AppID)。

有了小程式帳號之後，我們需要一個工具來開發小程式。

安裝開發工具

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

開啟小程式開發者工具，用微信掃碼登入開發者工具，準備開發你的第一個小程式吧！

第一個小程式

新建專案選擇小程式專案，選擇程式碼存放的硬碟路徑，填入剛剛申請到的小程式的 AppID，給你的專案起一個好聽的名字，最後，勾選 “建立 QuickStart 專案” (注意: 你要選擇一個空的目錄才會有這個選項)，點選確定，你就得到了你的第一個小程式了，點選頂部選單編譯就可以在 IDE 預覽你的第一個小程式。

小程式 – 簡單入門
小程式 – 簡單入門
小程式 – 簡單入門
小程式 – 簡單入門

編譯預覽

修改小程式必須要先編譯才能看到修改後的效果。

點選工具上的編譯按鈕，可以在工具的左側模擬器介面看到這個小程式的表現，也可以點選預覽按鈕，通過微信的掃一掃在手機上體驗你的第一個小程式。

程式碼構成

在上一章中，我們通過開發者工具快速建立了一個 QuickStart 專案。你可以留意到這個專案裡邊生成了不同型別的檔案:

.json 字尾的 JSON 配置檔案
.wxml 字尾的 WXML 模板檔案
.wxss 字尾的 WXSS 樣式檔案
.js 字尾的 JS 指令碼邏輯檔案
接下來我們分別看看這4種檔案的作用。

JSON配置

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

工具配置 project.config.json

通常大家在使用一個工具的時候，都會針對各自喜好做一些個性化配置，例如介面顏色、編譯配置等等，當你換了另外一臺電腦重新安裝工具的時候，你還要重新配置。

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

小程式配置 app.json

app.json 是對當前小程式的全域性配置，包括了小程式的所有頁面路徑、介面表現、網路超時時間、底部 tab 等。QuickStart 專案裡邊的 app.json 配置內容如下：

小程式 – 簡單入門

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

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

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

頁面配置 page.json

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

小程式 – 簡單入門

如果你整個小程式的風格是藍色調，那麼你可以在 app.json 裡邊宣告頂部顏色是藍色即可。實際情況可能不是這樣，可能你小程式裡邊的每個頁面都有不一樣的色調來區分不同功能模組，因此我們提供了 page.json，讓開發者可以獨立定義每個頁面的一些屬性，例如剛剛說的頂部顏色、是否允許下拉重新整理等等。
其他配置項細節可以參考文件 小程式的配置 page.json。

WXML 模板

HTML 是用來描述當前這個頁面的結構，WXML 的作用和HTML一樣，只不過是裡面的元素標籤是用小程式自己封裝的標籤名。

開啟 pages/index/index.wxml，你會看到以下的內容:

小程式 – 簡單入門

雖然WXML 和 HTML 非常相似，有標籤、屬性等等構成。但是也有很多不一樣的地方，我們來一一闡述一下：

  1. 標籤名字有點不一樣 往往寫 HTML 的時候，經常會用到的標籤是 div, p, span，開發者在寫一個頁面的時候可以根據這些基礎的標籤組合出不一樣的元件，例如日曆、彈窗等等。換個思路，既然大家都需要這些元件，為什麼我們不能把這些常用的元件包裝起來，大大提高我們的開發效率。 從上邊的例子可以看到，小程式的 WXML 用的標籤是 view, button, text 等等，這些標籤就是小程式給開發者包裝好的基本能力，我們還提供了地圖、視訊、音訊等等元件能力 更多詳細的元件講述參考下個章節 小程式的能力

  2. 多了一些 wx:if 這樣的屬性以及 {{ }} 這樣的表示式 在網頁的一般開發流程中，我們通常會通過 JS 操作 DOM (對應 HTML 的描述產生的樹)，以引起介面的一些變化響應使用者的行為。例如，使用者點選某個按鈕的時候，JS 會記錄一些狀態到 JS 變數裡邊，同時通過 DOM API 操控 DOM 的屬性或者行為，進而引起介面一些變化。當專案越來越大的時候，你的程式碼會充斥著非常多的介面互動邏輯和程式的各種狀態變數，顯然這不是一個很好的開發模式，因此就有了 MVVM 的開發模式(例如 React, Vue)，提倡把渲染和邏輯分離。簡單來說就是不要再讓 JS 直接操控 DOM，JS只需要管理狀態即可，然後再通過一種模板語法來描述狀態和介面結構的關係即可。 小程式的框架也是用到了這個思路，如果你需要把一個 Hello World 的字串顯示在介面上。 WXML 是這麼寫 :

    <text>{{msg}}</text>
複製程式碼

    JS 只需要管理狀態即可:

    this.setData({ msg: "Hello World" })
複製程式碼

    通過 {{ }} 的語法把一個變數繫結到介面上，我們稱為資料繫結。僅僅通過資料繫結還不夠完整的描述狀態和介面的關係，還需要 if/else, for等控制能力，在小程式裡邊，這些控制能力都用 wx: 開頭的屬性來表達。 更詳細的文件可以參考 WXML

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 – 事件 。
此外你還可以在 JS 中呼叫小程式提供的豐富的 API，利用這些 API 可以很方便的調起微信提供的能力，例如獲取使用者資訊、本地儲存、微信支付等。在前邊的 QuickStart 例子中，在 pages/index/index.js 就呼叫了 wx.getUserInfo 獲取微信使用者的頭像和暱稱，最後通過 setData 把獲取到的資訊顯示到介面上。更多 API 可以參考文件 小程式的API 。

地圖demo

如果要在當前的小程式中新增一個地圖頁面，需要再app.json中增加配置，然後，在pages資料夾下新增 map資料夾以及map.js、map.json、map.wxml、map.wxss：

小程式 – 簡單入門

小程式提供了很多元件，我們僅僅需要在map.wxml 使用map元件，並設定相應的屬性名即可：

小程式 – 簡單入門

map元素上繫結了兩個變數longitude、latitude，需要再map.js對其進行賦值：

小程式 – 簡單入門

圖中在onReady生命週期中利用 小程式api – wx.getLocation獲取到當前的經度、緯度，獲取到之後 利用setData方法對longitude、latitude進行初始化。

最後地圖頁面效果：

小程式 – 簡單入門

結束語

本文只是對微信小程式簡單介紹，詳細文件可查閱 微信小程式基礎

相關文章