小程序作為微信之父張小龍欽點，并多次公開為之宣傳造勢的產品，在微信之后是僅有的一次。正因為這種特殊的優(yōu)待，在小程序上線后，據說內測資格一度從100w被炒到300w，先不論是真是假，單是張小龍團隊和市場對小程序的期待，就足以引起我們的重視，做為一個開發(fā)人員，也非常有必要學習和了解小程序的開發(fā)原理及流程。

如果你已經準備要做小程序開發(fā)，那么這篇文章就來的很及時。如果你的業(yè)務還不需要涉足小程序，你也可以通過本文對小程序的開發(fā)做一個基本的了解，以備不時之需。

本文會從小程序前端開發(fā)，小程序服務端開發(fā)及小程序的發(fā)布與審核三個方面來闡述小程序的開發(fā)流程。

一、小程序前端介紹及開發(fā)

小程序的開發(fā)涉及到前端開發(fā)和后端開發(fā)，前端指的是在手機上能看到的部分，主要負責頁面的布局排版及展示，后端提供數據和業(yè)務處理能力，指的是我們寫給前端調用的API接口。

注冊賬號

小程序的注冊比較簡單，首先，登錄微信公眾號平臺：http://mp.weixin.qq.com ，點擊右上角“立即注冊”按鈕。

選擇小程序

注冊小程序

在注冊小程序時，這里輸入的郵箱，一定要是未在騰訊平臺未使用過的郵箱，否則會提示郵箱已經被使用。注意這里說的騰訊平臺，比如你用來注冊微信公眾號的郵箱、用來注冊企鵝號的郵箱，都是不能用的。

注冊成功之后，需要進入郵箱激活。激活后，按照要求，選擇申請類型，進行注冊開通。

創(chuàng)建工程

為了支持小程序的開發(fā)， 微信官方研發(fā)了一個叫做微信開發(fā)者工具的東西，這個工具最初是為了協助微信公眾號開發(fā)者做開發(fā)時用的，當微信小程序上線以后，微信開發(fā)者工具同步更新，也支持了小程序的開發(fā)。由于小程序中的頁面及部分語法，完全是微信自己封裝好的，同時小程序的編譯發(fā)布，都只能在微信開發(fā)者工具中完成，所以，微信開發(fā)者工具成為了大部分小程序開發(fā)者使用的開發(fā)工具。跟其他開發(fā)工具相比，微信開發(fā)者工具的易用性還是比較差，所以，一部分人用其他的開發(fā)工具做開發(fā)，只用微信開發(fā)者工具編譯和發(fā)布，雖然比較麻煩，但是效率提高不少，比價推薦的工具是國產的EgretWing。

微信開發(fā)者工具下載地址：

https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/devtools.html

點擊藍色字體“開發(fā)者工具”即可。

安裝完微信開發(fā)者工具，第一次打開，會提示讓掃描二維碼，這只是一個開發(fā)授權，只要微信在小程序后臺被綁定為開發(fā)者的微信，掃描都可以。掃描完成后登錄開發(fā)工具。

登錄成功之后，進入項目列表頁面，如果之前打開過小程序，則會以列表顯示。

點擊“添加項目”，進入創(chuàng)建小程序頁面。

這里的APPID，是小程序開發(fā)權限的認證，如果不填，選擇“無APPID”也可以進行開發(fā)，但是無法正常發(fā)布小程序。APPID在小程序后臺可以拿到，如圖：

小程序的項目名稱，可以根據自己的實際項目填寫，支持中英文。

項目目錄，是指開發(fā)目錄，選擇指向到要開發(fā)的小程序目錄即可。點擊確定，一個新的小程序項目就創(chuàng)建成功。

工程結構

新建的小程序項目如圖：

上圖中，區(qū)塊1是菜單欄，關于小程序的操作菜單都在這里。

編輯：也是默認模式，在此模式下，可以對小程序源碼進行編輯；

編譯：在此模式下，可以編譯調試小程序，小程序的日志輸出會在日志區(qū)域打印出來；

項目：在此模式下，可以對已經開發(fā)完成的或者可以提測的小程序進行打包發(fā)布。

區(qū)塊2是預覽區(qū)域，小程序的頁面展示，頁面間的交互，都在這里，這塊的小程序跟發(fā)布出去在手機上點開的小程序顯示是完全一樣的。

區(qū)塊3是工程代碼結構，展示出項目中所有的文件及文件間的關系。

區(qū)塊4是代碼區(qū)域，開發(fā)主要在這個區(qū)域進行編碼。

每一個微信小程序，都會有三個公共入口文件：

app.json：配置文件，配置路由列表、程序信息等。

app.js：公共入口文件，小程序啟動時的 Init 邏輯。

app.wxss ：公共樣式文件，公共樣式用于每個視圖 View 中。

同時，也會有pages這個文件夾，文件夾內就是所有的前端頁面文件。

主要文件

小程序前端的文件有四類，js、json、wxml、wxss。

js：主要負責調用后端接口做數據交互，頁面邏輯處理；

json：主要用來存儲數據內容，一般用的較少；

wxml：相當于html，主要用來展示頁面信息；

wxss：相當于css，跟css語法基本一致；

如圖：

