微信小程序開發系列(一) ：開發環境搭建和微信小程序的視圖設計與開發详情 - 微信,微信小程序,微信開發,微信公眾平台,微信支付註銷日志

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

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

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

首先我們要在微信官方網站申請一個屬於自己的微信小程序：

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

激活之後，就可以進入小程序主體信息登記頁面了。這裏需要使用身份證號碼和手機驗證碼進行登記。

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

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

接下來，在下面這個鏈接去下載微信開發者工具：

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

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

自動創建好的小程序如下圖所示，界面顯示就是一個簡單的 Hello World 文本。

我們點擊 上傳 按鈕：

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

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

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

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

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

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

步驟2：微信小程序的視圖設計

本文以小程序的視圖設計為主，就是下圖所示 pages/index 目錄裏的 index.wxml 文件。

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

wxml 源代碼：

<!--index.wxml-->
<view class="container">
<view class="userinfo">

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

<block wx:else>

<image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>

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

</block>

</view>

<view class="usermotto">

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

</view>

</view>

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

所以需要保留。

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

第四行：

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

下面這兩個屬性的含義：

open-type="getUserInfo": 點了這個按鈕之後，會自動取當前點擊了該按鈕的微信用户的明細數據。
bindgetuserinfo="jerry_getUserInfo": 當用户數據成功取回來之後，執行我們自己開發的回調函數 jerry_getUserInfo, 該函數定義在小程序 index/index.js 裏。

第五行到第八行：

<block wx:else>

<image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>

<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 包含的值如下：