1. 程式人生 > >零基礎入門微信小程式開發

零基礎入門微信小程式開發

注:本文來源於:《零基礎入門微信小程式開發



課程介紹


本達人課是一個系列入門教程,目標是從 0 開始帶領讀者上手實戰,課程以微信小程式的核心概念作為主線,介紹配置檔案、頁面樣式檔案、JavaScript 的基本知識並以指南針為例對基本知識進行擴充套件,另外加上開發工具的安裝、小程式釋出等內容,共 9 篇文章。

本課程共包含四個部分。

第一部分(第1-3篇)帶你初步瞭解小程式是什麼,然後進行小程式開發的準備工作,從註冊賬號到安裝開發工具一應俱全。工欲善其事,必先利其器。

第二部分(第4-6篇)。面向入門級讀者介紹小程式構成的各個部分。您不需要事前準備任何知識,需要掌握的會進行說明,需要擴充套件的會提供資訊的出處。千里之行始於足下。

第三部分(第7-8篇)通過指南針的例子,介紹一個小程式的實現過程。通過這個例項,綜合運用所學知識,使小程式開發能力進一步提高。麻雀雖小,五臟俱全。

第四部分(第9篇)只包含一篇文章,具體介紹小程式釋出的過程。使讀者能夠對小程式開發的全過程有一個完整的瞭解。編筐編簍,全在收口。

哪怕您事先沒有任何微信小程式相關技術的經驗,認真學完該達人課之後,您會掌握基本的小程式開發方法,並具備自主擴充套件知識面,以及進行更高層次開發的能力。

作者介紹
薛衛國,現就職於某外企擔任架構小組責任人,CSDN 部落格專家,長期從事 C++ 開發,精通 UML、設計模式,創辦有公眾號《面向物件思考》。畢業於東北大學,曾留校在國家重點實驗室工作。

課程內容

第01課:初識微信小程式


要火的節奏
最近有一則來自北京商報的新聞引起了不少人的注意,我們這裡選取一部分:

爭奪流量 手機廠商“抱團”對抗微信小程式

3月20日,小米、中興、華為等10家手機廠商聯合對外宣佈,推出基於手機硬體平臺的新型應用生態“快應用”及相關標準。在微信小程式使用者規模日益壯大、硬體利潤微薄的背景下,本次快應用的推出被看做是手機廠商與騰訊爭奪流量與利益的舉動。業內人士認為,對於整個市場來說,流量競爭有促進作用,但微信已經具有較強的使用者黏性,十大手機廠商要想爭奪使用者流量並非易事。

估計這些廠家的標準出臺還需要一段時間,但是有一點可以確定的是:小程式類的開發要火。

但如果你開啟輕應用的文件可以發現兩點:

1.應用文件的資訊量還很有限。2.輕應用的架構,採用的技術和微信小程式很相似。

處於這個目的,作者趕在這個時機制作了本課程,希望可以為潮流加一份力;作為程式設計師,希望各位可以通過本課程的學習,在有限的時間內為自己添一份技能!

參考資料:輕應用開發文件

什麼是小程式?


最近一個小遊戲“跳一跳”火得不得了,相信即使您自己沒有玩過,身邊的親戚朋友也一定玩過。畫面大致如下:

當然了,關於玩法等等不是本文的內容,可以參照百度百科。

這就是微信小程式的成功案例了。

微信小程式簡介
微信小程式簡稱小程式,張小龍在微信公開課 Pro 上釋出的小程式正式上線,時間是2017年1月9日。關於小程式,張小龍在他的公開課中有過很詳細的說明,大家儘可以到網上去搜,這裡不再贅述,只說作者自己的理解。

微信小程式這個詞可以分解為“微信”和“小程式”兩部分。

其中“微信”可以理解為“微信中的”,指的是小程式的執行環境;當然微信在提供執行環境的同時也延長了使用者使用微信的時間。

“小程式”是說它首先是程式,然後具備輕便的特徵。小程式並不像其他應用那樣,它不需要安裝,而是通過掃描二維碼等開啟後直接執行;用完以後也不需要解除安裝。這就是所謂用完即走的原則。

另外,微信不會提供類似於小程式商店的地方,需要小程式提供者自己通過二維碼,群分享的手段來傳播,這就是所謂去中心化的形態。

微信朋友圈提供了好友之間溝通訊息的手段,訂閱號提供了面向粉絲推送資訊的手段,而小程式則是提供了使用者通過自己的操作而與服務實現互動的手段。

小程式相關技術介紹


