snail-lu / uni-app-mall

基于uni-app的商城微信小程序项目模板

uni-app-mall 微信小程序商城

基于 uni-app 框架开发的微信小程序项目基础模板。本项目使用 vue-cli 创建。

目录结构说明

src
│
├── config
│   ├── index.js                         配置对外暴露文件
│   └── api.js                           接口列表
│
├── common
│   ├── components                       自定义组件
│   ├── mixins                           局部或全局混入文件
│   └── utils                            工具函数
│
├── services
│   ├── common                           公用服务类
│   │   ├── addressService               地址服务类
│   │   ├── cartService                  购物车服务类
│   │   ├── goodsService                 商品服务类
│   │   ├── orderService                 订单服务类
│   │   ├── userService                  用户服务类
│   │   └── platformService              平台服务类
│   └── page                             用来存放页面的服务类，用来获取数据、转换数据、以及封装一些不涉及界面交互的逻辑。
│
├── static                               图片等静态资源
├── pages                                页面
├── store                                全局公共数据
├── main.js                              Vue初始化入口文件
├── App.vue                              应用配置，用来配置App全局样式以及监听
├── manifest.json                        配置应用名称、appid、logo、版本等打包信息
├── pages.json                           配置页面路由、导航条、选项卡等页面类信息
├── uni.scss                             uni-app内置的常用样式变量文件
├── .prettierrc.js                       prettier配置
└── jsconfig.json                        js语言特性配置

基础使用

# 克隆
git clone https://github.com/Snail-Lu/uni-app-mall.git

# 进入根目录
cd uni-app-mall

# 安装依赖
npm install

# 本地运行，编译完成后在dist目录下生成dev/mp-weixin目录，使用微信开发者工具打开该目录
npm run serve

# 生产打包，编译完成后在dist目录下生成build/mp-weixin目录，使用微信开发者工具打开该目录进行上传发布
npm run build

# 其他支持的运行命令参见package.json

如使用HbuilderX编辑器，可直接使用编辑器菜单进行运行或发布，详见链接

uni-ui组件库使用

本项目中安装了 uni-ui 插件，并且在pages.json做了easyCom配置，需要使用uni-ui中的组件直接在各页面中使用即可：

<template>
	<uni-icons type="contact" size="30"></uni-icons>
</template>

VS Code 中 Prettier 自动格式化配置

1. 安装插件 Prettier - Code fromatter 并启用。
2. VS Code --> File --> Preference --> Settings ---> Text Editors --> Formatting 勾选 Formate on Save|Paste|Type。
3. VS Code --> File --> Preference --> Settings ---> Extensions --> Prettier --> Use Editor Config 移除勾选。
4. 如果上述配置结束，仍然无法在保存时自动进行代码格式化，在任一vue或js文件中右键选择Format Document With...，选择Prettier即可。

HbuilderX自动格式化配置

需要通过 eslint 来实现，参考文章链接。本项目暂未配置。

项目截图

文档

1. uniapp 文档
2. 微信官方文档
3. uni-ui 文档
4. 接口文档--暂无