UNI-APP项目模板《自定义TabBar》《上传图片》《全局自定义loading》等功能 主要适配 微信小程序、APP、H5。

介绍 3.0

项目重写了~~基于uni-app,colorUI,封装了《自定义TabBar》《上传图片》《全局自定义loading》等功能 主要适配 微信小程序、APP、H5。

新版特点

  • 加入了 colorUI 开发起来更顺手更快。
  • 融合了七牛云存储+阿里OSS存储
  • 优化了TabBar

GitHub地址:https://github.com/gek6/fr-uni-app 有用的话给个start啊

H5在线示例 H5在线示例

image

第一步当然是 npm install 安装下依赖了。

全局自定义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 中的 配置数据。
  • 开发时候就得注意写法 麻烦是麻烦了一些 不过如果有一键切换主题色的需求可以试试

非专业写文档,凑合看。

有疑问联系 QQ 113276952 mail:thamiti@163.com;yb.lane.thamiti@gmail.com

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • uni-app跨平台框架官方教程 链接:https://ke.qq.com/course/343370 一、框架简...
    Neyo_凉阅读 36,342评论 0 43
  • 背景 uni-app发布以来,已经服务了几十万开发者。让我们意外,或者说惊喜的是,有大量开发者用uni-app只编...
    邵张散人阅读 2,236评论 1 2
  • 说明 :uni-app基于Vue 2.0实现,开发者需注意Vue 1.0 -> 2.0 的使用差异,详见从 Vue...
    瑟闻风倾阅读 29,594评论 0 8
  • 公司新产品要求发布到各家小程序,最近研究对比了社区主流的几家小程序开发框架,独坑不如拉人众坑,分享给各位,欢迎和我...
    jianfly阅读 63,675评论 23 97
  • 文/07 一觉通明嫌不够 夜长寒露浸西楼 静望窗外叶纷飞 几声归雁穿雾都 好梦不过秋,懒人倦枕头 几点桂花香,闻似...
    723edf844d12阅读 470评论 4 13