我是如何快速上手微信小程式開發的

摘要： 一 如何建立一個微信小程式 二 如何搭建小程式頁面 三 小程式如何獲取資料，處理邏輯 四 如何釋出小程式應用 無論是前端開發，還是後端開發，時間長了，你總會能總結出它的一些規律的，對於前端開發主要就兩條，頁面展現，邏輯處理。如果是全流程開發的話，那就是，如何建立專案，頁面如何實...

一 如何建立一個微信小程式

二 如何搭建小程式頁面

三 小程式如何獲取資料，處理邏輯

四 如何釋出小程式應用

無論是前端開發，還是後端開發，時間長了，你總會能總結出它的一些規律的，對於前端開發主要就兩條，頁面展現，邏輯處理。如果是全流程開發的話，那就是，如何建立專案，頁面如何實現，資料獲取和邏輯處理如何實現，如何打包上線。移動端或者前端，基本開發流程就這個四個步驟。所以在在前端方面去學習新一門開發技術，只要你解決了這四個問題，那一切就OK了，下面我就講一下，我在學習微信小程式開發，如何用這四步法快速上手開發的

一 如何建立一個微信小程式

學習一門新技術先看下它的開發文件 ofollow,noindex">小程式介紹

1.1 首先要先註冊一個賬號，具體步驟請看下圖的相關章節

1.2 小程式資訊完善和配置，具體步驟請看下圖的相關章節

1.3 上面的工作做完後，接下來才開始建立一個小程式專案

請看 小程式開發步驟

到此第一個問題我們就算完成了，接下來解決小程式介面如何搭建。

二 如何搭建小程式頁面

框架的檢視層由 WXML 與 WXSS 編寫，由元件來進行展示。

將邏輯層的資料反應成檢視，同時將檢視層的事件傳送給邏輯層。

WXML(WeiXin Markup language) 用於描述頁面的結構。

WXS(WeiXin Script) 是小程式的一套指令碼語言，結合 WXML，可以構建出頁面的結構。

WXSS(WeiXin Style Sheet) 用於描述頁面的樣式。

小程式的頁面是由wxml 和wxss這兩個檔案來實現的，wxml結構如何寫請參考 微信小程式元件

wxss是負責樣式控制的，基本類似於css,支援flex佈局，所以要想上手構建微信小程式的介面，最好要熟悉html ,css.

微信提供的介面元件很多，沒必要一下子全學會，會用一兩個就行，其他的遇到需要的時候現查先做，這樣又節約學習時間，又能夠加深理解。到此第二個問題我們解決了，下面看第三個問題，資料邏輯如何處理。

三 小程式如何獲取資料，處理邏輯

3.1 邏輯處理

邏輯處理是通過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 。

3.1 資料獲取

現在幾乎每個應用都需要從後端獲取資料，那麼小程式如何獲取呢，當然是通過網路操作了。我們封裝了小程式的網路操作

const app = getApp()

const request = (url, options) => {
return new Promise((resolve, reject) => {
wx.request({
url: `${app.globalData.host}${url}`,
method: options.method,
data: options.method === 'GET' ? options.data : JSON.stringify(options.data),
header: {
'Content-Type': 'application/json; charset=UTF-8'
// 'x-token': 'x-token'// 看自己是否需要
},
success(request) {
if (request.data.error_code === 0) {
resolve(request.data)
} else {
reject(request.data)
}
},
fail(error) {
reject(error.data)
}
})
})
}

const gets = (url, options = {}) => {
return request(url, { method: 'GET', data: options })
}

const post = (url, options) => {
return request(url, { method: 'POST', data: options })
}

const put = (url, options) => {
return request(url, { method: 'PUT', data: options })
}

// 不能宣告DELETE（關鍵字）
const remove = (url, options) => {
return request(url, { method: 'DELETE', data: options })
}

module.exports = {
gets,
post,
put,
remove
}

如何使用請看下圖

資料展現如下圖

到此，第三個問題我們就解決的了下面看第四個問題。

四 如何釋出小程式應用

小程式釋出文件說明

到此四個問題都解決了。

總結：本文內容是很簡單的，借用了大部分官方文件，其實本文目的不是教你學小程式開發，而是分享一下在學習一項新事物我的方法和思路，網際網路技術變化是很快的，我覺得一個人的能力，不僅僅是你技術有多好，你要明白技術是用來幹什麼的，技術是用來解決現實生活中的問題的，一個好的程式設計師，不是技術能力，而是解決問題的能力，解決問題不可能只用一種技術，這就要求你的學習能力要強，針對不同的問題，使用不同的技術，哪怕使用的技術你不熟悉，但他是解決問題最好的方法，那就要求你有快速學習並解決問題的能力。

學習一項新技術，我們要先抓住主線，把流程搞通了，以後再在工作中慢慢的熟悉和豐富對他細節的一些認知，所以學一項東西前多問自己幾個問題，我學什麼，我為什麼學，我怎麼學，等。先思考後學習，一定會讓你事半工倍。

對於怎麼學習微信小程式開發，我問了自己上面的四個問題，每個問題，我只需要了解大體內容，四個問題都解決了，然後整個流程也就通了，以後也就是慢慢的對每個問題內容的細節慢慢的熟悉和了解了，其實花了不到一下午的時間，我就搞出了一個簡單的demo出來了，瞭解的內容基本已經覆蓋微信小程式日常開發80%的內容了。以上就是我的一點學習心得。

最後 小程式Demo

Demo截圖