一 如何創(chuàng)建一個(gè)微信小程序
二 如何搭建小程序頁面
三 小程序如何獲取數(shù)據(jù)，處理邏輯
四 如何發(fā)布小程序應(yīng)用
無論是前端開發(fā)氛雪，還是后端開發(fā)米碰，時(shí)間長(zhǎng)了妓布，你總會(huì)能總結(jié)出它的一些規(guī)律的樊展，對(duì)于前端開發(fā)主要就兩條呻纹，頁面展現(xiàn)，邏輯處理滚局。如果是全流程開發(fā)的話居暖，那就是顽频，如何創(chuàng)建項(xiàng)目藤肢，頁面如何實(shí)現(xiàn)，數(shù)據(jù)獲取和邏輯處理如何實(shí)現(xiàn)糯景，如何打包上線嘁圈。移動(dòng)端或者前端，基本開發(fā)流程就這個(gè)四個(gè)步驟蟀淮。所以在在前端方面去學(xué)習(xí)新一門開發(fā)技術(shù)最住，只要你解決了這四個(gè)問題，那一切就OK了怠惶，下面我就講一下涨缚，我在學(xué)習(xí)微信小程序開發(fā)，如何用這四步法快速上手開發(fā)的
一 如何創(chuàng)建一個(gè)微信小程序
學(xué)習(xí)一門新技術(shù)先看下它的開發(fā)文檔小程序介紹
1.1 首先要先注冊(cè)一個(gè)賬號(hào)策治，具體步驟請(qǐng)看下圖的相關(guān)章節(jié)
1.2 小程序信息完善和配置脓魏，具體步驟請(qǐng)看下圖的相關(guān)章節(jié)
1.3 上面的工作做完后，接下來才開始創(chuàng)建一個(gè)小程序項(xiàng)目
請(qǐng)看小程序開發(fā)步驟
到此第一個(gè)問題我們就算完成了通惫，接下來解決小程序界面如何搭建茂翔。
二 如何搭建小程序頁面
框架的視圖層由 WXML 與 WXSS 編寫，由組件來進(jìn)行展示履腋。
將邏輯層的數(shù)據(jù)反應(yīng)成視圖珊燎，同時(shí)將視圖層的事件發(fā)送給邏輯層惭嚣。
WXML(WeiXin Markup language) 用于描述頁面的結(jié)構(gòu)。
WXS(WeiXin Script) 是小程序的一套腳本語言悔政，結(jié)合 WXML晚吞，可以構(gòu)建出頁面的結(jié)構(gòu)。
WXSS(WeiXin Style Sheet) 用于描述頁面的樣式谋国。
小程序的頁面是由wxml 和wxss這兩個(gè)文件來實(shí)現(xiàn)的载矿，wxml結(jié)構(gòu)如何寫請(qǐng)參考微信小程序組件
wxss是負(fù)責(zé)樣式控制的，基本類似于css,支持flex布局烹卒，所以要想上手構(gòu)建微信小程序的界面闷盔，最好要熟悉html ,css.
微信提供的界面組件很多，沒必要一下子全學(xué)會(huì)旅急，會(huì)用一兩個(gè)就行逢勾，其他的遇到需要的時(shí)候現(xiàn)查先做，這樣又節(jié)約學(xué)習(xí)時(shí)間藐吮，又能夠加深理解溺拱。到此第二個(gè)問題我們解決了，下面看第三個(gè)問題谣辞，數(shù)據(jù)邏輯如何處理迫摔。
三 小程序如何獲取數(shù)據(jù)，處理邏輯
3.1 邏輯處理
邏輯處理是通過js文件來操作的
一個(gè)服務(wù)僅僅只有界面展示是不夠的泥从，還需要和用戶做交互：響應(yīng)用戶的點(diǎn)擊句占、獲取用戶的位置等等。在小程序里邊躯嫉，我們就通過編寫JS腳本文件來處理用戶的操作纱烘。
<view>{{ msg }}</view>
<button bindtap="clickMe">點(diǎn)擊我</button>
點(diǎn)擊 button 按鈕的時(shí)候，我們希望把界面上 msg 顯示成 "Hello World"祈餐，于是我們?cè)?button 上聲明一個(gè)屬性: bindtap 擂啥，在 JS 文件里邊聲明了 clickMe 方法來響應(yīng)這次點(diǎn)擊操作：
Page({
clickMe: function() {
this.setData({ msg: "Hello World" })
}
})
響應(yīng)用戶的操作就是這么簡(jiǎn)單，更詳細(xì)的事件可以參考文檔 WXML - 事件 帆阳。
此外你還可以在 JS 中調(diào)用小程序提供的豐富的 API哺壶，利用這些 API 可以很方便的調(diào)起微信提供的能力，例如獲取用戶信息蜒谤、本地存儲(chǔ)山宾、微信支付等。在前邊的 QuickStart 例子中芭逝，在 pages/index/index.js 就調(diào)用了 wx.getUserInfo 獲取微信用戶的頭像和昵稱塌碌，最后通過 setData 把獲取到的信息顯示到界面上。更多 API 可以參考文檔 小程序的API 旬盯。
3.1 數(shù)據(jù)獲取
現(xiàn)在幾乎每個(gè)應(yīng)用都需要從后端獲取數(shù)據(jù)台妆，那么小程序如何獲取呢翎猛，當(dāng)然是通過網(wǎng)路操作了。我們封裝了小程序的網(wǎng)絡(luò)操作
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（關(guān)鍵字）
const remove = (url, options) => {
return request(url, { method: 'DELETE', data: options })
}
module.exports = {
gets,
post,
put,
remove
}
如何使用請(qǐng)看下圖
數(shù)據(jù)展現(xiàn)如下圖
到此接剩，第三個(gè)問題我們就解決的了下面看第四個(gè)問題切厘。
四 如何發(fā)布小程序應(yīng)用
到此四個(gè)問題都解決了。
總結(jié)：本文內(nèi)容是很簡(jiǎn)單的懊缺，借用了大部分官方文檔疫稿，其實(shí)本文目的不是教你學(xué)小程序開發(fā)，而是分享一下在學(xué)習(xí)一項(xiàng)新事物我的方法和思路鹃两，互聯(lián)網(wǎng)技術(shù)變化是很快的遗座，我覺得一個(gè)人的能力，不僅僅是你技術(shù)有多好俊扳，你要明白技術(shù)是用來干什么的途蒋，技術(shù)是用來解決現(xiàn)實(shí)生活中的問題的，一個(gè)好的程序員馋记，不是技術(shù)能力号坡，而是解決問題的能力，解決問題不可能只用一種技術(shù)梯醒，這就要求你的學(xué)習(xí)能力要強(qiáng)宽堆，針對(duì)不同的問題，使用不同的技術(shù)茸习，哪怕使用的技術(shù)你不熟悉畜隶，但它是解決問題最好的方法，那就要求你有快速學(xué)習(xí)并解決問題的能力逮光。
學(xué)習(xí)一項(xiàng)新技術(shù)代箭，我們要先抓住主線，把流程搞通了涕刚，以后再在工作中慢慢的熟悉和豐富對(duì)它細(xì)節(jié)的一些認(rèn)知，所以學(xué)一項(xiàng)東西前多問自己幾個(gè)問題乙帮，我學(xué)什么杜漠，我為什么學(xué)，我怎么學(xué)察净，等驾茴。先思考后學(xué)習(xí)，一定會(huì)讓你事半功倍氢卡。
對(duì)于怎么學(xué)習(xí)微信小程序開發(fā)锈至，我問了自己上面的四個(gè)問題，每個(gè)問題译秦，我只需要了解大體內(nèi)容峡捡，四個(gè)問題都解決了击碗，然后整個(gè)流程也就通了，以后也就是慢慢的對(duì)每個(gè)問題內(nèi)容的細(xì)節(jié)慢慢的熟悉和了解了们拙，其實(shí)花了不到一下午的時(shí)間稍途，我就搞出了一個(gè)簡(jiǎn)單的demo出來了，了解的內(nèi)容基本已經(jīng)覆蓋微信小程序日常開發(fā)80%的內(nèi)容了砚婆。以上就是我的一點(diǎn)學(xué)習(xí)心得械拍。
最后小程序Demo
Demo截圖
