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