更新记录

0.0.6(2020-04-19)

移除globalData,全局数据由Vuex控制;

0.0.5(2020-04-19)

优化切换语言后的页面高度适应;

查看更多

简介

  • uniapp-scaffold(studio-scaffold) 是一款基于Vue的跨平台小程序脚手架及插拔式模板,提供超过 20+个(基于微信视觉规范)基础和业务组件,包含自定义 Request 请求库、Utils、Theme 主题、Vuex全局数据管理等于一体的插拔式应用框架,可快速落地业务。

特点:

  • 全: 组件和工具库齐全,积木式开发并输出各端小程序(主要方向) + h5 + app
  • 简: 一套 code,Vue 2. x 写法,上手成本低,可快速撸业务页面

Who's using it(可在对应 App 内搜索或扫码欣赏)

  • Keep 运动助手
仓库 百度版 头条版 微信版
内网
  • Asako Studio:浅子文化工作室,一个致力于视觉影像与工程研究的实验室、工作室(以下微信扫码或搜一搜)
Miniprogram Home Creative Works About
  • 浅子影报:AI 精选全球视觉与摄影艺术创作,览尽天下英雄,伴你每天好心情 🌞
Miniprogram Home About Wallpaper Detail AI 日报


  • 浅子居家:智能生活,从家开始 🏡

  • 更多补充中

Guides | 参考资料

Dev | 开发姿势(Github 这个版本没有集成公司的 CLI Tpl,开发者可以手动 clone)

  1. cd projectName => git clone 此项目 => 基于此项目开发;

  2. 工具,先下载各平台开发工具(IDE)https://uniapp.dcloud.io/quickstart

  3. 在 Hbuilder 中导入当前项目(uni-app 类型),修改或更新当前配置,manifest.json 和 pages.json(尤其注意要添加对应平台的 appid,在开发者后台配置request、downloadFile域名);

  4. 配置插件,菜单栏点击插件管理可以安装当前项目所需要的插件和 loader,(less、babel、es6 等),npm insatll (步骤 3 不分先后);

  5. 菜单栏点击运行到要开发的小程序平台,不习惯当前 IDE 的可以切换到 VS Code,同步开发,实时编译;

  6. 进入各家开发者后台,提审,发布(也可以基于 miniprogram-cli 对接各家小程序平台实现自动构建上传)

  7. 更多补充中

注意事项/坑

  1. 使用 Vue. js 注意事项 https://uniapp.dcloud.io/use
  2. 根据不同平台小程序做条件编译(非常重要)https://uniapp.dcloud.io/platform
  3. 高级开发技巧 https://uniapp.dcloud.io/snippet
  4. 性能优化建议 https://uniapp.dcloud.io/performance
  5. 如果出现微信开发者工具启动后白屏的问题,检查是否启动多个微信开发者工具,如果是则关闭所有打开的微信开发者工具,然后再重新运行(注意IDE插件和编译Loader要安装,否则可能出现编译白屏的情况)

头条版

  1. 视频 video 相关
  • video 组件必须有高 height,不能是 min-height,否则 iOS 下播放有声音没视频
  1. 样式相关
  1. 自定义组件
  • props 不能传引用,只能传值。子组件里修改了 props 对象里的属性,不会同步父组件
  1. 网络相关
  • JSON 返回中会遇到换行符导致解析失败,需要在 request 阶段过滤这几种换行符

Publish | 测试/工具

  1. 已接入 Eslint 等基础插件,组件测试、单元测试等看收益再接入
  2. 暂时没有集成自动化构建和代码上传工具,只是对应编译并上传到各自的开发者后台,后期有时间可以计划找 API 集成一下
  3. 更多补充中

Structure

├── Project(Core Code)       # project name
│ ├── /config/               # 环境及基础配置
│ ├── /cdn_files/            # 项目图片及静态资源CDN
│ ├── /components/           # 公共组件库: 基础 + 部分业务组件
│ ├── /pages/                # 主要业务页面(index.vue + index.less)
│ ├── /services/             # 服务api,建议按照业务模块拆分
│ ├── /styles/               # 全局样式 => core + mixin + function + theme...
│ ├── /utils/                # 全局工具函数 => request + tool等
│ ├── /store/                # 数据流层
│ ├── /node_modules/         # npm依赖包
│ ├── /unpackage/            # 编译后多个平台的源码(dev开发版、dist生产版)
│ │──page.json               # 全局配置,类似app.json
│ │──manifest.json           # app配置
│ │──main.js                 # 全局入口js index
│ │──App.vue                 # 全局入口vue index

组件 | UI 库

// 组件列表(基于微信视觉规范进一步封装的组件)

* 基础组件
  + kp-button
  + kp-avatar
  + kp-icon
  + kp-badge
  + kp-mask(遮罩,可自定义slot content及position)
  + kp-tag
  + kp-tips
  + kp-actionsheet(浮动面板,支持更强大的配置和淡入淡出动画)
  + kp-card
  + kp-spin(支持svg、img、css loading)

* 业务组件
  + kp-author(一条数据/一个作者的丰富场景,头像、title、描述、额外插槽等)
  + kp-skeleton(骨架屏)
  + kp-status(状态结果页)
  + kp-swiper(3D画廊幻灯片)
  + kp-sticky(滑动固定器)
  + kp-navbar(自定义导航栏)
  + kp-clock(计时器)
  + kp-interact(互动)
  + more...

// 使用方式
import { KpAuthor } from '@/components/kp-author'
export default {
  name: "Demo",
  components: {
    KpAuthor
  },
  data() {
    return {}
  },
  methods() {

  }
}

Services | 数据获取

// 使用方式

* services层(新建yourpage.js)

import config from "@/config";
import http from "@/utils/request";
const { request } = http;
/* request层做了统一api host拼接url,若覆盖只需自定义baseUrl */

// 某推荐列表
export function getAlbumListSvc(query = {}) {
  return request({
    baseUrl: config.yourkey, // 自定义请求host
    url: "/yourpath",
    method: "get",
    data: Object.assign(
      {
        page: 1,
        size: 10
      },
      query
    )
  });
}

* pages业务层

import * as Services from "@/services/home";
export default {
  data() {
    return {
      entry: []
    }
  },
  onLoad(options) {
    // 若需要参数可从options取然后传入query
    this.getAlbumList(query = {})
  },
  methods() {
    async getAlbumList() {
    let res = await Services.getAlbumListSvc();
     this.entry = res.data;
    }
  }
}

一点补充

  • Request. js 库:基于原生 request 和 uni-request 等再封装的一款请求库,支持拦截、异步、捕捉错误等统一处理的能力,如需业务扩展可直接联系脚手架作者;

  • Theme Less 主题库:整个 app 的主题库,由 theme、mixin、reset 等基础配置样式组成,支持业务方自定义自己的主题库;

技术维护

mukuashi@icloud. com

License

MIT

隐私、权限声明

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

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

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

许可协议

MIT协议

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