手牽手，使用uni-app從零開發一款視訊小程式 (系列上 準備工作篇)

Tz一號發表於2020-08-18
APP

系列文章

手牽手，使用uni-app從零開發一款視訊小程式 (系列上 準備工作篇)

手牽手，使用uni-app從零開發一款視訊小程式 (系列下 開發實戰篇)

前言

好久不見，很久沒更新部落格了，前段時間在深圳出差，胡吃海喝頹廢了很久，不想每天下班刷抖音、打遊戲虛度光陰，準備把之前做的一個小程式案例詳細的介紹一下，從安裝編譯器開始重新開發覆盤一遍，希望對初入小程式的你有所幫助。

掃碼體驗，先睹為快

可以掃描下微信小程式的二維碼，體驗一下開發完畢的效果：

原始碼地址:

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等，詳細優劣對比可以參考「京東凹凸實驗室」的這篇文章：小程式多端框架的全面測評；

「其實上面的方案開發小程式大同小異，可以根據喜好選擇，下文所使用的方案為uni-app」

好的話不多少，進入正題，這裡整理一個簡單的Xmind總結了一些，其實小程式的開發並沒有想象中的那麼複雜，接下來我將慢慢的從零開始解讀這個一個小程式專案，帶大家走入正題：

接下來的內容我假設你已瞭解關於HTML、CSS和JavaScript 的初中級知識。並且有一定的Vue基礎，如果你剛開始學習前端開發，將本文作為你的第一步可能不是最好的主意！

1 微信小程式賬號方面

1.1 註冊微信小程式賬號

如果已註冊小程式賬號，可以略過此步~

假設沒有小程式賬號：

  1. 我們可以通過微信公眾號平臺右上角 → 立即註冊 → 註冊的帳號型別 → 選擇小程式型別註冊
  2. 進入註冊頁面 → 輸入郵箱 → 密碼 → 驗證碼 → 啟用郵箱 → 填寫主體資訊（根據自身選擇型別：個人、企業、政府、媒體等） → 登記相關資訊即可註冊；

「註冊注意事項：」:郵箱作為登入帳號，需要填寫未在微信公眾平臺註冊，並且沒有被個人微訊號繫結的郵箱，每個郵箱只能申請一個小程式;

1.2 登入微信小程式後臺

1.「完善相關資訊」補充小程式名稱資訊，上傳小程式頭像，填寫小程式介紹並根據後續開發的內容選擇服務範圍；

2.「繫結開發者」登入微信公眾平臺小程式，進入使用者身份-開發者，新增繫結開發者、體驗者。（體驗者的含義是在小程式沒有通過稽核正式釋出之前，體驗者可以使用該小程式）；

3.「獲取AppID」登入微信公眾平臺小程式，進入“設定-賬號資訊（設定的最下面）”，獲取AppID資訊。（微信AppID是後面開發小程式必須使用的，在開發小程式之前需要填寫開發者的AppID）。

1.3 下載微信開發者工具

  1. 前往開發者工具下載頁面，根據自己的作業系統下載對應的安裝包進行安裝,建議現在穩定版本的安裝包，其實微信開發者工具不止可以開發小程式，也可以用來製作微信小遊戲，有興趣的朋友可以找找相關資料，開發一款屬於自己的小遊戲~

  2. 微信開發者工具安裝完畢後，雙擊開啟軟體，進行登入即可，由於我們是使用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軟體

  1. 接下來讓我們建立一個uni-app專案，點選工具欄裡的檔案 -> 新建 -> 專案：

  2. 選擇uni-app型別，輸入工程名，選擇模板，點選建立，即可成功建立。 uni-app自帶的模板有 Hello uni-app ，是官方的元件和API示例。還有一個重要模板是 uni-ui專案模板，日常開發推薦使用該模板，已內建一些官方的常用元件。

  3. 建立成功後，我們就可以在微信開發工具中執行啦。進入我們剛才建立的專案，點選工具欄的執行 -> 執行到小程式模擬器 -> 微信開發者工具，即可在微信開發者工具裡面體驗uni-app。

  4. 接下來會開始編譯，並開啟微信開發者工具，當你看到以下頁面時，說明你新建專案這一步驟就已經完成啦！

  5. 在建立的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庫中封裝好的導航欄，測試效果。

  1. 在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
  }
})}
  1. pages.json檔案 配置取消系統導航欄,該檔案原始碼地址：pages.json
# 複製下面命令需要把註釋刪除，否則會報錯
{
 "globalStyle": {
  "navigationStyle": "custom", // custom為自定義模式
  "navigationBarTextStyle": "white", // 標題文字設為白色
  "navigationBarTitleText": "uni-app", // 標題名稱
  "navigationBarBackgroundColor": "#007AFF", // 更改導航背景色
  "backgroundColor": "#FFFFFF" // 全域性背景色
 }
}

執行成功後如下圖所示：

好的，這樣我們已經成功的引入了該UI庫，此時可以在微信開發者工具中看到效果，無需手動重新整理，當我們在HBuilderX中新增程式碼儲存，程式碼會自動編譯，微信開發者工具會自動重新整理；

總結

以上就是我們這款小程式的開發準備工作，下篇文章我們將會走入進行實際專案的從零開發，從新建一個專案到小程式程式碼的稽核上傳。

我曾踏足山巔，也曾跌入低谷，這兩者都讓我受益良多。個人網站：https://zhaohongcheng.com

相關文章