近期給CSDN極客頭條投稿關于微信小程序開發方面的文章,刊發的鍊接是:《非典型程序員的微信小程序開發紀實》,現在把自己寫的未删減的内容也發到博客中:
先說說我這樣非典型程序員的“非典症狀”:
- 大學電子與信息工程系畢業,對數字電路、單片機熟悉;
- 工作後搞過模拟/數字電路、彙編程序、Virtual Basic、FoxPro;
- 讀研畢業後創辦互聯網公司,開展網站建設、軟件開發業務;
- 客戶項目有程序員、設計師開發,自己基本上沒有編程;
- 近年運營自有網站,用開源PHP軟件,自己學會簡單修改。
上面就是本人的技術基礎,要想開發微信小程序顯然是不夠的,還需要學好些新東西。不過經過一段不算太長時間的摸索,也可以獨立開發出完整的微信小程序了,下面記錄一下開發、學習過程和遇到的一些問題,供各位參考。
一、對小程序留意起因
我們從事互聯網行業相當早了,在1998年就創立公司來做Web網站,那時的PC多數還是安裝的單機軟件,從1998年到2007年的這10年都一直看着Web成長,期間湧現出三大門戶網站、百度搜索、阿裡淘寶等衆多明星,再随着iPhone的推出以及Android的出現,以前的老舊小屏幕手機上的WAP網站也被淘汰了,出現mobile web和原生app,一個熱門議題是“mobile web v.s. native app”到底什麼是未來,當時也沒有一個定論。
後來(2013年左右)手機進一步普及,web似乎越來越少人訪問了,而app更加火爆,當時一款app的開發成本非常高卻有很多公司願意投入,我們也嘗試為自己公司、為客戶做過幾款app,從技術上是都實現了,但開發周期長,以後的更新維護也麻煩,最重要的是發現很難讓手機用戶下載使用,也就是宣傳推廣和獲得用戶的成本越來越高了,導緻花費很高代價開發的app得不到回報。
進入2016年以來,app似乎越來越看到頹勢,據調查大部分手機用戶幾個月都不會下載一款新的app,大量時間都消耗在幾款“超級app”中,例如微信、QQ、今日頭條等,低頻app用戶不願意下載了。所以有了微信小程序、PWA等類web app的出現。我個人覺得智能手機上的軟件正在走多年前電腦上的軟件走過的路:除了少數本機軟件以外,多數未來都是在網絡上使用。當然現在的web與以前的有些區别,形式多樣化、入口多樣化。
這幾年我們做app、微信應用号都比别人慢了幾步,錯過了紅利期,所以知道微信小程序後覺得這是一個大的機會,要從一開始關注,小程序開始公測後開始了解、嘗試注冊,認為這是一個很大的機會來臨。
二、開發工具下載使用
不得不說騰訊提供的小程序集成開發環境還是相當容易上手的,很簡單就可以在Windows環境中下載、安裝、開始學習使用,特别對于我這樣以前沒有接觸過前端開發的人來說,很快就可以上手調試簡單的語句、馬上看到模拟效果。
不像其它一些框架僅僅是搭建初始開發環境就很折騰,需要安裝多種軟件、給出很多選擇、文檔也不全面,如果沒有人指導完全自己摸索的話,容易給初學者一個下馬威、挫敗感會打擊積極性。
當然這個開發工具對于騰訊來說也是一個新事物,不可能十全十美,他們頻繁地推出新版提示在線更新。
三、官方幫助文檔解讀
微信小程序是一個全新的事物,除了騰訊公司提供的官方幫助文檔以外,初期在網上很難找到其它有幫助的内容,所以詳細研讀小程序官方文檔就是必須做的事情。
雖然一些開發者也很多抱怨文檔不夠清晰、部分過時、例子不詳細這些缺點,但找不到比這更權威、更全面的信息了。
我們從注冊小程序開始的每一步都依賴于幫助文檔的指導:注冊指導、後台管理、設計指南、開發文檔、運營規範、程序示範等。這裡就沒有必要複制過來展開講述了。
慢慢随着開發者的增多,網上也出現一些小程序方面的博客文章、技術問答、培訓教程等,遇到問題在網上搜索有時也可以獲得一些有用信息。
四、涉及到的新知識點
前面說了,對于我這樣以前完全沒有前端開發經驗、甚至軟件開發還是多年前自己進行過的人來說,在開發小程序的過程中遇到相當多對我來說是新事物的知識點,下面列出并解釋:
1、面向對象編程:說來不怕笑話,以前真的接觸面向對象編程很少,還是習慣于老式的面向過程編程,而編寫小程序從一開始就必須習慣面向對象,對象的數據、方法、回調函數等等時刻都需要用到,這樣也好,逼自己在實戰中邊學邊用;
2、JavaScript:這個以前看過一些嵌入html頁面中的js代碼,也調用過Google Maps API、AdSense廣告代碼、百度統計代碼等等,不過隻是簡單複制過來,稍微需要改動一些就請同事幫忙,這次也是買了書系統學學,遇到不懂的地方在網上搜相關資料,也基本上是可以開展一般的小程序開發工作;
3、mina框架:第一次見到“邏輯/顯示/格式分開”有點不習慣,不過很快就覺得這樣的編程方式更有效率,“數據綁定”後分别進行邏輯處理和顯示,還有一些拖動等手機操作中獨有的方式也無需從頭編碼直接使用相關過程函數;
4、API調用:小程序提供了豐富的API調用功能,涵蓋網絡、媒體、文件、數據緩存、位置、設備、界面、開放接口等,功能還是非常強大的,文檔裡面有示範,可以自己摸索,部分以前接觸少的方面還是需要很費一番功夫;
5、Web Services接口:我們以前用Drupal網站時使用了PhoneGap技術來做web app和封裝成android/ios的app,其中就用到Web Services接口,但那時隻是簡單安裝相關插件、進行設置就可以了,沒有詳細了解用到哪些接口、如何調用等細節,這次開發小程序需要從Drupal網站的後台調用Json數據,對Web Services也花了好些時間來弄懂、測試;
6、https證書:以前沒有詳細了解過,這次因為小程序獲取外部數據必須用https方式,所以必須去了解、獲取SSL證書并實施到網站上,也是因為這個起因,我們索性把所有網站全部進行了https化升級,SSL證書我們是采取Let's Encrypt提供的免費DV證書(剛開始用過StartCom的StartSSL免費證書,包括DV/IV/OV,其泛域名支持非常方便,可惜這個公司被360公司收購了做了一些不當的事情,其證書被Mozilla FireFox, Google Chrome, Apple Safari不再信任了);
7、異步數據:小程序采取先進的移動前端框架,為了加快用戶查看速度,很多時候采取了異步加載數據的方式,用戶體驗更佳,但我一開始對這并不了解和在意,結果在編程的時候多次遇到程序邏輯與顯示情況不同,查找也花費了不少時間,後來才明白是異步數據的問題,又采取其它的辦法來變通解決,這個是像我這樣初學者需要注意的地方。
對于怕學新東西的人來說,如果欠缺的太多就别自找麻煩了,而對于喜歡從折騰中找樂趣、從學技術中找成就感的人來說,那就趕快來試一試微信小程序吧,呵呵。
五、開發案例和注意
小程序入門還是有難度的,不過一旦摸索出來了,做類似的小程序就都簡單了,我們以前做了不少使用查詢類的網站,這次就做了一系列的查詢類小程序,有:IP查詢、郵編庫、查号吧+、手機歸屬、一把刀新華字典、一把刀成語詞典、一把刀英漢詞典、一把刀漢英詞典、一把刀詞典合集等。
下面以一個“IP查詢”小程序為例來講述開發過程,并且把一些注意事項也記錄在其中:
1、功能策劃:将ipshu.com這個網站的功能進行簡化,隻保留“我的IP”、“IP歸屬位置”、“IP Whois信息”三個主要功能,符合小程序小巧實用的原則;
2、申請注冊:以公司名義申請小程序,填寫單獨的郵箱、管理員身份信息、手機号等資料,按流程和幫助小額打款到騰訊公司賬上,很快就自動驗證成功,幾個小時後就注冊好了;
3、數據準備:這個純信息查詢的小程序比較簡單,隻需要從後台網站讀取需要的Json數據,不需要複雜的Web Services操作,所以就在Drupal網站中設置Views或者PHP編寫一個簡單的數據接口給小程序API調用就可以;
4、程序開發:這個小程序相當于一個不算複雜的前端小項目,熟練的話幾天就可以搞定,我因為是第一次搞,而且與其它項目穿插着做,陸陸續續有1、2周的時間,“我的IP”、“IP歸屬位置”、“IP Whois信息”三個主要功能對應3個頁面就可以(後來為了分享訪問方便新版中增加了3個搜索結果頁面,也就是改為6個頁面),代碼量也不大,我寫的代碼不算規範,就不用貼在這裡了;
5、調試修改:集成開發環境還是不錯,從一開始編寫程序的時候就可以在電腦上看到模拟效果,每次改動項目中的.js/.json/.wxml/.wcss編碼保存後,效果展示自動刷新;有專門的調試頁面可以看到用console.log輸出的調試信息,在開發階段還可以在app.json中設置"debug": true,讓調試頁面自動輸出更多信息,方便debug;
6、内部測試:模拟顯示沒有問題後,可以使用項目預覽功能讓手機來預覽效果,這個過程是很有必要的,我在開發過程中就發現實際手機浏覽與PC模拟器浏覽還是有差别的;開發者自己測試沒有問題後,就可以上傳到騰訊小程序服務器,設置體驗版,登錄小程序後台去設置體驗者,把小程序分享給同事、朋友,讓他們來幫忙測試;
7、提交審核:大家測試都沒有問題了就可以提交騰訊公司審核,注意先要設置合适的名稱、介紹、分類、圖标,在提交審核的時候還要選擇主要功能頁面、合适的分類、關鍵詞标簽等,然後是等待審核結果,剛開始審核方面的坑也比較多,例如審核者沒有弄懂提交小程序的功能、邏輯和顯示都可能造成審核不能通過,需要自己揣摩、修改後再次提交,一般搞過幾次就熟悉了審核标準,後面的修改很容易通過了;
8、發布上線:1月9日小程序正式發布前的審核時間偏長,需要好幾天,後來縮短到1、2天甚至當天了,通過後管理員的手機微信接到通知,就可以登錄小程序後台進行發布,第一次發布的時候注意小程序名稱的問題,一旦發布後是無法進行修改的,後台操作發布後就對外公開了,無需是體驗者大家都可以訪問;
9、宣傳推廣:發布後我們可以通過群聊分享、綁定公衆号、線下鋪設二維碼、提交到一些微信小程序應用商店、寫介紹小程序的文章發布到網上等辦法來進行宣傳推廣;
10、升級改版:發布後一般都會接到一些用戶反饋意見或者自己發現一些可以改進的地方,這時可以在集成開發工具中進行或大或小的更改,更改完成後可以提交一個新的版本内部體驗、提交審核、發布更新,我們的“IP查詢”小程序也已經提交過好幾個更新版本了,分别是糾正分享頁面鍊接錯誤、添加獨立查詢結果頁面、增加網址轉IP再查詢功能等。
上面這個案例相對是比較簡單的功能,還有很多微信提供的功能接口沒有用上,例如登錄注冊、微信支付、客服功能、GPS數據、地圖API、繪圖等,這要根據小程序的功能需求來使用。
六、線上線下應用場景
小程序的發現渠道現在有這幾種:
- 聊天或群聊中分享小程序或者其中某個頁面(但不能在朋友圈中分享)
- 用過的小程序列表
- 搜索小程序(目前不支持模糊搜索,隻支持全名搜索、部分行業詞搜索、少數知名品牌模糊搜索)
- 線下掃碼二維碼(不支持微信中長按圖片識别二維碼)
- 公衆号與小程序綁定推薦
- 周邊的店等
可以看出微信對純線上的小程序推廣做了很多限制:不能朋友圈分享、不能模糊搜索、不能長按圖片識别二維碼,也不能小程序之間互相推薦、互相跳轉、不允許放廣告等。
微信小程序發布後可以從後台查看到訪問統計的情況,我們幾個小程序的每天用戶量都在數十到數千這樣的數量級,與web網站比起來并不大,而且也沒有收入,限制打擊了進一步開發的動力。
從張小龍公開課和馬化騰的介紹來看,騰訊就沒有把小程序當作線上流量獲取渠道或者取代原生app的打算,而是看中未來具有更大潛力的萬物互聯、物聯網的發展,不得不說這是非常有遠見和颠覆性思維的。
看到現在也有一些個人或者媒體認為微信小程序推出不久就“熄火”了、騰訊“失敗”了、張小龍“走下神壇”了,而我經過幾個月的密切跟蹤了解并不這樣認為,線下才是微信小程序未來大發展的領域,隻是與線下商家的洽談、小程序的開發、二維碼的鋪設、用戶的習慣、營銷體驗的改善等等都需要時間積澱,未來一定會有很典型的成功案例出現。
所以我們下一步是盡快考慮線下應用場景,推出合适的小程序産品,這方面有機會以後再寫文章介紹。
上面就是我以一個非典型程序員的角度寫下的關于微信小程序的開發過程、遇到問題和一些思考,總結一下主要兩點結論:
- 微信小程序的開發并不是很難,有一定程序基礎都可以逐步學會;
- 成功的關鍵不在于技術,而在于找準應用場景、解決用戶的問題。
评论