前言

好久不見(jiàn)，很久沒(méi)更新博客了，前段時(shí)間在深圳出差，胡吃海喝頹廢了很久，不想每天下班刷抖音、打游戲虛度光陰，準(zhǔn)備把之前做的一個(gè)小程序案例詳細(xì)的介紹一下，從安裝編譯器開(kāi)始重新開(kāi)發(fā)復(fù)盤(pán)一遍，希望對(duì)初入小程序的你有所幫助。

掃碼體驗(yàn)，先睹為快

源碼地址:

GitHub : https://github.com/Tzlibai/uni-app-video -- Star 100+

開(kāi)發(fā)前的準(zhǔn)備

目前開(kāi)發(fā)小程序的常見(jiàn)開(kāi)發(fā)方案：微信原生wxml開(kāi)發(fā)，wepy，mpvue，taro、uni-app等；

「 其實(shí)上面的方案開(kāi)發(fā)小程序大同小異，可以根據(jù)喜好選擇，下文所使用的方案為uni-app 」

好的話(huà)不多少，進(jìn)入正題，這里整理一個(gè)簡(jiǎn)單的Xmind總結(jié)了一些，其實(shí)小程序的開(kāi)發(fā)并沒(méi)有想象中的那么復(fù)雜，接下來(lái)我將慢慢的從零開(kāi)始解讀這個(gè)一個(gè)小程序項(xiàng)目，帶大家

走入正題：

接下來(lái)的內(nèi)容我假設(shè)你已了解關(guān)于HTML、CSS和JavaScript 的初中級(jí)知識(shí)。并且有一定的Vue基礎(chǔ)，如果你剛開(kāi)始學(xué)習(xí)前端開(kāi)發(fā)，將本文作為你的第一步可能不是最好的主意！

1 微信小程序賬號(hào)方面

1.1 注冊(cè)微信小程序賬號(hào)

如果已注冊(cè)小程序賬號(hào)，可以略過(guò)此步~

假設(shè)沒(méi)有小程序賬號(hào)：

1. 我們可以通過(guò)微信公眾號(hào)平臺(tái)右上角 →立即注冊(cè) → 注冊(cè)的帳號(hào)類(lèi)型 → 選擇小程序類(lèi)型注冊(cè)

2. 進(jìn)入注冊(cè)頁(yè)面 → 輸入郵箱 → 密碼 → 驗(yàn)證碼 → 激活郵箱 → 填寫(xiě)主體信息（根據(jù)自身選擇類(lèi)型：個(gè)人、企業(yè)、政府、媒體等） → 登記相關(guān)信息即可注冊(cè)；

「 注冊(cè)注意事項(xiàng)： 」 :郵箱作為登錄帳號(hào)，需要填寫(xiě)未在微信公眾平臺(tái)注冊(cè)，并且沒(méi)有被個(gè)人微信號(hào)綁定的郵箱，每個(gè)郵箱只能申請(qǐng)一個(gè)小程序;

1.2 登錄微信小程序后臺(tái)

1. 「 完善相關(guān)信息 」 補(bǔ)充小程序名稱(chēng)信息，上傳小程序頭像，填寫(xiě)小程序介紹并根據(jù)后續(xù)開(kāi)發(fā)的內(nèi)容選擇服務(wù)范圍；

2. 「 綁定開(kāi)發(fā)者 」 登錄微信公眾平臺(tái)小程序，進(jìn)入用戶(hù)身份-開(kāi)發(fā)者，新增綁定開(kāi)發(fā)者、體驗(yàn)者。（體驗(yàn)者的含義是在小程序沒(méi)有通過(guò)審核正式發(fā)布之前，體驗(yàn)者可以使用該小程序）；

3. 「 獲取AppID 」 登錄微信公眾平臺(tái)小程序，進(jìn)入“設(shè)置-賬號(hào)信息（設(shè)置的最下面）”，獲取AppID信息。（微信AppID是后面開(kāi)發(fā)小程序必須使用的，在開(kāi)發(fā)小程序之前需要填寫(xiě)開(kāi)發(fā)者的AppID）。

