前言

9月份，開始開發(fā)微信小程序，也曾調(diào)研過wepy/mpvue，考慮到后期跨端的需求，最終選擇使用了uni-app，本文主要介紹如何使用uni-app搭建小程序項(xiàng)目，以及自己對框架的補(bǔ)充，包括封裝request接口，引用color-ui,動態(tài)設(shè)置底部tab頁等，詳情見下文

uni-app 介紹（官網(wǎng)）

uni-app是一個(gè)使用Vue.js 開發(fā)所有前端應(yīng)用的框架，開發(fā)者編寫一套代碼，可發(fā)布到iOS、Android、H5、以及各種小程序（微信/支付寶/百度/頭條/QQ/釘釘）等多個(gè)平臺。

即使不跨端，uni-app同時(shí)也是更好的小程序開發(fā)框架。詳見評測

好處如圖：

我使用uni-app框架主要用來開發(fā)微信小程序，我使用過程中感覺的好處是：

• uni-app框架使用的開發(fā)工具 HBuilderX，HBuilderX 內(nèi)置相關(guān)環(huán)境，開箱即用，無需配置nodejs， 需要什么插件可直接下載，測試、打包、發(fā)布特別方便。
• uni-app采用Vue.js語法，基本支持vue大部分語法（vue的動態(tài)組件component不支持）。
• PC端使用vue封裝的一些js方法，以及建構(gòu)思想，可直接移植到uni-app中，比如：本人pc項(xiàng)目中api接口js文件，可直接復(fù)制到小程序框架api文件夾中（PS：api文件夾維護(hù)后端請求路徑）
• uni-app 周邊生態(tài)豐富，插件市場可用的組件特別多，也可使用vue語法自己封裝一些組件。


開發(fā)工具（HBuilderX）

• HBuilderX: 官網(wǎng)IDE下載地址;
• HBuilderX是通用的前端開發(fā)工具，但為uni-app做了特別強(qiáng)化。
• HBuilderX提供了一些插件，可直接下載安裝，具體如下圖： 工具 > 插件安裝

項(xiàng)目結(jié)構(gòu)

首先我們通過HBuilderx > 文件 > 項(xiàng)目，選擇uni-app項(xiàng)目，模板我選擇的是默認(rèn)模板，當(dāng)然你也可選擇其他模板，接著確認(rèn)創(chuàng)建，如果你選擇的是默認(rèn)模板，此時(shí)你的文件夾應(yīng)該如下圖：

接著我根據(jù)自己的項(xiàng)目需求，以及為了與vue的pc項(xiàng)目結(jié)構(gòu)保持一下，分別添加如下文件夾

具體代碼可參考GitHub:weixin-start

+-- api -- (頁面接口路徑)
|  +-- login.js
|  +-- tools.js
+-- colorui -- (color-ui 樣式)
+-- common -- (通用的js方法)
+-- components -- (通用的組件)
+-- pages -- (主要頁面)
+-- services -- (通用的服務(wù))
|  +-- auth.service.js -- (主要封裝了一些保存用戶的token方法)
|  +-- config.service.js -- (存放全局通用的變量)
|  +-- request.service.js -- (封裝了uni.request的方法)
+-- static -- (靜態(tài)文件)
+-- unpackage -- (在小程序模擬器運(yùn)行的文件)
+-- App.vue -- (應(yīng)用配置，用來配置App全局樣式以及監(jiān)聽 )
+-- main.js -- ( Vue初始化入口文件)
+-- manifest.json -- (配置應(yīng)用名稱、appid、logo、版本等打包信息)
+-- pages.json -- (配置頁面路由、導(dǎo)航條、選項(xiàng)卡等頁面類信息)
+-- uni.scss -- (這里是uni-app內(nèi)置的常用樣式變量)

主要文件介紹：

• api 文件夾中存放的是各個(gè)頁面的請求路徑，引入request.service.js暴露出來的api，
• colorui 使用了color-ui樣式，個(gè)人認(rèn)為樣式非常好看，非常感謝，詳情：color-ui
• common 存放全局通用的js方法
• components 存放全局組件，包括uni-ui以及自己封裝的組件
• pages 主要頁面， 其中pages文件夾中 index文件中可布局底部的tab頁面，通過v-if判斷顯示不同的tab頁
• services 通用的服務(wù)文件（我不知道這種描述是否準(zhǔn)確，原來用的Angular4，Angular中服務(wù)概念對我有一定的影響）
  • auth.service.js 通過使用uni.setStorageSync簡單封裝了一些保存用戶的token方法
  • config.service.js 保存全局的變量 例如：apiUrl請求接口的IP, storage_key 是token 的鍵值，全局引用的變量都可定義在這個(gè)文件內(nèi)，后期如果需要改動，只需要修改這個(gè)文件中對用的值
  • request.service.js 使用Promise對uni.request進(jìn)行封裝，將get、post、delete請求方式暴露出來，在api文件夾中引用這個(gè)文件即可使用get、post、delete方法
