微信小程序:三個月學習開發實錄

一、引言

因爲工作的原因,我接觸到了微信小程序。這是一個我從未接觸過的領域,在這之前,我是從事 C++ 桌面端開發的,對於前端知識可以說是一無所知的,不僅僅對於 Html、CSS 沒有一個宏觀上的概念,甚至於 JavaScript 都沒有相對深入的瞭解。

一方面來源於興趣,另一方面來源於”玩“的心態,我接下了新員工課題中微信小程序端的開發任務。這是一個非常簡單的小程序,對於需求方來說,就是一個簡單的展示信息、錄入信息、修改信息的小程序而已。當然,這篇博客不會以這個項目爲主題而詳細闡述這個小程序的開發過程,如果這樣,這篇博客也就太沒有參考性了。

對於閱讀這篇博客的讀者來說,我希望能與你們分享的是,在接觸微信小程序三個月不到的時間裏,我是怎樣熟悉微信小程序的開發環境的,怎樣快速學習微信小程序的技術架構的,以及怎樣開始上手開發一個微信小程序的。

對於這篇博客的讀者,我對於你的假設:

  1. 你可以完全不懂前端開發
  2. 你擁有至少一種程序設計語言的開發經歷
  3. 你對於微信小程序也抱着“玩”的心態

那麼,來吧,一起來了解下微信小程序吧。

注:因爲我僅僅接觸微信小程序三個月不到的時間,本篇博客難免會有一些不足之處,希望諒解:)

再注:本篇博客中很多地方或多或少都引用了於連林著作的《實戰微信小程序:JavaScript、WXML與Flexbox綜合開發》這本書

二、什麼是微信小程序

我們要接觸微信小程序的開發,那麼首當其衝的就是,我們要去了解,什麼是微信小程序。那麼,什麼是微信小程序呢?

微信小程序,簡稱小程序,其英文名爲 Mini Program。

只要我們可以打開騰訊的微信,我們就擁有了能夠運行微信小程序的環境。

張小龍曾說:“讓創造發揮假值,好產品應該是用完即走,微信應該是給用戶提供便利,而非浪費時間。希望用戶在微信裏看到的都是自己願意看到的東西,也希望用戶能夠留出更多的事件去做其他的事情”。

騰訊微信的產品經理張小龍對於微信小程序的定義,已經深深的嵌入在了微信小程序的方方面面,那就是 不需要下載安裝,用完即走

對於微信來說,其旗下已經不僅僅微信小程序這麼一個生態產品了。同樣的產品,還有訂閱號、服務號。那麼問題來了,他們的區別是什麼呢?

訂閱號主要的功能是幫助企業或個人在微信中向用戶傳達諮詢消息,爲企業或個人提供一種新的信息傳播方式。

服務號可以幫助企業和組織在微信中向用戶提供服務,爲企業和組織提供了更強大的業務服務與用戶管理能力,同時還提供了讓用戶直接與企業的客服進行溝通等功能。

對於我們開發者而言,這種近乎官方的定義實在不夠直白,簡而言之

訂閱號和服務號都是以微信的主體聊天界面爲基礎,所以它們的界面和功能早就約定好了規則。

而微信小程序允許開發者自定義界面,還可以根據開發者的產品需求自定義功能,從而打破了訂閱號和服務號一成不變的規則。

可以說,微信小程序繼承了微信的用戶廣、成本低的優勢,對於騰訊來說,這是一個打開線上對線下的大門的重磅產品。對於騰訊來說,微信小程序何其重要。那麼,對於我們開發者來說,學習微信小程序,又有什麼好處呢?

三、學習微信小程序的好處

微信小程序的開發,在技術上的分類,應該是屬於前端的領域。在如今前端技術爭奇鬥豔,你方唱罷我登場的百家爭鳴的環境下,微信小程序誕生了。

微信小程序誕生的背景,是前端技術飛速發展技術相對成熟的今天。學習微信小程序,對於我們,尤其是我這種從來沒有接觸過前端技術,並且還在苦苦掙扎於 2011 版的 C++11 標準的學習的人來說,無疑是滑動了時間的進度條,看到了現代前端技術的一點點璀璨的亮光。

但,即使是這麼一點點亮光,已經足以讓我沉迷。

微信小程序的原生開發框架非常完善,得益於騰訊官方完善的文檔、Demo 以及持續更新的努力。學習微信小程序,我們能夠接觸到現代的前端技術框架,能夠僅僅只付出一點點成本就可以獲得掌控整個項目的快感。

微信小程序,確實很 ,但是五臟俱全。

四、開發環境

話說了那麼多,讓我們來看看,究竟如何上手開發一個微信小程序。這裏,我引用了騰訊官方的小程序開發指南的網址:

小程序開發指南

詳細的介紹,在這篇指南中都有。這裏我簡單概述下:

  1. 申請 AppID

    對於我們開發者而言,想要開發微信小程序,首當其衝的就是申請 AppID。這個 AppID,將會與騰訊開發者工具中的一系列服務綁定,並且在你新建或者打開一個項目的時候請求填入。一般來說,公司的項目,則需要以公司的名義申請 AppID,個人的項目,則也可以使用個人信息申請 AppID。

  2. 安裝開發者工具

    微信開發者工具,也就是微信小程序的開發 IDE。這是一個非常小巧的開發工具,支持公衆號和小程序的開發。對於開發者而言,比較噁心的是,微信開發者工具必須要與微信號綁定,因此每次登錄需要微信掃描二維碼登錄。

    在這個開發者工具中,有手機模擬器區域、代碼編輯區域、調試區域以及基本的功能按鈕。基本能夠滿足開發者的開發需求。就我的開發經歷而言,在 Win10 上開發,偶爾會出現卡死的情況,其他都還挺滿意的。