1.3 下載微信開(kāi)發(fā)者工具

1. 前往開(kāi)發(fā)者工具下載頁(yè)面，根據(jù)自己的操作系統(tǒng)下載對(duì)應(yīng)的安裝包進(jìn)行安裝,建議現(xiàn)在穩(wěn)定版本的安裝包，其實(shí)微信開(kāi)發(fā)者工具不止可以開(kāi)發(fā)小程序，也可以用來(lái)制作微信小游戲，有興趣的朋友可以找找相關(guān)資料，開(kāi)發(fā)一款屬于自己的小游戲~

2. 微信開(kāi)發(fā)者工具安裝完畢后，雙擊打開(kāi)軟件，進(jìn)行登錄即可，由于我們是使用uni-app進(jìn)行開(kāi)發(fā)小程序,所以這里先打開(kāi)登錄即可，后面我們使用相關(guān)工具自動(dòng)編譯小程序；

1.4 總結(jié)

以上是關(guān)于小程序注冊(cè)、微信開(kāi)發(fā)者工具下載的內(nèi)容，文章比較簡(jiǎn)練，如果需要對(duì)小程序有更深一步的了解，可以查看 微信小程序官方開(kāi)放文檔 ,官方文檔中對(duì)于小程序的框架配置、組件介紹、API以及擴(kuò)展能力等有非常系統(tǒng)的講解，非常適合初學(xué)者對(duì)小程序的學(xué)習(xí)；

2 HBuilderX、uni-app方面

前言

可能大家對(duì)HBuilderX、uni-app的了解的不是很多；這兩者都是DCloud旗下的產(chǎn)品。

DCloud公司擁有500萬(wàn)開(kāi)發(fā)者用戶(hù)，幾十萬(wàn)應(yīng)用案例、10億手機(jī)端月活用戶(hù)，數(shù)千款uni-app插件、70+微信/qq群，開(kāi)發(fā)者可以放心選擇。

HBuilderX

HBuilderX 是一款專(zhuān)為Vue的打造編輯器，C++架構(gòu)，啟動(dòng)速度、大文檔打開(kāi)速度、編碼提示，都還是挺不錯(cuò)的，我們今天開(kāi)發(fā)小程序用到的就是這款編輯器，我最開(kāi)始接觸它的綠柔主題感覺(jué)特別清爽、特別舒服; 其實(shí)我們?cè)赩ue.js的官網(wǎng)我們也可以看到他的身影。

uni-app

uni-app 是一個(gè)使用 Vue.js 開(kāi)發(fā)所有前端應(yīng)用的框架，開(kāi)發(fā)者編寫(xiě)一套代碼，可發(fā)布到iOS、Android、H5、以及各種小程序（微信/支付寶/百度/頭條/QQ/釘釘/淘寶）、快應(yīng)用等多個(gè)平臺(tái)。個(gè)人接觸體驗(yàn)下來(lái)，上手快，效果高；

「 開(kāi)始我們接下來(lái)的小程序就是用HBuilderX編輯器，加之uni-app框架來(lái)開(kāi)發(fā)的 」

2.1 HBuilderX的下載與使用

HBuilderX的下載

我們可以訪問(wèn) HBuilderX官方下載地址進(jìn)行下載，建議大家選擇APP開(kāi)發(fā)版進(jìn)行下載，后面可以把一套代碼編譯成多個(gè)平臺(tái)使用，效果非常Nice

下載完成后是一個(gè)Zip文件，解壓后選中目錄中的HBuilderX.exe

→ 點(diǎn)擊HBuilderX.exe鼠標(biāo)右鍵出現(xiàn)菜單

→ 點(diǎn)擊菜單項(xiàng)：發(fā)送到

