# 前端开发指南（页面）
# 目录结构
红色框内的均是前端文件
# common（公共文件）
公共文件目录，一般存放公共css，公共js等文件（注意图片不存在这里）
# components（公共组件）
公共组件，符合 xxx/xxx.vue 格式，则组件会自动按需引入（无需在页面手动引入组件）
但会增大小程序主包的体积，故如果组件只在某一个分包内使用，可以不写这里。
# pages（页面）
基本上页面都写在此目录中
# static（静态资源目录）
图片资源，字体资源等静态资源存放目录，注意：由于小程序有包的大小限制（2M）故图片能用远程链接代替的，则用远程链接，如：https://www.xxxx.com/1.png
# store（Vuex目录）
Vuex具体用法 传送门 - Vuex (opens new window)
# uni_modules（uni模块目录）
该目录下的代码建议不要改动，因为一更新就会还原。
# app.config.js（vk框架前端配置文件）
传送门 - app.config.js (opens new window)
# app.mall.config.js（商城前端配置文件）
主要配置一些商城公共参数
# UI框架
vkmall使用了 vk-uview 作为UI组件库
# 二开说明
如果你不懂uniapp，不懂vue开发，那么二开对你来说难度很大，建议暂时放弃，你应该先学习uniapp的基础开发知识。
# 前端如何请求后端（云函数/云对象）？
前端通过 vk.callFunction 请求后端接口。（类似request请求接口）
vk.callFunction({
url: '云函数路径',
title: '请求中...',
data: {
// 请求参数，json格式
},
success: (data) => {
// 请求成功后返回的数据
}
});
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
url是请求路径（而路径就算云函数路径或云对象内的方法路径）
如 获取用户中心信息 这个接口，我们可以看到Ta的url是 client/user.getUserCenter
则请求这个接口的写法就是
vk.callFunction({
url: 'client/user.getUserCenter',
title: '请求中...',
data: {
// 请求参数，json格式
},
success: (data) => {
// 请求成功后返回的数据
console.log("返回数据", data);
}
});
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
你还可以安装HBX插件 - VK框架快速开发辅助工具来快速生成上面的代码
效果
# 如何扩展图标库
← 安装步骤教程 后端开发指南（云函数） →