• static 靜態(tài)文件，我主要用來放圖片
• unpackage (在小程序模擬器運(yùn)行的文件)
• App 應(yīng)用配置，用來配置App全局樣式以及監(jiān)聽
  

如何自定義底部tab導(dǎo)航欄

本人項(xiàng)目中需要根據(jù)不同的角色顯示不同的底圖tab頁，那么原來在pages.json設(shè)置的tab頁，不夠靈活，也不好擴(kuò)展，因此自定義tab頁，具體如下

在pages文件夾中，新建一個(gè)index文件夾并創(chuàng)建一個(gè)index.vue頁面，在這個(gè)頁面可布局底部tab, 根據(jù)點(diǎn)擊不同的tab顯示對應(yīng)的tab頁， 如圖：

注意：

如果每個(gè)tab點(diǎn)擊是切換不同的view，這個(gè)就相當(dāng)于單頁應(yīng)用了，當(dāng)頁面比較復(fù)雜時(shí)，切換過程可能存在卡。所以使用自定義組件的tabbar就盡量避免太多復(fù)雜頁面。

當(dāng)然原生tabbar雖然體驗(yàn)好，但自定義性不足。這個(gè)需要開發(fā)者根據(jù)自己的需求來平衡選擇。

如何使用colorui

引入

ColorUI是一個(gè)css庫?。?！在你引入樣式后可以根據(jù)class來調(diào)用組件

下載源碼解壓獲得/Colorui-UniApp文件夾，復(fù)制目錄下的 /colorui 文件夾到你的項(xiàng)目根目錄

App.vue引入關(guān)鍵Css main.css icon.css

<style>
@import "colorui/main.css";
@import "colorui/icon.css";
@import "app.css"; /* 你的項(xiàng)目css */
....
</style>

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

因?yàn)閏olorUI的文檔說明正在完善中，具體樣式對應(yīng)的類名可能不清楚，那么你可將color-ui下載下來，使用HBuilderX運(yùn)行在瀏覽器中，打開調(diào)試工具，找到對應(yīng)的節(jié)點(diǎn)即可獲取對應(yīng)的類名，（當(dāng)然你也可能會有其他好的方法）。

使用colorui自定義導(dǎo)航欄

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

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

App.vue 獲得系統(tǒng)信息

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

在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">導(dǎo)航欄</block>
</cu-custom>

跨端兼容（如何你只是開發(fā)小程序，就不需要考慮）

根據(jù)平臺特性，uni-app 提供了條件編譯手段，在一個(gè)工程里優(yōu)雅的完成了平臺個(gè)性化實(shí)現(xiàn)。

<view class="content">
 <! -- #ifdef APP-PLUS -->
 <view>僅出現(xiàn)在 5+App 平臺下的代碼</view>
 <! -- #endif -->

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

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

發(fā)布微信小程序

服務(wù)器域名必須是https合法域名

進(jìn)入開發(fā)頁面 開發(fā) > 開發(fā)設(shè)置，設(shè)置服務(wù)器域名, 如圖

發(fā)布小程序之前需要配置appid,應(yīng)用名稱、logo,可登錄微信公眾平臺進(jìn)入設(shè)置頁，設(shè)置小程序的基本信息

使用HBuilderx找到發(fā)行 > 小程序-微信，點(diǎn)擊后稍等片刻會啟動微信開發(fā)工具，點(diǎn)擊微信開發(fā)工具上傳，填寫上傳信息即可，此時(shí)上傳到微信公共平臺是體驗(yàn)版，需要在版本管理>提交審核，等待后臺審核，審核完成后，小程序也就上線成功了,如圖：

總結(jié)

本文主要介紹了使用uni-app框架開發(fā)微信小程序，自己對默認(rèn)模板的補(bǔ)充，包括封裝request接口，引用color-ui,動態(tài)設(shè)置底部tab頁，還有通過color-ui提供的導(dǎo)航欄組件，自定義導(dǎo)航欄。本人才疏學(xué)淺，表達(dá)能力有限，書寫過程如有錯(cuò)誤歡迎指正，也請點(diǎn)贊評論鼓勵(lì)（ps: 內(nèi)心怕怕的）

關(guān)于uni-app更多信息可參考官方文檔 https://uniapp.dcloud.io

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評論