→ 點(diǎn)擊桌面快捷方式，即可把圖標(biāo)放到桌面

→ 雙擊即可正常使用；

HBuilderX的簡(jiǎn)單使用

HBuilderx的使用方法其實(shí)與VScode、WebStorm、Atom等編輯器大同小異，如果你接觸過(guò)上述編輯器，那么對(duì)你來(lái)說(shuō)一定非常輕松！

3 新建項(xiàng)目

我們之前已經(jīng)下載了App開(kāi)發(fā)版，可以開(kāi)箱即用，啟動(dòng)HBuilderX軟件

1. 接下來(lái)讓我們創(chuàng)建一個(gè)uni-app項(xiàng)目，點(diǎn)擊工具欄里的文件 -> 新建 -> 項(xiàng)目：

2. 選擇uni-app類(lèi)型，輸入工程名，選擇模板，點(diǎn)擊創(chuàng)建，即可成功創(chuàng)建。 uni-app自帶的模板有 Hello uni-app ，是官方的組件和API示例。還有一個(gè)重要模板是 uni-ui項(xiàng)目模板，日常開(kāi)發(fā)推薦使用該模板，已內(nèi)置一些官方的常用組件。

3. 創(chuàng)建成功后，我們就可以在微信開(kāi)發(fā)工具中運(yùn)行啦。進(jìn)入我們剛才創(chuàng)建的項(xiàng)目， 點(diǎn)擊工具欄的運(yùn)行 -> 運(yùn)行到小程序模擬器 -> 微信開(kāi)發(fā)者工具 ，即可在微信開(kāi)發(fā)者工具里面體驗(yàn)uni-app。

4. 接下來(lái)會(huì)開(kāi)始編譯，并打開(kāi)微信開(kāi)發(fā)者工具，當(dāng)你看到以下頁(yè)面時(shí)，說(shuō)明你 新建項(xiàng)目 這一步驟就已經(jīng)完成啦！
   

5. 

6. 在創(chuàng)建的uni-app目錄中找到 manifest.json 文件，基礎(chǔ)設(shè)置 -> 填寫(xiě)uni-appid，注冊(cè)登錄后即可獲取該ID，后續(xù)文件會(huì)使用到。

「 注意事項(xiàng) 」

• 由于我們是利用HBuilderX啟動(dòng)微信開(kāi)發(fā)者工具，所以我們?cè)陂_(kāi)發(fā)過(guò)程中，需要保持微信開(kāi)發(fā)者工具的打開(kāi)。

• 我們是第一次使用，需要先配置小程序開(kāi)發(fā)者工具的的相關(guān)路徑，才能運(yùn)行成功。 點(diǎn)擊工具欄的工具 -> 設(shè)置 -> 運(yùn)行配置 -> 小程序運(yùn)行配置 , 如下圖，需在輸入框輸入微信開(kāi)發(fā)者工具的安裝路徑。

• 首次開(kāi)發(fā)時(shí)需要在小程序中設(shè)置 微信開(kāi)發(fā)者工具 -> 設(shè)置 -> 安全設(shè)置，將服務(wù)端口開(kāi)啟 ,可以使用相關(guān)的命令行調(diào)用工具。

• uni-app默認(rèn)把項(xiàng)目編譯到根目錄的unpackage目錄。

• 編譯成功后，我們需要把微信小程序的appID在微信開(kāi)發(fā)者工具中填寫(xiě)，如下圖：

3.1 目錄分析及UI組件引入