開發環境都完善好了,剩下的,就是學習微信小程序的開發了。

五、如何學習小程序

這裏,我大力推薦於連林的這本書《實戰微信小程序:JavaScript、WXML與Flexbox綜合開發》。

這本書的作者,不像其他微信小程序書籍的作者一樣,總是會假設你有前端開發的經驗。而看這本書,不需要你有任何的前端基礎,甚至於 JavaScript 的基礎都可以沒有,因爲作者會一步一步的教你。

這本書的組織架構也非常的清晰,從 IDE 的講解,到 JavaScript 語言的介紹,再到 WXML、WXSS 以及 Flexbox 佈局,再到微信小程序的組件介紹、API 介紹,可以說涵蓋了微信小程序開發的方方面面。

如果你也是跟我一樣的前端小白,非常建議這本書入手。以我的看書速度,大概兩三週看完就能實戰了。

另外,微信小程序官方出了一個 Demo,這個 Demo 展示了微信小程序所有的組件和接口案例,可以在這個網址中獲取到源代碼(對於開發者而言,是最好的參考資料!):

體驗微信小程序

六、微信小程序的技術架構

使用騰訊微信官方的微信小程序開發體系,也就是簡單的:

WXML,類似於 HTML,書寫頁面的框架佈局;

WXSS,類似於 CSS,書寫頁面的渲染邏輯;

JavaScript,書寫頁面的各個邏輯處理。

可以說,微信小程序的開發的學習,也是圍繞着這三個方面來的。

  1. JavaScript 學習

    如果把微信小程序比如一個人,那麼 WXML 就是骨架,WXSS 就是血肉,而 JavaScript 就是神經網絡。JavaScript 在微信小程序中起到了控制程序和頁面邏輯的作用。

    對於一個微信小程序而言,分爲 App 也就是整個程序域和頁面域的概念。頁面的邏輯一般都是在頁面的 js 文件中書寫。在頁面的 js 文件中,我們控制頁面的控件的各個事件的響應,以及對接接口,以及控制頁面跳轉等等邏輯。

    微信小程序的開發,對於 JavaScript 的應用,應該只是初級的,可以說不需要對於 JavaScript 有太多深入的瞭解,就可以玩轉微信小程序中的 JavaScript 的開發。

  2. WXML

    類似於 HTML,我們需要學習微信小程序中的佈局語言。WXML 的學習,也是在實踐中才能領會的更深。比如界面顯示的數據,是如何與 JavaScript 交互的,這些內容,都是在這一塊需要掌握的。

  3. WXSS

    類似於 CSS。這一塊的學習應該是比較痛苦的,因爲渲染本來就是一個很經驗很需要美感的工作。不過這一塊可以不用花太多時間,因爲對於 WXSS,我們需要更多的投入時間在 Flexbox 佈局中去。

  4. Flexbox 佈局

    微信小程序通過 Flexbox 佈局模型對組件進行排列。相比普通的佈局方式,Flexbox 更容易實現寬高適合屏幕的佈局,使用起來更加靈活。

    這一塊與 WXSS 的內容結合緊密,需要編寫代碼實際查看效果才能領會其中的奧祕,這一塊的學習的難度應該是最大的 。

  5. 開發基礎

    微信小程序的整個項目架構,如何全局配置程序信息、如何配置頁面信息、如何註冊程序、如何註冊頁以及如何封裝全局變量和函數,都是需要學習的。

  6. 組件

    當我們掌握了上述的技術棧之後,我們已經擁有了編寫微信小程序所有的技術。接下來學習的,就是微信小程序自己定義的一些組件的使用。

    微信小程序爲開發者定義了七類基礎組件和客服會話按鈕,我們可以照着案例一點點學習。

  7. API 接口

    學習完了組件,我們就要學習微信小程序中提供的一些 API 接口。微信小程序提供了大量的接口,比如網絡相關的、多媒體相關的、文件相關的、設備相關的、界面相關的等等。

學習微信小程序的過程,應該還算是比較輕鬆愉快的。相關文檔和 Demo 都是非常完善的,只需要找一本微信小程序的書籍,以及官方的 Demo 源碼,自己上手修改調試幾番,就能對微信小程序有一些深入的瞭解。

七、上手開發

上手開發微信小程序並不是一個很困難的事情。在我看完了於連林的那本書之後,在開發微信小程序的過程中,基本沒有遇到過太過於煩擾的問題。

微信小程序已經設計的如此成熟,以至於在開發過程中,你能遇到的問題如果查詢 API 文檔都解決不了的話,也就兩種了:

  1. 佈局問題

    佈局真的是一個比較難的問題。在 WXSS 中可能隨便修改一個數值,整個界面的佈局就全部混亂了。這一塊,只能通過自己的不停試錯才能變得遊刃有餘。

  2. 邏輯問題

    這一塊也是隻能通過自己的聰明才智,去思考如何解決現在的邏輯問題,該如何設計,有哪些解決方案,什麼方案最好,以及如何實現等等。

開發完了微信小程序,是可以上傳到騰訊後臺的,通過微信小程序後臺管理平臺,可以體驗、發佈程序。只需要添加指定的體驗者微信,就可以發送微信小程序的二維碼給他們進行體驗測試。發佈也不難,只是需要將所有的接口全部替換爲 Https 的,並且提交申請,審覈後你的小程序就可以發佈了。

八、總結

接觸微信小程序三個月以來,覺得這還是一門挺有意思的技術。

對於個人開發者而言,只需要投入一些時間,就可以上手開發自己喜歡的東西,買個服務器,寫點服務端後臺代碼,就可以自己維護一個小程序了。

當然,在這方面我還是剛剛接觸,還有好多坑沒有踩過,希望能夠在日後的工作生活中繼續體會。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章