# 前端开发指南(页面)

# 目录结构

# 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-admin使用了 element 作为UI组件库

传送门 - element文档 (opens new window)

# 二开说明

vk-admin页面的二开非常简单,你只需要会写json即可,请熟读 万能表单万能表格 文档即可二开admin页面。

传送门 - 万能表格 (opens new window)

传送门 - 万能表单 (opens new window)

# 前端如何请求后端(云函数/云对象)?

前端通过 vk.callFunction 请求后端接口。(类似request请求接口)

vk.callFunction({
  url: '云函数路径',
  title: '请求中...',
  data: {
    // 请求参数,json格式
  },
  success: (data) => {
    // 请求成功后返回的数据
    
  }
});
1
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

你还可以安装HBX插件 - VK框架快速开发辅助工具来快速生成上面的代码

传送门 - VK框架快速开发辅助工具 (opens new window)

效果