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

DOM哥發表於2019-03-01
微信小程式

0.0 前期準備

微信小程式的出現極大地降低了個人開發者微創業的門檻，不需要後端技術，不需要伺服器和域名這些亂七八糟的前置操作，只需要懂得前端技術，就能釋出一款屬於自己的輕量級應用，簡直是前端開發者的福音吶?

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

在開始之前需要準備一個郵箱去建立一個小程式賬號。一個郵箱能且只能建立一個小程式，這讓人有點難以理解，每建立一個小程式就要去申請個郵箱賬號，小遊戲同樣是這樣，導致我現在都不知道自己有幾個郵箱賬號了。

0.1 創意

雖然研發成本極大降低，但想要做出一款成功受青睞的小程式，還是需要動很大的腦筋的。據不完全統計，現在市面上已釋出的小程式已經幾百萬個?，想要在這麼多的形形色色的小作品裡面脫穎而出，要麼就是你的作品非常有創意，戳中了一些人的痛點，要麼就是你路走偏鋒，做了漏網之魚?

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

0.2 技術

小程式的執行環境

小程式的執行環境可以用一句話概括：敵情相當複雜。

在 iOS 上，小程式邏輯層的 javascript 程式碼執行在 JavaScriptCore 中，檢視層是由 WKWebView 來渲染的，環境有 iOS8、iOS9、iOS10

在 Android舊版本 上，小程式邏輯層的 javascript 程式碼執行中 X5 JSCore 中，檢視層是由 X5 基於 Mobile Chrome 57 核心來渲染的

在 Android新版本 上，小程式邏輯層的 javascript 程式碼執行在 V8 中，檢視層是由自研 XWeb 引擎基於 Mobile Chrome 67 核心來渲染的

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

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

另外由於是寄生在微信上，所以微信又做了一層封裝，額外加了一些限制，比如

不支援使用 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湊合著過吧。

接下來就是寫程式碼開發了，此處直接省略十萬字，具體開發的細節就不說了哈，開發-除錯-。。。-開發-除錯，無限迴圈，大家都懂的

開發中遇到的坑

0.9 提交微信稽核

此時功能已經開發測試完畢。接下來就是讓使用者看到我們辛辛苦苦完成的作品，雖然可能不受待見，甚至被瘋狂吐槽，但更大的可能是使用者根本不會去訪問你的小程式?，除非你有自己的推廣渠道，比如公眾號，微博等，否則微信使用者縱然數十億，你的小程式使用者卻很難破零哈哈。

不管結果怎樣，先發布再說。首先需要點選微信開發者工具工具欄的上傳按鈕上傳小程式程式碼，上傳成功後即可前往微信公眾平臺小程式管理後臺去提審你的小程式了，在版本管理裡面選擇剛才上傳的那個版本，然後填寫一些資訊即可提交稽核。首次提交稽核通常會等待1～2個工作日，之後迭代版本一般1～2個小時即可過審。

微信稽核還是挺嚴格的，稽核規範在此。比較普遍的做法是通過後端介面在提交稽核時候過濾敏感內容，以此混過去，等釋出到線上之後再把敏感內容放開。哈哈只要思想不滑坡，辦法總比困難多。

1.0 釋出上線

終於，最後的最後，小程式稽核通過了，可以釋出到線上了。稽核通過之後不會自動釋出到線上，需要手動去點發布。釋出到線上之後就可以去微信上任何一個入口搜尋自己釋出的小程式了。

到此可以長舒一口氣了，因為已經走完了萬里長征的第一步，接下來就是思考怎麼去推廣和運營小程式，總之，這只是剛剛開始。

最後貼一下自己辛辛苦苦的成果

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

我去看了一下管理後臺的訪問資料，果然不出所料，使用者量至今尚未破零?

相關文章