├─ colorui           # 本項(xiàng)目引入了colorui組件，用于引入美化樣式組件
├─ components        # 用于存放組件的目錄，可以自行添加組件
├─ pages/            # 業(yè)務(wù)頁(yè)面文件存放的目錄，后續(xù)開(kāi)發(fā)的頁(yè)面都會(huì)存放于此
│ ├─ home/
│ │ ├─ index.vue     # home頁(yè)面
│ │ ......
├─ static            # 存放應(yīng)用引用靜態(tài)資源（如圖片、視頻等）的目錄，注意：靜態(tài)資源只能存放于此
├─ unpackage/        # 打包目錄
├─ App.vue           # 應(yīng)用配置，用來(lái)配置App全局樣式以及監(jiān)聽(tīng)
├─ main.js           # Vue初始化入口文件
├─ manifest.json     # 配置應(yīng)用名稱(chēng)、appid、logo、版本等打包信息
├─ package.json      # 配置頁(yè)面路由、導(dǎo)航條、選項(xiàng)卡等頁(yè)面類(lèi)信息

本項(xiàng)目引入了兩個(gè)組件： mi-loading、ColorUI

3.1.1 UI組件-mi-loading

相信大家在小程序的體驗(yàn)中有看到Loading的動(dòng)畫(huà)，這邊引入了一個(gè)Loading的組件，mi-loading

• 通過(guò)上方鏈接下載Zip包文件，下載源碼解壓，復(fù)制項(xiàng)目根目錄的 /mi-loading 文件夾到你的項(xiàng)目 components目錄 中即可
• 打開(kāi) mi-loading.vue 這個(gè)文件，里面的loading動(dòng)畫(huà)是可以自行使用Gif圖配置，大家可以查看該源碼的第四行，img配置的的圖片地址就是自定義的Loding

# 使用方法
this.$refs.Loading.show() // 打開(kāi)
this.$refs.Loading.hide() // 關(guān)閉

3.2.2 UI組件-ColorUI

本項(xiàng)目引入了插件市場(chǎng)的ColorUI-UniApp組件庫(kù)，引入方法如下：

• 通過(guò)上方鏈接下載Zip包文件，下載源碼解壓，復(fù)制項(xiàng)目根目錄的 /colorui 文件夾到你的項(xiàng)目根目錄

• App.vue 文件引入關(guān)鍵Css main.css 、 icon.css ，讓改UI組件成為每個(gè)頁(yè)面公共css

<style>
    @import "colorui/main.css";
    @import "colorui/icon.css";
    ....
</style>

我們可以使用該UI庫(kù)中封裝好的導(dǎo)航欄，測(cè)試效果。

1. 在 App.vue文件 中加入如下配置，用于獲得系統(tǒng)信息

// onLaunch: 當(dāng)小程序加載完畢后就執(zhí)行的方法
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
  }
})}

2. pages.json文件 配置取消系統(tǒng)導(dǎo)航欄

# 復(fù)制下面命令需要把注釋刪除，否則會(huì)報(bào)錯(cuò)
{
 "globalStyle": {
  "navigationStyle": "custom", // custom為自定義模式
  "navigationBarTextStyle": "white", // 標(biāo)題文字設(shè)為白色
  "navigationBarTitleText": "uni-app", // 標(biāo)題名稱(chēng)
  "navigationBarBackgroundColor": "#007AFF", // 更改導(dǎo)航背景色
  "backgroundColor": "#FFFFFF" // 全局背景色
 }
}

運(yùn)行成功后如下圖所示：

好的，這樣我們已經(jīng)成功的引入了該UI庫(kù)，此時(shí)可以在微信開(kāi)發(fā)者工具中看到效果，無(wú)需手動(dòng)刷新，當(dāng)我們?cè)贖BuilderX中添加代碼保存，代碼會(huì)自動(dòng)編譯，微信開(kāi)發(fā)者工具會(huì)自動(dòng)刷新；

總結(jié)

以上就是我們這款小程序的開(kāi)發(fā)準(zhǔn)備工作，下篇文章我們將會(huì)走入進(jìn)行實(shí)際項(xiàng)目的從零開(kāi)發(fā)，從新建一個(gè)項(xiàng)目到小程序代碼的審核上傳。

我曾踏足山巔，也曾跌入低谷，這兩者都讓我受益良多。

文章轉(zhuǎn)載自：博客園，作者： 醉花春