前段時(shí)間有做一個(gè)分賬小程序的想法，所以去學(xué)習(xí)了下小程序的開發(fā)。
小程序開發(fā)并不難，門檻挺低的。本質(zhì)上是像 網(wǎng)頁、手機(jī)軟件這種另一個(gè)前端平臺的開發(fā)，但是是在微信定義的框架內(nèi)完成的，有一些微信里獨(dú)有的一些功能，比如說獲取用戶的基本信息，登陸，分享到微信群等。微信提供了非常詳細(xì)的文檔，網(wǎng)上也有很多組件可以使用，整體感覺會比開發(fā)網(wǎng)頁和手機(jī)軟件來得更加簡單，很大程度降低了懂點(diǎn)技術(shù)的人有想法，想做嘗試的難度。
要開發(fā)一個(gè)小程序，首先應(yīng)該了解在微信里，小程序是怎么運(yùn)作的，生命周期是什么樣的，頁面的加載和路由等。然后就可以上手嘗試。
開發(fā)模式可以分為兩種：樸素式 和 豪華式
樸素式開發(fā)
樸素式，如同字面意思一樣，是比較簡單直接的開發(fā)方式，沒有一些花里胡哨的操作。
每一個(gè)小程序的頁面，都由 4 個(gè)文件協(xié)同以完成功能：
.wxml文件，類似 html，這個(gè)文件主要是用來構(gòu)建頁面的結(jié)構(gòu)，包括了哪些組件，之間是怎么相互關(guān)聯(lián)的。比如包含了個(gè)按鈕。.wxss文件，類似 css，這個(gè)文件是用來描述頁面顯示的樣式的，決定了 wxml 里的組件和結(jié)構(gòu)要怎么顯示。比如按鈕是什么顏色的。.js文件，和網(wǎng)頁開發(fā)的 js 是一個(gè)用處，用來處理一些事件，比如點(diǎn)擊按鈕會發(fā)生什么。.json文件，定義了一些小程序里特有的內(nèi)容的顯示，比如每個(gè)頁面的名稱。
除此之外，有 app.js 和 app.json 來做整個(gè)小程序全局的一些配置和事件的處理。
差不多就這些內(nèi)容，對于有前端基礎(chǔ)的朋友，要嘗試是分分鐘的事情。
樸素式的開發(fā)有個(gè)問題，每要開發(fā)一個(gè)頁面，都要?jiǎng)?chuàng)建著四個(gè)文件，要來回在這幾個(gè)文件之間切換更改，麻煩得很。比如要修改一個(gè)按鈕，首先要去 wxml 調(diào)整在頁面的結(jié)構(gòu)位置，再去 wxss 去調(diào)整一下顏色，之后再去改 js 去設(shè)置點(diǎn)擊之后會發(fā)生什么。一個(gè)頁面還好，但是頁面多了之后，文件超多，麻煩，所以 豪華式就有了用武之地。
豪華式開發(fā)
豪華式開發(fā)，用到了微信開發(fā)的一個(gè)小程序開發(fā)框架 Wepy，很大程度上解決了樸素式的麻煩，還有一些別的優(yōu)點(diǎn)：
Wepy 借鑒了 Vue，所以在開發(fā)模式上基本和 Vue 一樣。
每個(gè)頁面只需要定義一個(gè)
.wpy文件，然后類似于 Vue 的一個(gè)頁面，html, css, js 都在這個(gè)文件里，簡化了開發(fā)。在開發(fā)完后，可以通過編譯，Wepy 會自動(dòng)用 wpy 文件，為每個(gè)頁面生成樸素式的四個(gè)頁面。
Wepy 讓小程序開發(fā)更容易組件化。
...
對于有 Vue 或者 React 基礎(chǔ)的朋友，基本可以無縫上手。開發(fā)效率也會比樸素式的快很多。
在學(xué)習(xí)的過程中，也試著用 Wepy 仿照別人的實(shí)現(xiàn)，簡單實(shí)現(xiàn)了一個(gè)服裝商城 fashion-mall，配了一個(gè)可以本地運(yùn)行的測試后端。有興趣的朋友可以參考 Github。
小程序讓應(yīng)用的開發(fā)和維護(hù)成本小了很多，讓想法的試錯(cuò)成本也低了很多。
有想法，該試試。
