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

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 160,108评论 4 364
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,699评论 1 296
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 109,812评论 0 244
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,236评论 0 213
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,583评论 3 288
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,739评论 1 222
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,957评论 2 315
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,704评论 0 204
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,447评论 1 246
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,643评论 2 249
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,133评论 1 261
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,486评论 3 256
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,151评论 3 238
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,108评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,889评论 0 197
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,782评论 2 277
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,681评论 2 272

推荐阅读更多精彩内容

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