简介
- 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 | 参考资料
- uni-app 文档
- 微信小程序文档
- 头条小程序文档
- 百度小程序文档
- 支付宝小程序文档
- airbnb javascript standard
- Ant Design introduce
- JD Front-End Coding Guidelines
- Taro · React 系小程序及多端统一开发解决方案
Dev | 开发姿势（Github 这个版本没有集成公司的 CLI Tpl，开发者可以手动 clone）
-
cd projectName => git clone 此项目 => 基于此项目开发;
-
工具，先下载各平台开发工具（IDE）uniapp.dcloud.io/quickstart
-
在 Hbuilder 中导入当前项目（uni-app 类型），修改或更新当前配置，manifest.json 和 pages.json（尤其注意要添加对应平台的 appid，在开发者后台配置request、downloadFile域名）;
-
配置插件，菜单栏点击插件管理可以安装当前项目所需要的插件和 loader，（less、babel、es6 等），npm insatll （步骤 3 不分先后）;
-
菜单栏点击运行到要开发的小程序平台，不习惯当前 IDE 的可以切换到 VS Code，同步开发，实时编译;
-
进入各家开发者后台，提审，发布（也可以基于 miniprogram-cli 对接各家小程序平台实现自动构建上传）
-
更多补充中
注意事项/坑
- 使用 Vue. js 注意事项 uniapp.dcloud.io/use
- 根据不同平台小程序做条件编译（非常重要）uniapp.dcloud.io/platform
- 高级开发技巧 uniapp.dcloud.io/snippet
- 性能优化建议 uniapp.dcloud.io/performance
- 如果出现微信开发者工具启动后白屏的问题，检查是否启动多个微信开发者工具，如果是则关闭所有打开的微信开发者工具，然后再重新运行（注意IDE插件和编译Loader要安装，否则可能出现编译白屏的情况）
头条版
- 视频 video 相关
- video 组件必须有高 height，不能是 min-height，否则 iOS 下播放有声音没视频
- 样式相关
- iconfont 在字节跳动小程序组件内引入字体会失效，解决方式：在 App. vue 内的 style 节点引入
- 自定义组件
- props 不能传引用，只能传值。子组件里修改了 props 对象里的属性，不会同步父组件
- 网络相关
- JSON 返回中会遇到换行符导致解析失败，需要在 request 阶段过滤这几种换行符
Publish | 测试/工具
- 已接入 Eslint 等基础插件，组件测试、单元测试等看收益再接入
- 暂时没有集成自动化构建和代码上传工具，只是对应编译并上传到各自的开发者后台，后期有时间可以计划找 API 集成一下
- 更多补充中
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（互动）
+ Poster（分享海报插件/wxcomponents/wxa-plugin-canvas）
+ 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 等基础配置样式组成，支持业务方自定义自己的主题库；
