更新记录

1.0.3(2020-07-02)

针对H5不支持uni.createIntersectionObserver做兼容更强图片懒加载支持图片销毁

1.0.2(2020-07-02)

增加H5预览地址 https://static-2ca95cc0-7782-43d9-8895-02ec45e6ebb6.bspapp.com/#/

查看更多

云函数类插件通用教程

  1. 使用云函数类插件的前提是:使用HBuilderX 2.7+;已通过实名认证并开通了uniCloud。
  2. 如果下载的是完整项目,则需要在manifest.json的可视化界面获取appid。
  3. 需要对cloudfunctions目录点右键,绑定服务空间。如无服务空间,需先创建。建议在测试服务空间体验插件,避免对现网项目产生影响。
  4. 对cloudfunctions目录点右键上传所有云函数。在HBuilderX 2.7.8以前,如有common目录,还需单独对每个common目录下的公共模块上传。
  5. 如果cloudfunctions目录下有db_init.json,请点击右键,初始化云数据库。
  6. 通过以上步骤,完成uniCloud服务空间的初始化和云函数部署。然后就可以在HBuilderX的运行菜单里运行该项目,体验云端一体完整流程。

介绍

这不是一个面向于淘客的APP,只是基于淘客数据,真实的数据更加切合项目实战!

一个基础性商城,promise封装请求,mockServer本地,VueX模块管理数据,BUS传值,mixin混入,各种实用组件,图片懒加载,mixin混入列表加载分页,滑动scroll-tabs,左右联动分类数据接入

整体使用uniCloud来完成,后续拓展后台用户管理,购物车云端数据存储,持续更新中....

bus 传值

  //使用方式
  Vue.use(Bus)
  this.$bus('eventName', id);

  bus: {
   eventName(id) {
     console.log(id);
   }
  }

状态管理


 this.$store.dispatch("auth/login"); //调用vueX登陆

项目目录

.
├── App.Vue                         # 主应用组件
├── pages.json                      # 页面路由配置
├── manifest.json                   # uni配置页
├── main.js                         # 入口文件
├── package.json                    # 引入第三方npm包
├── common                          # 公共 方法 工具等
│   └── utils                       # 公共 工具
│   └── http-client                 # 公共 请求方法
│   └── ...
├── components                      # 公共 UI 组件
│   └── ...
├── config                          # 公共 设置
│   └── api.config                  # 公共 接口设置
│   └── app.config                  # 公共 url 平台 等设置
│   └── ...
├── pages                           # 页面
│   ├── index                        # 首页示例模板
│   ├── mine                        # 我的示例模板
│   └── ...
├── plugins                         # 第三方工具
│   └── ...
├── services                        # 服务端
│   └── api-clinet                  # 接口请求拦截
│   └── api.service                 # 接口封装
│   └── auth.service                # 登陆本地缓存操作
│   └── ...
├── static                          # 静态资源
│   └── tab                         # tab栏图片
│   └── ...
├── store                           # 状态管理
│   └── modules
│       └── app                     # 应用级别状态
│       └── auth                    # 登陆级别状态
│   └── ...
├── styles                          # 样式管理
│   └── aliicon                     # 字体icon
│   └── animation                   # 动画样式
│   └── base                        # 基础公共样式
│   └── border                      # 1px边框
│   └── ...
├── cloudfunctions-aliyun           # 云服务模块
├── mock-server                     # 模拟数据接口
└── yarn.lock

规范

组件

所有组件放置 components 文件夹下且采用“ - ”连接

页面

所有页面放置 pages 文件夹下分包除外且采用“ _ ”连接

素材

所有纯色图标采用阿里 icon

切片

文件应该遵循的命名规则: 全部小写字母 单词之间使用下划线(_)连接 不使用缩写作为名称

名称 前缀 Icon ic MenuIcon ic_menu TabBarIcon ictab Button btn RadioButton btn_radio CheckBox btncheck Switch btnswitch Toggle btntoggle

例如 ic_launcher.png ic_menu_share.png ic_menu_back.png ic_menu_settings.png ic_tab_home.png ic_tab_mine.png

效果预览

H5预览 Image text

页面预览

页面 图片 页面 图片
首页 首页 搜索 搜索
9 块 9 9块9 超级分类 超级分类

使用教程

1.使用 HBuilderX 倒入事例项目 2.上传 cloudfunctions-aliyun 下 common 下的公共模块,再选择上传所有云函数 3.manifest 点击获取应用标识。运行到微信小程序,商品详情页调用淘宝接口 H5 存在被禁用问题

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

第三方 大淘客

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问