微信小程序開發-入門嘗試

前段時間有做一個分賬小程序的想法,所以去學習了下小程序的開發。

小程序開發并不難,門檻挺低的。本質上是像 網頁、手機軟件這種另一個前端平臺的開發,但是是在微信定義的框架內完成的,有一些微信里獨有的一些功能,比如說獲取用戶的基本信息,登陸,分享到微信群等。微信提供了非常詳細的文檔,網上也有很多組件可以使用,整體感覺會比開發網頁和手機軟件來得更加簡單,很大程度降低了懂點技術的人有想法,想做嘗試的難度。

要開發一個小程序,首先應該了解在微信里,小程序是怎么運作的,生命周期是什么樣的,頁面的加載和路由等。然后就可以上手嘗試。

開發模式可以分為兩種:樸素式 和 豪華式

樸素式開發

樸素式,如同字面意思一樣,是比較簡單直接的開發方式,沒有一些花里胡哨的操作。

每一個小程序的頁面,都由 4 個文件協同以完成功能:

  1. .wxml 文件,類似 html,這個文件主要是用來構建頁面的結構,包括了哪些組件,之間是怎么相互關聯的。比如包含了個按鈕。

  2. .wxss 文件,類似 css,這個文件是用來描述頁面顯示的樣式的,決定了 wxml 里的組件和結構要怎么顯示。比如按鈕是什么顏色的。

  3. .js 文件,和網頁開發的 js 是一個用處,用來處理一些事件,比如點擊按鈕會發生什么。

  4. .json 文件,定義了一些小程序里特有的內容的顯示,比如每個頁面的名稱。

除此之外,有 app.jsapp.json 來做整個小程序全局的一些配置和事件的處理。

差不多就這些內容,對于有前端基礎的朋友,要嘗試是分分鐘的事情。

樸素式的開發有個問題,每要開發一個頁面,都要創建著四個文件,要來回在這幾個文件之間切換更改,麻煩得很。比如要修改一個按鈕,首先要去 wxml 調整在頁面的結構位置,再去 wxss 去調整一下顏色,之后再去改 js 去設置點擊之后會發生什么。一個頁面還好,但是頁面多了之后,文件超多,麻煩,所以 豪華式就有了用武之地。

豪華式開發

豪華式開發,用到了微信開發的一個小程序開發框架 Wepy,很大程度上解決了樸素式的麻煩,還有一些別的優點:

  1. Wepy 借鑒了 Vue,所以在開發模式上基本和 Vue 一樣。

  2. 每個頁面只需要定義一個 .wpy 文件,然后類似于 Vue 的一個頁面,html, css, js 都在這個文件里,簡化了開發。

  3. 在開發完后,可以通過編譯,Wepy 會自動用 wpy 文件,為每個頁面生成樸素式的四個頁面。

  4. Wepy 讓小程序開發更容易組件化。

  5. ...

對于有 Vue 或者 React 基礎的朋友,基本可以無縫上手。開發效率也會比樸素式的快很多。

在學習的過程中,也試著用 Wepy 仿照別人的實現,簡單實現了一個服裝商城 fashion-mall,配了一個可以本地運行的測試后端。有興趣的朋友可以參考 Github

小程序讓應用的開發和維護成本小了很多,讓想法的試錯成本也低了很多。

有想法,該試試。

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 開源項目 wepy-wechat-demo:基于wepy開發的仿微信聊天界面小程序 深大的樹洞:基于wepy開發的...
    dufebin閱讀 4,141評論 0 19
  • 簡介 微信小程序入門門檻低、開發周期短、代碼編寫靈活、傳播速度快等優點讓微信小程序迅速火爆,開發者紛紛涌入,任何語...
    大公爵閱讀 4,206評論 0 10
  • 微信小程序自發布到如今已經有半年多的時間了,憑借微信平臺的強大影響力,越來越多企業加入小程序開發。小程序于M頁比相...
    張所勇閱讀 1,926評論 0 14
  • 一、有朋自遠方來,不亦樂乎。 志同道合的朋友在一起相聚,那種快樂真是從內到外的舒坦! 昨天去蘇州,幫茉茉老師的紅黃...
    邢大俠閱讀 172評論 0 0
  • 師父要去義烏上班了,一個我看上去無法容忍的環境。 他的內心強大,清楚的知道自己該去上班,不然會懶惰。而我也告訴自己...
    石默默閱讀 229評論 0 0