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