在小程序中，每一個頁面需要創(chuàng)建一個文件夾，如上圖中的list，該文件夾下需要創(chuàng)建以上四個文件，需要注意的是，這四個文件的文件名要和文件夾保持一致。

常用方法

微信小程序本身并沒有創(chuàng)造出新的編程語言，其本質還是h5、css、js，是最基礎的前端技術。所以，小程序的技術門檻較低，很多小程序都是一周時間開發(fā)并上線的。

但是微信對以上三種前端技術都做了一定的封裝，用wxml來代替h5，其中的標簽做了大量封裝，如圖：

同時，把css封裝為wxss，這個幾乎沒什么變化。

再說js，封裝了很多微信內部的js，在小程序中，這些被封裝的js方法叫做組件。比較常用的有這些：

wx.request：用來做網絡請求，小程序前端跟后端API交互，就用的是這個組件；

wx.navigateTo：保留當前頁面，跳轉到應用內的某個頁面，使用wx.navigateBack可以返回到原頁面；

wx.pageScrollTo：將頁面滾動到目標位置；

wx.setNavigationBarTitle：動態(tài)設置當前頁面的標題。

所有的組件可以在這里查看文檔：

https://mp.weixin.qq.com/debug/wxadoc/dev/api/

二、小程序服務端介紹及開發(fā)

小程序前段負責內容的展示，如果我們開發(fā)的是純靜態(tài)頁面，那么只需要掌握上面的就可以。但是，如果我們要做動態(tài)頁面，也就是頁面內容是跟數據庫交互的，就需要服務端來提供數據的交互。在小程序中，服務端是以接口的方式實現的，結果以json數據格式返回。

服務接口介紹

服務端的接口開發(fā)跟一般的接口是一樣的，可以用任何一種后端開發(fā)語言來實現，接口開發(fā)完成后，小程序前段通過組件wx.request調用接口，來實現跟服務端的交互，如圖：

看到這個方法大家應該很眼熟，對，實際上wx.request就是jquery中的ajax，使用方法完全一樣。在這個接口調用中，小程序前端調用后端接口，獲取到了新聞列表，然后將結果集賦值給list的變量。

在小程序對應的前端頁面news.wxml中，將list進行遍歷展示，如圖：

這樣，我們就完成了一個小程序中的列表頁面。其他的服務端交互都是類似的，小程序的開發(fā)工作，到這里其實已經結束，下面都是相關的配置。

安全證書的申請

前面說到，在小程序中服務端接口的開發(fā)跟一般的接口是一樣的，一般的接口大部分都采用的http協議，但是，小程序要求必須是https安全協議，否則接口調用會失敗，這是強制的。所以，我們的服務端必須安裝安全證書，采用https協議對外發(fā)布接口。

網絡上提供安全證書的服務商很多， 比如賽門鐵克，有收費何免費的證書。如果是企業(yè)應用，建議去買一個企業(yè)級的安全證書，如果只是個人開發(fā)研究的話，這里給大家介紹一個比較靠譜的免費安全證書——阿里云。阿里云給個人用戶提供不限時長的免費證書，注意一定是個人用戶，企業(yè)用戶是沒有這個福利的。首先，以個人用戶賬戶登陸阿里云，找到“CA證書服務”，如圖：

進入證書服務頁面后，點擊“立即購買”，如圖：

選擇免費證書，立即購買：

在控制臺中，找到“證書服務”，按照要求填寫信息就能生成綁定指定域名的證書。

證書生成后，可以下載，在下載的證書文件中，有詳細的說明文檔，告訴你在不同的環(huán)境中如何快速安裝配置安全證書，這里就不贅述。

三、小程序的發(fā)布與審核

提交與發(fā)布

小程序開發(fā)完成之后，就可以在微信開發(fā)者工具中進行提交，如圖：

在項目模式下，點擊上傳，即可完成小程序代碼的上傳，上傳完成后，需要登陸到小程序管理后臺，需要設置相關項，如圖：

首先，設置合法域名，也就是服務端接口的域名地址，這里注意不要填錯。

其次，填寫小程序基礎信息：

這里需要注意的是服務類目的選擇，一定要選擇跟自己小程序對應的類目，一點類目選擇不匹配，會審核不通過，再次提交再次審核，就需要3到5個工作日，很多人在這個地方一耗就是一個多月。

只要基礎信息審核通過，就可以進性小程序發(fā)布審核，如圖：

小程序發(fā)布審核通過后，就可以在微信中搜索到已經發(fā)布的小程序，至此，小程序的開發(fā)流程完成。

四、總結

小程序的開發(fā)從開發(fā)技能上講，完全是前端開發(fā)，不涉及任何新的技能，基本上也沒有什么開發(fā)難度，只要是掌握h5、css、js的開發(fā)人員，都可以勝任。比較麻煩的是小程序開發(fā)流程及開發(fā)完成后的各種資質的審核，微信官方的文檔講的不清楚，很多時候不知道自己的小程序屬于那種類目，就得去試，錯一次多的話會浪費一周，所以，這篇文章沒有詳細講解小程序的開發(fā)部分，相關文章網上很多，而是著重講解了小程序的開發(fā)流程及審核發(fā)布，希望能幫到正在或將要做小程序開發(fā)的朋友

本文標簽： 小程序開發(fā)