介紹 3.0
專案重寫了~~基於uni-app,colorUI,封裝了《自定義TabBar》《上傳圖片》《全域性自定義loading》等功能 主要適配 微信小程式、APP、H5。
新版特點
- 加入了 colorUI 開發起來更順手更快。
- 融合了七牛雲端儲存+阿里OSS儲存
- 優化了TabBar uni-app外掛市場:ext.dcloud.net.cn/plugin?id=1… Github 地址:github.com/gek6/fr-uni…
H5線上示例 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 中的 配置資料。
- 開發時候就得注意寫法 麻煩是麻煩了一些 不過如果有一鍵切換主題色的需求可以試試