筆者由於工作需要，曾經參加過一個微信小程式同 SAP 系統整合的專案，因此從零開始學習了微信小程式的開發知識。這裡透過系列文章把自己所學分享出來，希望對相關學習者有所幫助。

# 步驟1：微信小程式的申請和開發環境的搭建

本步驟主要是微信小程式的註冊和開發環境的搭建。

首先我們要在[微信官方網站](https://mp.weixin.qq.com/cgi-bin/wx)申請一個屬於自己的微信小程式：

![](https://img-blog.csdnimg.cn/img_convert/b6ef16fb38279b6a8858d5846b41c3ea.png)

點選按鈕 `前往註冊`。注意我們需要使用一個沒有註冊過微信小程式或者微信公眾號的郵箱。我用的是網易郵箱。註冊之後，郵箱會收到一封啟用郵件。

![](https://img-blog.csdnimg.cn/img_convert/86fcf5cf9c16d06af50b6e2339eafc05.png)

啟用之後，就可以進入小程式主體資訊登記頁面了。這裡需要使用身份證號碼和手機驗證碼進行登記。

![](https://img-blog.csdnimg.cn/img_convert/b9ca92f53ab0fa0c96f7eee0550943b4.png)

登記完畢之後，就可以進入微信開發者工具了。我選擇的是小程式專案：

![](https://img-blog.csdnimg.cn/img_convert/9db2737ecd9da5b4a14922f586d7f70c.png)

在開發管理->開發設計選單裡，找到我們剛才註冊的微信小程式的 ID：抄下來，後面要用。

![](https://img-blog.csdnimg.cn/img_convert/c5c2c6c9ce5e6c900cf44067fb62371e.png)

接下來，在下面這個[連結](https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html)去下載微信開發者工具：

大家可以把它當成是一個整合開發環境(IDE).

![](https://img-blog.csdnimg.cn/img_convert/e7c4fec33f65895121001d77f592d6f4.png)

安裝完畢後啟動微信開發者工具，會要求我們指定一個本地專案目錄和填寫微信小程式的 AppID. 這個 ID 我們前一步已經抄下來了。
直接填進去，勾上 `建立普通快速啟動模板`，然後微信開發者工具會自動幫我們建立一個 `Hello World` 版本的微信小程式資原始檔出來。

![](https://img-blog.csdnimg.cn/img_convert/3118f011f0d2175fcffe33b96d93c5ee.png)

自動建立好的小程式如下圖所示，介面顯示就是一個簡單的 Hello World 文字。

![](https://img-blog.csdnimg.cn/img_convert/121fce61bda7f694c416e16d7d99166b.png)

我們點選 `上傳` 按鈕：

![](https://img-blog.csdnimg.cn/img_convert/c97515c6faa1e4a28b53e32f91316c95.png)

隨便維護一個版本號，比如 1.0.0, 然後點選 `上傳`。

![](https://img-blog.csdnimg.cn/img_convert/e33fc6fb10bee18949c7f4b7afdc7ad0.png)

然後回到小程式管理後臺，能看到我們上面透過微信開發者工具上傳的 1.0.0 版本的小程式了。我們點選 `提交稽核` 右邊的下拉選單，選擇 `選為體驗版本`：

![](https://img-blog.csdnimg.cn/img_convert/44c44a0c70f44e3d41e3cdbc4c49ed8b.png)

會生成一個體驗版的`二維碼`，這時傳送給你的朋友，就可以使用這個小程式了。

![](https://img-blog.csdnimg.cn/img_convert/b3109c8627af9c9727fa8b67d36a7b0f.png)

當您的朋友在手機上掃描該二維碼，會看到如下介面：該小程式標註了`體驗版`的提示：

![](https://img-blog.csdnimg.cn/img_convert/12af38d88d5652f380ac5d6091e779c6.png)

點選`前往體驗版`, 就能看到微信開發者工具自動生成的 Hello World 小程式了。

![](https://img-blog.csdnimg.cn/img_convert/9471494b909cd66ca4d9b12853c2a045.png)

本文下一步驟會介紹微信小程式的檢視設計原理。

![](https://img-blog.csdnimg.cn/img_convert/a979e705c2adbf790f8d376894aaaea4.png)

# 步驟2：微信小程式的檢視設計

本文以小程式的檢視設計為主，就是下圖所示 `pages/index` 目錄裡的 `index.wxml` 檔案。

![](https://img-blog.csdnimg.cn/img_convert/b7c5f1c0f978fde4fdc9f44e94d792d2.png)

我的日常工作是用一個叫做 SAP UI5 的前端框架做前端開發，剛好 SAP UI5 框架也支援建立 `xml` 格式的檢視(UI), 和微信小程式的 `wxml`非常相似。
做過 JSP 開發的朋友們，可以把 wxml 類比成 JSP 檔案。

wxml 原始碼：

```html

<view class="container">
<view class="userinfo">

<button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="jerry_getUserInfo"> 獲取頭像暱稱 </button>

<text class="userinfo-nickname">{{userInfo.nickName}}</text>

</block>

</view>

<text class="user-motto">{{motto}}</text>

</view>

</view>
```

下面逐一解釋每行程式碼。
第二行：`<view class="container">` 宣告瞭一個檢視元素，css 型別為 container. 這個`container` 類是微信小程式自帶的，如果刪除，小程式檢視位置會亂掉，參考我下面的測試：

![](https://img-blog.csdnimg.cn/img_convert/a8e9791f725dd6040d40e1e897f43555.png)

所以需要保留。

第三行：`<view class="userinfo">` 其中 view 元素可以巢狀，相當於原生 HTML 裡的 div 元素。此處定義了另一個 view 元素，css 類為 userinfo. 這個 css 類不是微信提供的，而是我們自己開發的，位於檔案 `index.wxss` 裡：

![](https://img-blog.csdnimg.cn/img_convert/ae7e4c432626eb60980701246bff75e5.png)

第四行：

`<button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="jerry_getUserInfo"> 獲取頭像暱稱 </button>`
定義了一個按鈕，標籤為 `獲取頭像暱稱`。
這個按鈕僅當表示式 `!hasUserInfo && canIUse` 為 true 時才顯示。
button 是微信小程式框架提供的元件，元件是檢視層的基本組成單元，自帶一些功能與微信風格的樣式。注意這裡的 button 標籤`並不是` HTML 原生的標籤。
在微信開發者[官網](https://developers.weixin.qq.com/miniprogram/dev/component/)上可以查詢元件的 API.

下面這兩個屬性的含義：

- open-type="getUserInfo": 點了這個按鈕之後，會自動取當前點選了該按鈕的微信使用者的明細資料。
- bindgetuserinfo="jerry_getUserInfo": 當使用者資料成功取回來之後，執行我們自己開發的回撥函式 `jerry_getUserInfo`, 該函式定義在小程式 `index/index.js` 裡。

第五行到第八行：

```html
<block wx:else="">

<text class="userinfo-nickname">{{userInfo.nickName}}</text>

</block>
```

這裡定義了一個 block 區域，有兩個 UI 元素組成：image 和 text.
對 image 元素，bindtap="bindViewTap", 意思是一旦點選，執行我們在 index.js 裡實現的事件處理函式 bindViewTap.

- class="userinfo-avatar": userinfo-avatar 也是我們在 wxss 裡自定義的 css 類。

- src="{{userInfo.avatarUrl}}": 該 image 的 src 屬性繫結到資料模型 userInfo 的欄位 avatarUrl 上。資料型別 userInfo 是 index.js 裡建立的，繫結到當前的檢視上。

而另一個文字元素 text 顯示的文字繫結到 userInfo.nickName 上。
我們可以直接在手機上開啟微信小程式的 console 頁面，從而檢視當前檢視繫結的資料模型 userInfo 的明細，其中 userInfo.nickName 包含的值如下：

![](https://img-blog.csdnimg.cn/img_convert/d0e4fc167f92c95756480fb61c2044ec.png)

第11行：`<text class="user-motto">{{motto}}</text>`
純文字元素，顯示的文字繫結到資料模型 motto 上。這個模型欄位motto 硬編碼成 Hello World，所以我們最後在小程式上看到顯示的“Hello World".

![](https://img-blog.csdnimg.cn/img_convert/c7273aeb7fa5a5192258f7d92a4ad4c9.png)

本教程後續文章，我會講解微信小程式工程裡的 index.js 裡的程式碼含義。</view></view>

微信小程式開發系列(一) ：開發環境搭建和微信小程式的檢視設計與開發

相關文章