從0到1上線一個微信小程序

時間 2020-03-23

標籤上線一個微信程序简体版

原文原文鏈接

0.0 前期準備

微信小程序的出現極大地下降了我的開發者微創業的門檻，不須要後端技術，不須要服務器和域名這些亂七八糟的前置操做，只須要懂得前端技術，就能發佈一款屬於本身的輕量級應用，簡直是前端開發者的福音吶😁javascript

如今其實更火的當是微信小遊戲，小程序熱度排行榜上長期被小遊戲霸屏。但小遊戲的開發技術棧比小程序要多，須要的人力物力也更大。目前正在研究之中，有時間再作討論。css

在開始以前須要準備一個郵箱去建立一個小程序帳號。一個郵箱能且只能建立一個小程序，這讓人有點難以理解，每建立一個小程序就要去申請個郵箱帳號，小遊戲一樣是這樣，致使我如今都不知道本身有幾個郵箱帳號了。html

0.1 創意

雖然研發成本極大下降，但想要作出一款成功受青睞的小程序，仍是須要動很大的腦筋的。據不徹底統計，如今市面上已發佈的小程序已經幾百萬個😨，想要在這麼多的形形色色的小做品裏面脫穎而出，要麼就是你的做品很是有創意，戳中了一些人的痛點，要麼就是你路走偏鋒，作了漏網之魚😂前端

相比之下，小遊戲倒是更能突顯創意的戰場。2048，圍住神經貓，跳一跳這些讓人眼前一亮的精緻小玩意兒，都是創意制勝的表明。奈何在下也是應試教育的產物，腦子裏的創新區域只在作夢的時候纔會活躍。假如你想到了一個有趣可行的點子，那離用戶百萬就已經成功了一半。我一位同事說想作一個實時社交的小程序，讓用戶能夠實現無障礙溝通。我當時就想，這樣有理想的人怎麼就和我作了同事了呢😂vue

0.2 技術

小程序的運行環境

小程序的運行環境能夠用一句話歸納：敵情至關複雜。java

在 iOS 上，小程序邏輯層的 javascript 代碼運行在 JavaScriptCore 中，視圖層是由 WKWebView 來渲染的，環境有 iOS八、iOS九、iOS10
在 Android舊版本上，小程序邏輯層的 javascript 代碼運行中 X5 JSCore 中，視圖層是由 X5 基於 Mobile Chrome 57 內核來渲染的react

在 Android新版本上，小程序邏輯層的 javascript 代碼運行在 V8 中，視圖層是由自研 XWeb 引擎基於 Mobile Chrome 67 內核來渲染的jquery

在微信開發者工具上，小程序邏輯層的 javascript 代碼是運行在 NW.js 中，視圖層是由 Chromium 60 Webview 來渲染的git

也就是說一切以實物爲準，在微信開發者工具上的表現和真機上的表現不盡相同，在真機的不一樣機器上表現也會因機而異😂github

另外因爲是寄生在微信上，因此微信又作了一層封裝，額外加了一些限制，好比

不支持使用 eval 執行 JS 代碼
不支持使用 new Function 建立函數

也就是不讓動態執行 JS 代碼，說實話，這確實擋住了不少騷操做。正所謂人在屋檐下，不得不低頭。鑑於微信提供的巨大流量入口和裂變能力，就這樣湊合着用吧😑

上面這些都是各類限制，兼容性問題，固然也有讓人開心的地方，那就是CSS3和ES6的特性基本上能夠隨便用，記住是基本上。

技術棧

衆所周知，瀏覽器的web技術是html，css和js。而小程序雖然相似瀏覽器，但並非瀏覽器。因此他的技術是wxml，wxss和js😂。應該說並無什麼新的技術，就是照抄web標準而後本土化了一下。前端同窗基本上能夠無縫切入。

咱們開發web的時候基本上不會直接去寫原生html，css，js，而是使用一些框架和庫提高開發效率，例如曾經的jquery，如今的vue，react等。小程序也是如此，一般不會去直接寫原生wxml，wxss。固然若是喜歡的話也能夠直接去寫，但隨着項目迭代很快就會難以維護。要知道軟件工程的奧義即在於控制複雜性。如今github上已經有了一些不錯的框架出來，好比wepy，mpvue。

前端技術 + 小程序官方文檔 + 框架文檔，基本上這三樣就能hold住一個小程序了

說下個人小程序官方文檔讀後感，不到一個小時讀完了簡易教程，感受挺簡單的嘛，簡直小case。而後去讀小程序的框架，組件和api，臥槽，才發現剛纔只是讀了一本厚書的目錄。接下來斷斷續續看了將近一個月，才勉強看了一遍。哈哈，一切事情都不會像看上去那麼簡單吶！但若是隻是做爲入門，不須要不少高級特性，則不須要讀那麼多章節。

0.3 實際開發

調試預覽

工欲善其事，必先利其器。咱們開發web時能夠隨便在某一個你喜歡的瀏覽器裏預覽效果，小程序就沒那麼隨意了。由於小程序的宿主是微信，因此小程序只能在微信中才能跑起來。好在微信團隊仍是挺給力的，爲開發者專門開發了一個預覽調試工具，即微信開發者工具。修改代碼後便可在該工具上實時看到效果，但但是，該工具上呈現的效果並不是是真實手機上呈現的效果，就像chrome開發者工具的模擬設備模式同樣，雖然八九不離十，可是差之毫釐即謬以千里😂。這個工具上經常使用且實用的功能還挺多的，建議好好熟悉，文檔在此，固然最快熟悉的方式仍是點點點，哪裏不懂點哪裏😁

選個框架

如今的主流框架選擇只有wepy和mpvue兩位，二者都是向最nb的 Vue.js 看齊。通過仔細斟酌，多方位比對，最終我仍是選了wepy，由於發現wepy的星星要比mpvue的多上幾個哈哈。wepy文檔在此。用了wepy將近一年時間，發現坑還挺多的，可能我對他的期待是像vue同樣吧，期待過高了😂。vue稍微高級一點的特性都不支持，有一些實現還和vue是反着來的。不過那還能怎樣呢，本身搞一個框架出來？在下實在才薄智淺。曾有一段時間被坑得決心要轉向mpvue，但機智的我先去谷歌了一下mpvue的坑，發現相較wepy只多很多，哈哈我趕忙說服本身仍是好好和wepy湊合着過吧。

接下來就是寫代碼開發了，此處直接省略十萬字，具體開發的細節就不說了哈，開發-調試-。。。-開發-調試，無限循環，你們都懂的