本課程的目標讀者群是瞭解基本的 C/C++ 語法但對小程式開發完全沒有經驗的程式設計師,因此在說明微信小程式的同時,對相關技術也將進行相應的介紹。通過這種方式,可使讀者能夠非常順利地學習,而無需到處尋找資料導致忘了學習微信小程式這個本來的目的。

微信小程式推出一年多一點的時間,算是一個新事物,但是利用的技術卻都是已經存在的技術。如果你稍加調查就會發現,不光是微信小程式,很多類似形態的應用都採用類似的架構:

使用 JSON 技術來表現應用的配置資訊。包含應用的基本資訊,頁面配置和路由,應用全體的資訊等。
使用經過定製 CSS+XML 技術來實現檢視層的描述。畫面元素,例如列表、按鈕、文字框、選擇框等都通過 XML 語言來描述,遵從 XML 語法,對於頁面的共同風格,使用 CSS 進行定義。
使用 JavaScript 語言來實現邏輯層結構。包括使用者操作的處理,系統 API 的呼叫等。
架構在檢視層和邏輯層之間提供資料和事件傳輸功能,從而儘量減少難度。由於類似應有都屬於輕應用,所以提供的功能都比較單一。
具體的語法,用途等將會在使用的時候詳細介紹,這裡只提一下相關技術的基本情況,瞭解即可。

換一種說法就是:並不需要另外自己調查,跟著本課程走下去就好。

JSON


JSON(JavaScript Object Notation)是一種輕量級的資料交換格式。它基於 ECMAScript(W3C 制定的 JavaScript 規範)的一個子集,採用完全獨立於程式語言的文字格式來儲存和表示資料。簡潔和清晰的層次結構使得 JSON 成為理想的資料交換語言。易於人閱讀和編寫,同時也易於機器解析和生成,並有效地提升網路傳輸效率。

XML
XML(Extensible Markup Language),中文名為可擴充套件標記語言,標準通用標記語言的子集,是一種用於標記電子檔案使其具有結構性的標記語言。

在電子計算機中,標記指計算機所能理解的資訊符號,通過此種標記,計算機之間可以處理包含各種的資訊,比如文章等。它可以用來標記資料、定義資料型別,是一種允許使用者對自己的標記語言進行定義的源語言。它非常適合全球資訊網傳輸,提供統一的方法來描述和交換獨立於應用程式或供應商的結構化資料。是 Internet 環境中跨平臺的、依賴於內容的技術,也是當今處理分散式結構資訊的有效工具。早在1998年,W3C 就釋出了 XML1.0 規範,使用它來簡化 Internet 的文件資訊傳輸。

CSS


層疊樣式表(英文全稱:Cascading Style Sheets)是一種用來表現 HTML 或 XML 等檔案樣式的計算機語言。CSS 不僅可以靜態地修飾網頁,還可以配合各種指令碼語言動態地對網頁各元素進行格式化。

CSS 能夠對網頁中元素位置的排版進行畫素級精確控制,支援幾乎所有的字型字號樣式,擁有對網頁物件和模型樣式編輯的能力。

JavaScript


JavaScript 一種直譯式指令碼語言,是一種動態型別、弱型別、基於原型的語言,內建支援型別。它的直譯器被稱為 JavaScript 引擎,為瀏覽器的一部分,廣泛用於客戶端的指令碼語言,最早是在 HTML 網頁上使用,用來給 HTML 網頁增加動態功能。

在1995年時,由 Netscape 公司的 Brendan Eich,在網景導航者瀏覽器上首次設計實現而成。因為 Netscape 與 Sun 合作,Netscape 管理層希望它外觀看起來像 Java,因此取名為 JavaScript。但實際上它的語法風格與 Self 及 Scheme 較為接近。

為了取得技術優勢,微軟推出了 JScript,CEnvi 推出 ScriptEase,與 JavaScript 同樣可在瀏覽器上執行。為了統一規格,再加上 JavaScript 兼容於 ECMA 標準,因此也稱為 ECMAScript。

學習方法


微信小程式雖然是新事物,但學習方法卻不是新方法。

我們的套路是:首先生產一個最簡單的小程式例項,通過這個例項介紹微信小程式的構造和想法,這算是學習這個活動中“學”的部分。然後擴充套件這些知識點,通過開發一個簡單的小程式的過程來運用這些知識點,這算是“習”的過程。

這是作者這些年來屢試不爽的方法。

參考資料


