UNI-APP專案模板《自定義TabBar》《上傳圖片》《全域性自定義loading》等功能 主要適配 微信小程式、APP、H5。

極客蝸牛發表於2020-01-10

介紹 3.0

專案重寫了~~基於uni-app,colorUI,封裝了《自定義TabBar》《上傳圖片》《全域性自定義loading》等功能 主要適配 微信小程式、APP、H5。

新版特點

H5線上示例 H5線上示例

UNI-APP專案模板《自定義TabBar》《上傳圖片》《全域性自定義loading》等功能 主要適配 微信小程式、APP、H5。

全域性自定義loading

// 已在 main.js 註冊全域性元件,在每個頁面中 新增<cu-loading>即可 頁面中新增即可,其他元件無需新增。(頁面就是在pages.json 中註冊了的)

<cu-loading></cu-loading>
// 具體
// 是否顯示 半透明背景
// 是否點選 半透明背景 關閉loading
// 在 /components/loading/loading.vue 中自行修改
複製程式碼

自定義TabBar

  • 這次做成了引入外部配置檔案 uni-setting.json 請求在 App.vue 中的 onLaunch 裡 H5注意需要服務端允許跨域
  • 幾乎所有配置及資料 也在 vuex中統一管理 /store/index.js
  • 注意:tabbar 所能切換的頁面 必須以元件的形式 已經載入進 home.vue(根頁面)。
  • 詳見 示例程式碼

上傳圖片

  • 普通上傳檔案直接通過 官方的API 上傳到業務伺服器 ,我就沒寫。
  • 上傳至七牛雲端儲存 (支援 微信小程式 APP H5 其他未測,未相容 ),上傳至七牛雲均採用base64上傳。
  • 上傳至阿里OSS (阿里OSS不支援直接上傳base64)
    • H5上傳 是通過服務端 STS簽名 然後客戶端使用 ali-oss庫 進行上傳。
    • 其他端 為 客戶端直接自己簽名,通過uni.uploadFile(OBJECT)直接上傳,因為H5 客戶端程式碼會直接暴露,所以H5採用服務端簽名。

主題色

  • 專案用到顏色的地方全部使用 vuex 中的 配置資料。
  • 開發時候就得注意寫法 麻煩是麻煩了一些 不過如果有一鍵切換主題色的需求可以試試

非專業寫文件,湊合看。

有幫助的話Github給個star 地址:github.com/gek6/fr-uni…

有疑問聯絡 QQ 113276952 mail:thamiti@163.com;yb.lane.thamiti@gmail.com

相關文章