介紹 3.0
項目重寫了~~基于uni-app锻狗,colorUI满力,封裝了《自定義TabBar》《上傳圖片》《全局自定義loading》等功能 主要適配 微信小程序、APP轻纪、H5油额。
新版特點(diǎn)
- 加入了 colorUI 開發(fā)起來更順手更快。
- 融合了七牛云存儲+阿里OSS存儲
- 優(yōu)化了TabBar
GitHub地址:https://github.com/gek6/fr-uni-app 有用的話給個start啊
H5在線示例 H5在線示例
image
第一步當(dāng)然是 npm install 安裝下依賴了刻帚。
全局自定義loading
// 已在 main.js 注冊全局組件潦嘶,在每個頁面中 添加<cu-loading>即可 頁面中添加即可,其他組件無需添加崇众。(頁面就是在pages.json 中注冊了的)
<cu-loading></cu-loading>
// 具體
// 是否顯示 半透明背景
// 是否點(diǎn)擊 半透明背景 關(guān)閉loading
// 在 /components/loading/loading.vue 中自行修改
自定義TabBar
- 這次做成了引入外部配置文件 uni-setting.json 請求在 App.vue 中的 onLaunch 里 H5注意需要服務(wù)端允許跨域
- 幾乎所有配置及數(shù)據(jù) 也在 vuex中統(tǒng)一管理 /store/index.js
- 注意:tabbar 所能切換的頁面 必須以組件的形式 已經(jīng)加載進(jìn) home.vue(根頁面)掂僵。
- 詳見 示例代碼
上傳圖片
- 普通上傳文件直接通過 官方的API 上傳到業(yè)務(wù)服務(wù)器 ,我就沒寫顷歌。
- 上傳至七牛云存儲 (支持 微信小程序 APP H5 其他未測锰蓬,未兼容 ),上傳至七牛云均采用base64上傳眯漩。
- 上傳至阿里OSS (阿里OSS不支持直接上傳base64)
- H5上傳 是通過服務(wù)端 STS簽名 然后客戶端使用 ali-oss庫 進(jìn)行上傳芹扭。
- 其他端 為 客戶端直接自己簽名,通過uni.uploadFile(OBJECT)直接上傳赦抖,因為H5 客戶端代碼會直接暴露舱卡,所以H5采用服務(wù)端簽名。
主題色
- 項目用到顏色的地方全部使用 vuex 中的 配置數(shù)據(jù)摹芙。
- 開發(fā)時候就得注意寫法 麻煩是麻煩了一些 不過如果有一鍵切換主題色的需求可以試試