uni-app介紹（官網）

uni-app是一個使用Vue.js開發所有前端應用的框架，開發者編寫一套程式碼，可釋出到iOS、Android、H5、以及各種小程式（微信/支付寶/百度/頭條/QQ/釘釘）等多個平臺。

即使不跨端，uni-app同時也是更好的小程式開發框架。

開發工具（HBuilderX）

HBuilderX官方下載網址：https://www.dcloud.io/hbuilderx.html

HBuilderX 提供了一些外掛，可直接下載安裝，具體如下圖： 工具 > 外掛安裝

專案結構

首先我們通過HBuilderx > 檔案 > 專案，選擇 uni-app專案，模板我選擇的是預設模板，當然你也可以選擇其他模板，接著確認建立，如果你選擇的是預設模板，此時你的資料夾應該如下圖：

接著我根據自己的專案需求，以及為了與vue的pc專案結構保持一下，分別新增如下資料夾：

主要檔案介紹：

• api資料夾中存放的是各個頁面的請求路徑，引入request.service.js暴露出來的api，
• colorui使用了color-ui樣式，個人認為樣式非常好看，非常感謝！
• common存放全域性通用的js方法
• components存放全域性元件，包括uni-ui以及自己封裝的元件
• pages主要頁面， 其中pages資料夾中index檔案中可佈局底部的tab頁面，通過v-if判斷顯示不同的tab頁
• services通用的服務檔案（我不知道這種描述是否準確，原來用的Angular4
  ，Angular中服務概念對我有一定的影響）static靜態檔案，我主要用來放圖片
  • auth.service.js通過使用uni.setStorageSync簡單封裝了一些儲存使用者的token方法
  • config.service.js儲存全域性的變數 例如：apiUrl請求介面的IP,storage_key是token的鍵值，全域性引用的變數都可定義在這個檔案內，後期如果需要改動，只需要修改這個檔案中對用的值
  • request.service.js使用Promise對uni.request進行封裝，將get、post、delete請求方式暴露出來，在api資料夾中引用這個檔案即可使用get、post
    、delete方法
• unpackage(在小程式模擬器執行的檔案)
• App應用配置，用來配置App全域性樣式以及監聽

如何自定義底部tab導航欄

本人專案中需要根據不同的角色顯示不同的地圖tab頁，那麼原來在pages.json設定的tab頁，不夠靈活，也不好擴充套件，因此自定義tab頁，具體如下：

1）在pages資料夾中，新建一個index資料夾並建立一個index.vue頁面，在這個頁面可佈局底部tab，根據點選不同的tab顯示對應的tab頁，如圖：

注意：

2）如果每個tab點選是切換不同的view，這個就相當於首頁應用了，當頁面比較複雜時，切換過程存在卡頓。所以使用自定義的tabbar就儘量避免太多複雜的頁面。

3）當然原生tabbar雖然體驗好，但自定義性不足，這個需要開發者根據位元組的需求來平衡選擇。

如何使用colorui

ColorUI是一個css庫！在你引入樣式後根據class來呼叫元件

1）下載原始碼解壓獲得/Colorui-UniApp資料夾，複製目錄下的/colorui資料夾到你的專案根目錄

2）App.vue引入關鍵css、main.css、icon.css

<style>

　　@import "colorui/main.css";

　　@import "colorui/icon.css";

　　@import "app.css"; /* 你的專案css */

　　....

</style>

此時你可以使用colorUI提供的css樣式了，

因為colorUI的文件說明正在完善中，具體樣式對應的類名可能不清楚，那麼你可將color-ui下載下來，使用HBuilderX執行在瀏覽器中，開啟除錯工具，找到對應的節點即可獲取對應的類名，（當然你也可能會有其他好的方法）。

使用colorui自定義導航欄

• pages.json配置取消系統導航欄

"globalStyle": {
    "navigationStyle": "custom"
},

• App.vue獲得系統資訊

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
        }
    })
},

• 在main.js引入cu-custom元件

import cuCustom from './colorui/components/cu-custom.vue'
Vue.component('cu-custom',cuCustom)

• 在需要的頁面可以直接使用了，如下：

<cu-custom bgColor="bg-gradual-blue" :isBack="true">
    <block slot="backText">返回</block>
    <block slot="content">導航欄</block>
</cu-custom>

跨端相容（如何你只是開發小程式，就不需要考慮）

根據平臺特性，uni-app提供了條件編譯手段，在一個工程裡優雅的完成了平臺個性化實現。

<view class="content">
  <! -- #ifdef APP-PLUS -->
  <view>僅出現在 5+App 平臺下的程式碼</view>
  <! -- #endif -->

  <! -- #ifndef H5 -->
  <view>除了 H5 平臺，其它平臺均存在的程式碼</view>
  <! -- #endif -->

   <! -- #ifdef H5 || MP-WEIXIN -->
  <view>僅在 H5 平臺或微信小程式平臺存在的程式碼</view>
  <! -- #endif -->
</view>

釋出微信小程式

• 伺服器域名必須是https合法域名

• 進入開發頁面開發>開發設定，設定伺服器域名, 如圖

伺服器域名

• 釋出小程式之前需要配置appid,應用名稱、logo,可登入微信公眾平臺進入設定頁，設定小程式的基本資訊

• 使用HBuilderx找到發行>小程式-微信，點選後稍等片刻會啟動微信開發工具，點選微信開發工具上傳，填寫上傳資訊即可，此時上傳到微信公共平臺是體驗版，需要在版本管理>提交稽核，等待後臺稽核，稽核完成後，小程式也就上線成功了,如圖：

總結

本文主要介紹了使用uni-app框架開發微信小程式，自己對預設模板的補充，包括封裝request介面，引用color-ui,動態設定底部tab頁，還有通過color-ui提供的導航欄元件，自定義導航欄。本人才疏學淺，表達能力有限，書寫過程如有錯誤歡迎指正，也請點贊評論鼓勵（ps: 內心怕怕的）

關於uni-app更多資訊可參考官方文件https://uniapp.dcloud.io