使用uni-app開發微信小程式

  • 2019 年 11 月 7 日
  • 筆記

uni-app 開發微信小程式

詳見個人部落格：https://shengchangwei.github.io/js-uni-app/ (github.io首次載入較慢)

前言

9月份，開始開發微信小程式，也曾調研過wepy/mpvue，考慮到後期跨端的需求，最終選擇使用了uni-app，本文主要介紹如何使用uni-app搭建小程式項目，以及自己對框架的補充，包括封裝request介面，引用color-ui,動態設置底部tab頁等，詳情見下文

uni-app 介紹（官網）

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

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

好處如圖：

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

  • uni-app框架使用的開發工具 HBuilderX，HBuilderX 內置相關環境，開箱即用，無需配置nodejs， 需要什麼插件可直接下載，測試、打包、發布特別方便。
  • uni-app採用Vue.js語法，基本支援vue大部分語法（vue的動態組件component不支援）。
  • PC端使用vue封裝的一些js方法，以及建構思想，可直接移植到uni-app中，比如：本人pc項目中api介面js文件，可直接複製到小程式框架api文件夾中（PS：api文件夾維護後端請求路徑）
  • uni-app 周邊生態豐富，插件市場可用的組件特別多，也可使用vue語法自己封裝一些組件。

開發工具（HBuilderX）

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

項目結構

首先我們通過HBuilderx > 文件 > 項目，選擇uni-app項目，模板我選擇的是默認模板，當然你也可選擇其他模板，接著確認創建，如果你選擇的是默認模板，此時你的文件夾應該如下圖：

接著我根據自己的項目需求，以及為了與vue的pc項目結構保持一下，分別添加如下文件夾

具體程式碼可參考GitHub:weixin-start

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

主要文件介紹：

  • api 文件夾中存放的是各個頁面的請求路徑，引入request.service.js暴露出來的api，
  • colorui 使用了color-ui樣式，個人認為樣式非常好看，非常感謝，詳情：color-ui
  • common 存放全局通用的js方法
  • components 存放全局組件，包括uni-ui以及自己封裝的組件
  • pages 主要頁面， 其中pages文件夾中 index文件中可布局底部的tab頁面，通過v-if判斷顯示不同的tab頁
  • services 通用的服務文件（我不知道這種描述是否準確，原來用的Angular4，Angular中服務概念對我有一定的影響）
    • 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方法
  • static 靜態文件，我主要用來放圖片
  • unpackage (在小程式模擬器運行的文件)
  • App 應用配置，用來配置App全局樣式以及監聽

如何自定義底部tab導航欄

本人項目中需要根據不同的角色顯示不同的底圖tab頁，那麼原來在pages.json設置的tab頁，不夠靈活，也不好擴展，因此自定義tab頁，具體如下

  • 在pages文件夾中，新建一個index文件夾並創建一個index.vue頁面，在這個頁面可布局底部tab, 根據點擊不同的tab顯示對應的tab頁， 如圖：

注意：

  • 如果每個tab點擊是切換不同的view，這個就相當於單頁應用了，當頁面比較複雜時，切換過程可能存在卡。所以使用自定義組件的tabbar就盡量避免太多複雜頁面。
  • 當然原生tabbar雖然體驗好，但自定義性不足。這個需要開發者根據自己的需求來平衡選擇。

如何使用colorui

引入

ColorUI是一個css庫！！！在你引入樣式後可以根據class來調用組件

  • 下載源碼解壓獲得/Colorui-UniApp文件夾，複製目錄下的 /colorui 文件夾到你的項目根目錄
  • 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

Tags:

VirMach 便宜 VPS