頻道欄目
首頁 > 資訊 > 微信小程序 > 正文

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

19-03-09        來源:[db:作者]  
收藏   我要投稿
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湊合著過吧。

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

開發中遇到的坑

【wepy】多次路由到同一個頁面時,頁面上的變量會相互污染

【wepy】組件是靜態組件,導致每實例化一個標簽都需要在js的components里聲明一次

【wepy】在更新數據之后需要調用this.$apply()更新視圖,準確的說應該是在異步更新數據之后,也就是說他不是雙向綁定

【小程序】文件下載,webview,ajax都需要在小程序管理后臺配置安全域名,否則都會失敗。

【小程序】webview和h5通信的方式postMessage機制只在特定時機觸發,也就是除了這些時機,webview和url完全無法通信

【小程序】web-view中使用input type='file'閃退

小程序的坑可以單獨拿出來寫一篇千字作文了,有時間再總結一下,此處就不再舉例了

0.9 提交微信審核

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

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

微信審核還是挺嚴格的,審核規范在此。比較普遍的做法是通過后端接口在提交審核時候過濾敏感內容,以此混過去,等發布到線上之后再把敏感內容放開。哈哈只要思想不滑坡,辦法總比困難多。

1.0 發布上線

終于,最后的最后,小程序審核通過了,可以發布到線上了。審核通過之后不會自動發布到線上,需要手動去點發布。發布到線上之后就可以去微信上任何一個入口搜索自己發布的小程序了。

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

相關TAG標簽
上一篇:臺積電:絕大多數7nm客戶都會轉向6nm_IT新聞_博客園
下一篇:最后一頁
相關文章
圖文推薦

關于我們 | 聯系我們 | 廣告服務 | 投資合作 | 版權申明 | 在線幫助 | 網站地圖 | 作品發布 | Vip技術培訓 | 舉報中心

版權所有: 紅黑聯盟--致力于做實用的IT技術學習網站

免费的黄色网站