系列文章
前言
好久不見，很久沒更新部落格了，前段時間在深圳出差，胡吃海喝頹廢了很久，不想每天下班刷抖音、打遊戲虛度光陰，準備把之前做的一個小程式案例詳細的介紹一下，從安裝編譯器開始重新開發覆盤一遍，希望對初入小程式的你有所幫助。
掃碼體驗，先睹為快
可以掃描下微信小程式的二維碼，體驗一下開發完畢的效果：
原始碼地址:
GitHub : https://github.com/Tzlibai/uni-app-video -- Star 100+
uni-app外掛市場地址: https://ext.dcloud.net.cn/plugin?id=1839 -- 外掛下載量1000+
開發前的準備
目前開發小程式的常見開發方案：微信原生wxml開發，wepy，mpvue，taro、uni-app等，詳細優劣對比可以參考「京東凹凸實驗室」的這篇文章：小程式多端框架的全面測評；
好的話不多少，進入正題，這裡整理一個簡單的Xmind，其實小程式的開發並沒有想象中的那麼複雜，接下來我將慢慢的從零開始解讀這個一個小程式專案，帶大家走入正題：
接下來的內容我假設你已瞭解關於HTML、CSS和JavaScript 的初中級知識。並且有一定的Vue基礎，如果你剛開始學習前端開發，將本文作為你的第一步可能不是最好的主意！
1 微信小程式賬號方面
1.1 註冊微信小程式賬號
如果已註冊小程式賬號，可以略過此步~
假設沒有小程式賬號：
我們可以通過微信公眾號平臺右上角 → 立即註冊 → 註冊的帳號型別 → 選擇小程式型別註冊 進入註冊頁面 → 輸入郵箱 → 密碼 → 驗證碼 → 啟用郵箱 → 填寫主體資訊（根據自身選擇型別：個人、企業、政府、媒體等） → 登記相關資訊即可註冊；
「註冊注意事項：」:郵箱作為登入帳號，需要填寫未在微信公眾平臺註冊，並且沒有被個人微訊號繫結的郵箱，每個郵箱只能申請一個小程式;
1.2 登入微信小程式後臺
1.「完善相關資訊」補充小程式名稱資訊，上傳小程式頭像，填寫小程式介紹並根據後續開發的內容選擇服務範圍；
2.「繫結開發者」登入微信公眾平臺小程式，進入使用者身份-開發者，新增繫結開發者、體驗者。（體驗者的含義是在小程式沒有通過稽核正式釋出之前，體驗者可以使用該小程式）；
3.「獲取AppID」登入微信公眾平臺小程式，進入“設定-賬號資訊（設定的最下面）”，獲取AppID資訊。（微信AppID是後面開發小程式必須使用的，在開發小程式之前需要填寫開發者的AppID）。
1.3 下載微信開發者工具
前往開發者工具下載頁面，根據自己的作業系統下載對應的安裝包進行安裝,建議現在穩定版本的安裝包，其實微信開發者工具不止可以開發小程式，也可以用來製作微信小遊戲，有興趣的朋友可以找找相關資料，開發一款屬於自己的小遊戲~
微信開發者工具安裝完畢後，雙擊開啟軟體，進行登入即可，由於我們是使用uni-app進行開發小程式,所以這裡先開啟登入即可，後面我們使用相關工具自動編譯小程式；
1.4 總結
以上是關於小程式註冊、微信開發者工具下載的內容，文章比較簡練，如果需要對小程式有更深一步的瞭解，可以檢視微信小程式官方開放文件,官方文件中對於小程式的框架配置、元件介紹、API以及擴充套件能力等有非常系統的講解，非常適合初學者對小程式的學習；
2 HBuilderX、uni-app方面
前言
可能大家對HBuilderX、uni-app的瞭解的不是很多；這兩者都是DCloud旗下的產品。
DCloud公司擁有500萬開發者使用者，幾十萬應用案例、10億手機端月活使用者，數千款uni-app外掛、70+微信/qq群，開發者可以放心選擇。
HBuilderX
HBuilderX是一款專為Vue的打造編輯器，C++架構，啟動速度、大文件開啟速度、編碼提示，都還是挺不錯的，我們今天開發小程式用到的就是這款編輯器，我最開始接觸它的綠柔主題感覺特別清爽、特別舒服; 其實我們在Vue.js的官網我們也可以看到他的身影。
uni-app
uni-app是一個使用 Vue.js 開發所有前端應用的框架，開發者編寫一套程式碼，可釋出到iOS、Android、H5、以及各種小程式（微信/支付寶/百度/頭條/QQ/釘釘/淘寶）、快應用等多個平臺。個人接觸體驗下來，上手快，效果高；
「開始我們接下來的小程式就是用HBuilderX編輯器，加之uni-app框架來開發的」
2.1 HBuilderX的下載與使用
HBuilderX的下載
我們可以訪問HBuilderX官方下載地址: https://www.dcloud.io/hbuilderx.html進行下載，建議大家選擇APP開發版進行下載，後面可以把一套程式碼編譯成多個平臺使用，效果非常Nice
下載完成後是一個Zip檔案，解壓後選中目錄中的HBuilderX.exe
→ 點選HBuilderX.exe滑鼠右鍵出現選單
→ 點選選單項：傳送到
→ 點選桌面快捷方式，即可把圖示放到桌面
→ 雙擊即可正常使用；
HBuilderX的簡單使用
HBuilderx的使用方法其實與VScode、WebStorm、Atom等編輯器大同小異，如果你接觸過上述編輯器，那麼對你來說一定非常輕鬆！
3 新建專案
我們之前已經下載了App開發版，可以開箱即用，啟動HBuilderX軟體
接下來讓我們建立一個uni-app專案，點選工具欄裡的檔案 -> 新建 -> 專案：
選擇uni-app型別，輸入工程名，選擇模板，點選建立，即可成功建立。 uni-app自帶的模板有 Hello uni-app ，是官方的元件和API示例。還有一個重要模板是 uni-ui專案模板，日常開發推薦使用該模板，已內建一些官方的常用元件。
建立成功後，我們就可以在微信開發工具中執行啦。進入我們剛才建立的專案，
點選工具欄的執行 -> 執行到小程式模擬器 -> 微信開發者工具，即可在微信開發者工具裡面體驗uni-app。
接下來會開始編譯，並開啟微信開發者工具，當你看到以下頁面時，說明你
新建專案這一步驟就已經完成啦！
在建立的uni-app目錄中找到
manifest.json檔案，基礎設定 -> 填寫uni-appid，註冊登入後即可獲取該ID，後續檔案會使用到。
「注意事項」
由於我們是利用HBuilderX啟動微信開發者工具，所以我們在開發過程中，需要保持微信開發者工具的開啟。
我們是第一次使用，需要先配置小程式開發者工具的的相關路徑，才能執行成功。
點選工具欄的工具 -> 設定 -> 執行配置 -> 小程式執行配置, 如下圖，需在輸入框輸入微信開發者工具的安裝路徑。
首次開發時需要在小程式中設定
微信開發者工具 -> 設定 -> 安全設定，將服務埠開啟,可以使用相關的命令列呼叫工具。
uni-app預設把專案編譯到根目錄的unpackage目錄。
編譯成功後，我們需要把微信小程式的appID在微信開發者工具中填寫，如下圖：
3.1 目錄分析及UI元件引入
├─ colorui # 本專案引入了colorui元件，用於引入美化樣式元件
├─ components # 用於存放元件的目錄，可以自行新增元件
├─ pages/ # 業務頁面檔案存放的目錄，後續開發的頁面都會存放於此
│ ├─ home/
│ │ ├─ index.vue # home頁面
│ │ ......
├─ static # 存放應用引用靜態資源（如圖片、視訊等）的目錄，注意：靜態資源只能存放於此
├─ unpackage/ # 打包目錄
├─ App.vue # 應用配置，用來配置App全域性樣式以及監聽
├─ main.js # Vue初始化入口檔案
├─ manifest.json # 配置應用名稱、appid、logo、版本等打包資訊
├─ package.json # 配置頁面路由、導航條、選項卡等頁面類資訊
本專案引入了兩個元件：mi-loading、ColorUI
3.1.1 UI元件-mi-loading
相信大家在小程式的體驗中有看到Loading的動畫，這邊引入了一個Loading的元件，mi-loading
通過上方連結下載Zip包檔案，下載原始碼解壓，複製專案根目錄的 /mi-loading資料夾到你的專案components目錄中即可開啟 mi-loading.vue這個檔案，裡面的loading動畫是可以自行使用Gif圖配置，大家可以檢視該原始碼的第四行，img配置的的圖片地址就是自定義的Loding，mi-loading原始碼地址，我把自定義的圖片放置到了：/static/img/loading.gif,圖片地址：點此檢視
# 使用方法
this.$refs.Loading.show() // 開啟
this.$refs.Loading.hide() // 關閉
3.2.2 UI元件-ColorUI
本專案引入了外掛市場的ColorUI-UniApp元件庫，引入方法如下：
通過上方連結下載Zip包檔案，下載原始碼解壓，複製專案根目錄的 /colorui 資料夾到你的專案根目錄 App.vue 檔案引入關鍵Css main.css、icon.css，讓改UI元件成為每個頁面公共css
<style>
@import "colorui/main.css";
@import "colorui/icon.css";
....
</style>
我們可以使用該UI庫中封裝好的導航欄，測試效果。
在 App.vue檔案中加入如下配置，用於獲得系統資訊,該檔案原始碼地址：App.vue
// onLaunch: 當小程式載入完畢後就執行的方法
onLaunch: function() {
uni.getSystemInfo({
success: function(e) {
// #ifndef MP
Vue.prototype.StatusBar = e.statusBarHeight;
if (e.platform == 'android') {
Vue.prototype.CustomBar = e.statusBarHeight + 50;
} else {
Vue.prototype.CustomBar = e.statusBarHeight + 45;
};
// #endif
// #ifdef MP-WEIXIN
Vue.prototype.StatusBar = e.statusBarHeight;
let custom = wx.getMenuButtonBoundingClientRect();
Vue.prototype.Custom = custom;
Vue.prototype.CustomBar = custom.bottom + custom.top - e.statusBarHeight;
// #endif
// #ifdef MP-ALIPAY
Vue.prototype.StatusBar = e.statusBarHeight;
Vue.prototype.CustomBar = e.statusBarHeight + e.titleBarHeight;
// #endif
}
})}
pages.json檔案配置取消系統導航欄,該檔案原始碼地址：pages.json
# 複製下面命令需要把註釋刪除，否則會報錯
{
"globalStyle": {
"navigationStyle": "custom", // custom為自定義模式
"navigationBarTextStyle": "white", // 標題文字設為白色
"navigationBarTitleText": "uni-app", // 標題名稱
"navigationBarBackgroundColor": "#007AFF", // 更改導航背景色
"backgroundColor": "#FFFFFF" // 全域性背景色
}
}
執行成功後如下圖所示：
好的，這樣我們已經成功的引入了該UI庫，此時可以在微信開發者工具中看到效果，無需手動重新整理，當我們在HBuilderX中新增程式碼儲存，程式碼會自動編譯，微信開發者工具會自動重新整理；
總結
以上就是我們這款小程式的開發準備工作，下篇文章我們將會走入進行實際專案的從零開發，從新建一個專案到小程式程式碼的稽核上傳。