在學習和開發的過程中,我們主要會參考微信的開發文件。其原因是小程式太新了,相應的知識儲備還不夠豐富。雖然也可以找到一些開發方面的書籍,但是說實話,內容並不比微信本身的開發文件更詳盡。

第02課:開發環境的準備


建立自己的小程式賬號


在開發自己的微信小程式之前,首先需要註冊小程式賬號,接下來我們一步一步做詳細說明。

開啟瀏覽器,輸入:mp.weixin.qq.com。

因為是第一次使用,所以選擇畫面右上角的“立即註冊”。

選擇左下角的“小程式”方框。

輸入郵箱、密碼、確認密碼、驗證碼,之後選擇同意協議和條款。當然這裡的密碼不是郵箱的密碼,而是正在申請的小程式賬號的密碼。

最後按下“註冊”按鈕。

點選“登入郵箱”按鈕。開啟相應的軟體後,應該可以收到下面的郵件。如果沒收到的話,建議看一下垃圾郵件,沒準兒那裡有。

單擊下半部一大片綠色的部分,就可以回到註冊介面繼續剩下的工作。

選擇主題型別為“個人”,然後輸入管理員的姓名,身份證號碼。

輸入手機號碼並單擊“獲取驗證碼”,將手機接收到的驗證碼輸入到簡訊驗證碼欄中。

完成上述步驟,畫面下部會出現一個二維碼,需要用已經繫結銀行卡的微信的掃一掃功能掃描該二維碼進行實名認證。

如果認證成功,畫面會變成下面這個樣子。

點選“繼續”按鈕。

意思就是現在後悔還來得及,如果不後悔今後就沒法後悔了。我們按下“確定”按鈕。

大功告成!

小程式管理平臺


賬號申請成功之後,就可以登入“微信公眾平臺 | 小程式”了。在目前這個時間點雖然並不需要馬上做什麼。本文接下來將對其中重要的選單功能做簡單介紹。

首頁


內容比較簡單,主要是表示小程式的實時訪問次數和系統公告。

開發管理


使用者在使用小程式的時候,需要掃描二維碼進入。而這個二維碼需要開發者將小程式上傳到騰訊伺服器之後從騰訊取得。上傳過程便在該頁面上完成。

過程也不復雜,一共分為三步:上傳程式碼,提交稽核和釋出小程式。

使用者身份


這個畫面用來指定小程式專案的管理員和專案成員。其中專案成員又包括開發者和體驗者。

資料分析


這個畫面可以統計小程式的訪問數量,對使用者來源、性別、年齡分佈等進行分析。

模板訊息


這個畫面可以定製微信小程式向客戶傳送的訊息。

客服訊息


通過這個畫面可以指定小程式的客服人員,從而實現小程式的線上客服功能。

附近的小程式


當小程式的主體為企業、政府、媒體及其他組織時可以開通此功能。此功能有效時,小程式指定地點以後,使用者可以通過微信的“附近的小程式”介面發現該小程式。

運維中心


一共有兩個頁面,分別用於查詢小程式的錯誤日誌和對客戶端進行監控。

推廣


用來自定義小程式推廣關鍵字。

設定


設定分類中一共有五個頁面,這裡只介紹前兩個。

基本設定





顧名思義,這裡主要是用來設定小程式的基本資訊。內容包括:

設定小程式名稱,小程式頭像;
取得小程式碼;
取得認證;
設定主題資訊;
其他省略。

開發設定


這個頁面主要負責和小程式開發相關的設定資訊,內容包括:

取得小程式 ID。每一個釋出的小程式都需要唯一的 ID。
生成小程式祕鑰。
指定伺服器域名。小程式可以訪問外部網站,可以上傳和下載檔案。但是物件伺服器不是任意的,需要在這裡指定。
其他省略。

其他


在畫面的右上角,有兩個連結“文件”和“社群”分別可以進入小程式開發文件和社群。在實際的學習過程中可以積極利用。

安裝開發工具


小程式賬號申請成功之後的工作就是準備開發環境。

早期的版本在首頁分類中有開發工具的下載連結,最近不知道為什麼變成了訪問次數統計畫面。但是沒有關係,可以直接點選這裡,便可開啟下面的下載地址頁面。

根據作業系統選擇合適的下載連結。

下載完成後開啟安裝程式,首先是開始畫面。

按下“下一步”按鈕。

按下“我接受”按鈕。

指定適當的安裝目錄後按下“安裝”按鈕。

安裝中……

完成!

接下來就可以開始微信小程式的開發之旅啦!
































——————————————————————————————————————————————————————————————————————————————————————————————