- uniapp-scaffold 是一款基于 Vue 扩展的跨平台小程序脚手架,提供超过 20+个(基于微信视觉规范)基础和业务组件,包含自定义 Request 请求库、Utils、Theme 主题、Store 数据管理等于一体的插拔式应用框架,可快速落地业务。
- 全: 一套 code,实时打包输出各端小程序 + h5 + app
- 简: Vue 写法,上手成本低,可快速撸业务页面
- Keep 运动助手
仓库 | 百度版 | 头条版 | 微信版 |
---|---|---|---|
内网 |
- Asako Studio:浅子文化工作室,一个致力于视觉影像与工程研究的实验室、工作室(以下微信扫码或搜一搜)
Miniprogram | Home | Creative | Works | About |
---|---|---|---|---|
- 浅子影报:一页日历,伴你每天好心情 🌞
Miniprogram | Home | About | Wallpaper Detail | AI 日报 |
---|---|---|---|---|
-
浅子居家:智能生活,从家开始 🏡
-
更多补充中
- uni-app 文档
- 微信小程序文档
- 头条小程序文档
- 百度小程序文档
- 支付宝小程序文档
- airbnb javascript standard
- Ant Design introduce
- JD Front-End Coding Guidelines
- Taro · React 系小程序及多端统一开发解决方案
-
cd projectName => git clone 此项目 => 基于此项目开发;
-
工具,先下载各平台开发工具(IDE)https://uniapp.dcloud.io/quickstart
-
在 Hbuilder 中导入当前项目(uni-app 类型),修改或更新当前配置,manifest.json 和 pages.json(尤其注意要添加对应平台的 appid);
-
配置插件,菜单栏点击插件管理可以安装当前项目所需要的插件和 loader,(less、babel、es6 等),npm insatll (步骤 3 不分先后);
-
菜单栏点击运行到要开发的小程序平台,不习惯当前 IDE 的可以切换到 VS Code,同步开发,实时编译;
-
进入各家开发者后台,提审,发布(也可以基于 miniprogram-cli 对接各家小程序平台实现自动构建上传)
-
更多补充中
- 使用 Vue.js 注意事项 https://uniapp.dcloud.io/use
- 根据不同平台小程序做条件编译(非常重要)https://uniapp.dcloud.io/platform
- 高级开发技巧 https://uniapp.dcloud.io/snippet
- 性能优化建议 https://uniapp.dcloud.io/performance
- 视频 video 相关
- video 组件必须有高 height,不能是 min-height,否则 iOS 下播放有声音没视频
- 样式相关
- iconfont 在字节跳动小程序组件内引入字体会失效,解决方式:在 App.vue 内的 style 节点引入
- 自定义组件
- props 不能传引用,只能传值。子组件里修改了 props 对象里的属性,不会同步父组件
- 网络相关
- JSON 返回中会遇到换行符导致解析失败,需要在 request 阶段过滤这几种换行符
- 已接入 Eslint 等基础插件,组件测试、单元测试等看收益再接入
- 暂时没有集成自动化构建和代码上传工具,只是对应编译并上传到各自的开发者后台,后期有时间可以计划找 API 集成一下
- 更多补充中
├── 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
// 组件列表(基于微信视觉规范进一步封装的组件)
- 基础组件
- 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层(新建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 等基础配置样式组成,支持业务方自定义自己的主题库;