轉自CSDN: 本文會從小程式前端開發，小程式服務端開發及小程式的發佈與審核三個方面來闡述小程式的開發流程。 一、小程式前端介紹及開發 小程式的開發涉及到前端開發和後端開發，前端指的是在手機上能看到的部分，主要負責頁面的佈局排版及展示，後端提供數據和業務處理能力，指的是我們寫給前端調用的API介面。 ...
轉自CSDN:
本文會從小程式前端開發，小程式服務端開發及小程式的發佈與審核三個方面來闡述小程式的開發流程。
一、小程式前端介紹及開發
小程式的開發涉及到前端開發和後端開發，前端指的是在手機上能看到的部分，主要負責頁面的佈局排版及展示，後端提供數據和業務處理能力，指的是我們寫給前端調用的API介面。
註冊賬號
小程式的註冊比較簡單，首先，登錄微信公眾號平臺：http://mp.weixin.qq.com ，點擊右上角“立即註冊”按鈕。
選擇小程式
註冊小程式
在註冊小程式時，這裡輸入的郵箱，一定要是未在騰訊平臺未使用過的郵箱，否則會提示郵箱已經被使用。註意這裡說的騰訊平臺，比如你用來註冊微信公眾號的郵箱、用來註冊企鵝號的郵箱，都是不能用的。
註冊成功之後，需要進入郵箱激活。激活後，按照要求，選擇申請類型，進行註冊開通。
創建工程
為了支持小程式的開發， 微信官方研發了一個叫做微信開發者工具的東西，這個工具最初是為了協助微信公眾號開發者做開發時用的，當微信小程式上線以後，微信開發者工具同步更新，也支持了小程式的開發。由於小程式中的頁面及部分語法，完全是微信自己封裝好的，同時小程式的編譯發佈，都只能在微信開發者工具中完成，所以，微信開發者工具成為了大部分小程式開發者使用的開發工具。跟其他開發工具相比，微信開發者工具的易用性還是比較差，所以，一部分人用其他的開發工具做開發，只用微信開發者工具編譯和發佈，雖然比較麻煩，但是效率提高不少，比價推薦的工具是國產的EgretWing。
微信開發者工具下載地址：
https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/devtools.html
點擊藍色字體“開發者工具”即可。
安裝完微信開發者工具，第一次打開，會提示讓掃描二維碼，這隻是一個開發授權，只要微信在小程式後臺被綁定為開發者的微信，掃描都可以。掃描完成後登錄開發工具。
登錄成功之後，進入項目列表頁面，如果之前打開過小程式，則會以列表顯示。
點擊“添加項目”，進入創建小程式頁面。
這裡的APPID，是小程式開發許可權的認證，如果不填，選擇“無APPID”也可以進行開發，但是無法正常發佈小程式。APPID在小程式後臺可以拿到，如圖：
小程式的項目名稱，可以根據自己的實際項目填寫，支持中英文。
項目目錄，是指開發目錄，選擇指向到要開發的小程式目錄即可。點擊確定，一個新的小程式項目就創建成功。
工程結構
新建的小程式項目如圖：
上圖中，區塊1是菜單欄，關於小程式的操作菜單都在這裡。
編輯：也是預設模式，在此模式下，可以對小程式源碼進行編輯；
編譯：在此模式下，可以編譯調試小程式，小程式的日誌輸出會在日誌區域列印出來；
項目：在此模式下，可以對已經開發完成的或者可以提測的小程式進行打包發佈。
區塊2是預覽區域，小程式的頁面展示，頁面間的交互，都在這裡，這塊的小程式跟發佈出去在手機上點開的小程式顯示是完全一樣的。
區塊3是工程代碼結構，展示出項目中所有的文件及文件間的關係。
區塊4是代碼區域，開發主要在這個區域進行編碼。
每一個微信小程式，都會有三個公共入口文件：
app.json：配置文件，配置路由列表、程式信息等。
app.js：公共入口文件，小程式啟動時的 Init 邏輯。
app.wxss ：公共樣式文件，公共樣式用於每個視圖 View 中。
同時，也會有pages這個文件夾，文件夾內就是所有的前端頁面文件。
主要文件
小程式前端的文件有四類，js、json、wxml、wxss。
js：主要負責調用後端介面做數據交互，頁面邏輯處理；
json：主要用來存儲數據內容，一般用的較少；
wxml：相當於html，主要用來展示頁面信息；
wxss：相當於css，跟css語法基本一致；
如圖：
在小程式中，每一個頁面需要創建一個文件夾，如上圖中的list，該文件夾下需要創建以上四個文件，需要註意的是，這四個文件的文件名要和文件夾保持一致。
常用方法
微信小程式本身並沒有創造出新的編程語言，其本質還是h5、css、js，是最基礎的前端技術。所以，小程式的技術門檻較低，很多小程式都是一周時間開發並上線的。
但是微信對以上三種前端技術都做了一定的封裝，用wxml來代替h5，其中的標簽做了大量封裝，如圖：
同時，把css封裝為wxss，這個幾乎沒什麼變化。
再說js，封裝了很多微信內部的js，在小程式中，這些被封裝的js方法叫做組件。比較常用的有這些：
wx.request：用來做網路請求，小程式前端跟後端API交互，就用的是這個組件；
wx.navigateTo：保留當前頁面，跳轉到應用內的某個頁面，使用wx.navigateBack可以返回到原頁面；
wx.pageScrollTo：將頁面滾動到目標位置；
wx.setNavigationBarTitle：動態設置當前頁面的標題。
所有的組件可以在這裡查看文檔：
https://mp.weixin.qq.com/debug/wxadoc/dev/api/
二、小程式服務端介紹及開發
小程式前段負責內容的展示，如果我們開發的是純靜態頁面，那麼只需要掌握上面的就可以。但是，如果我們要做動態頁面，也就是頁面內容是跟資料庫交互的，就需要服務端來提供數據的交互。在小程式中，服務端是以介面的方式實現的，結果以json數據格式返回。
服務介面介紹
服務端的介面開發跟一般的介面是一樣的，可以用任何一種後端開發語言來實現，介面開發完成後，小程式前段通過組件wx.request調用介面，來實現跟服務端的交互，如圖：
看到這個方法大家應該很眼熟，對，實際上wx.request就是jquery中的ajax，使用方法完全一樣。在這個介面調用中，小程式前端調用後端介面，獲取到了新聞列表，然後將結果集賦值給list的變數。
在小程式對應的前端頁面news.wxml中，將list進行遍歷展示，如圖：
這樣，我們就完成了一個小程式中的列表頁面。其他的服務端交互都是類似的，小程式的開發工作，到這裡其實已經結束，下麵都是相關的配置。
安全證書的申請
前面說到，在小程式中服務端介面的開發跟一般的介面是一樣的，一般的介面大部分都採用的http協議，但是，小程式要求必須是https安全協議，否則介面調用會失敗，這是強制的。所以，我們的服務端必須安裝安全證書，採用https協議對外發佈介面。
網路上提供安全證書的服務商很多， 比如賽門鐵克，有收費何免費的證書。如果是企業應用，建議去買一個企業級的安全證書，如果只是個人開發研究的話，這裡給大家介紹一個比較靠譜的免費安全證書——阿裡雲。阿裡雲給個人用戶提供不限時長的免費證書，註意一定是個人用戶，企業用戶是沒有這個福利的。首先，以個人用戶賬戶登陸阿裡雲，找到“CA證書服務”，如圖：
進入證書服務頁面後，點擊“立即購買”，如圖：
選擇免費證書，立即購買：
在控制臺中，找到“證書服務”，按照要求填寫信息就能生成綁定指定功能變數名稱的證書。
證書生成後，可以下載，在下載的證書文件中，有詳細的說明文檔，告訴你在不同的環境中如何快速安裝配置安全證書，這裡就不贅述。
三、小程式的發佈與審核
提交與發佈
小程式開發完成之後，就可以在微信開發者工具中進行提交，如圖：
在項目模式下，點擊上傳，即可完成小程式代碼的上傳，上傳完成後，需要登陸到小程式管理後臺，需要設置相關項，如圖：
首先，設置合法功能變數名稱，也就是服務端介面的功能變數名稱地址，這裡註意不要填錯。
其次，填寫小程式基礎信息：
這裡需要註意的是服務類目的選擇，一定要選擇跟自己小程式對應的類目，一點類目選擇不匹配，會審核不通過，再次提交再次審核，就需要3到5個工作日，很多人在這個地方一耗就是一個多月。
只要基礎信息審核通過，就可以進性小程式發佈審核，如圖：
小程式發佈審核通過後，就可以在微信中搜索到已經發佈的小程式，至此，小程式的開發流程完成。
