cca-template-uniapp

基于 uniapp 的小程序端解决方案，更多使用请前往官网 https://uniapp.dcloud.net.cn/。

开发环境

• 建议 node 环境 14.18.3及以上，npm 版本 6.14.15及以上
• 使用 vscode 开发时，运行 npm run extension ，安装所需依赖插件

技术栈

Vue@2 + Webpack + uview-ui@2 + Vuex@3

快速开始

安装依赖

// 项目根目录下执行
yarn

启动

这里以微信小程序平台举例：

// 默认测试环境
npm run dev:mp-weixin

// 预生产
npm run dev:mp-weixin:preProd

// 热备环境
npm run dev:mp-weixin:standby

// 生产环境
npm run dev:mp-weixin:prod

本地业务组件文档

yarn run docs

模板已集成自动探测组件文档，请打开 http://localhost:9999/ 即可查看当前项目的本地业务组件文档，端口可能会被占用，请以实际运行的端口为准。

发版本

打开 http://jenkins.demo.com/ 在线 Jenkins 平台，平台地址因项目存在多变，具体请咨询运维人员，点击构建部署，选项如下：

// 打包测试环境，区别在于生成的二维码是体验版本二维码
build

// 预生产
build:preProd

// 热备环境
build:standby

// ☆☆☆☆☆ 打包正式生产环境，此二维码是正式版本二维码，一般打包都选这个
build:pord

代码提交

1. 常规提交须遵循《信息技术部前端编码手册》的Git规约，比如：

   git add .
   git commit -m 'feat: 完善登录'

2. 可使用交互式命令终端，选择合适的类型以及说明回车保存即可：

   npm run commit

图片资源访问方式

图片尽量使用下列方式加载，方便后续维护。

vue 中通过全局变量

• mixinGlobalBaseMainServerUrl：服务器媒体资源前缀
• mixinGlobalBaseMainImagesUrl：主包静态图片资源前缀
• mixinGlobalBaseMainOssAudiosUrl：demo 分包静态图片资源前缀

使用：

<img class="logo" :src="mixinGlobalBaseMainImagesUrl + 'home-bg.png'" alt="" />

SCSS（CSS）中通过全局样式函数

• getPageMainImgUrl：主包静态图片资源别名
• getPageDemoImgUrl：分包 demo 静态图片资源别名

使用：

@import "@/assets/style/function.scss";

.container {
  background: url(getPageMainImgUrl("my-bg.png")) 0% 0% no-repeat;
}

目录结构

├── babel.config.js
├── components               // easycom 自动加载的组件目录
│   │   └── uview-ui         // uview 组件库
├── dist                     // 输出目录
│   ├── build                // 执行 yarn build 后的打包目录（体验版、正式版需发这个目录下对应平台的包）
│   │   └── mp-weixin        // 微信小程序打包目录
│   └── dev                  // 开发环境，执行 yarn dev 后的打包目录
│       ├── mp-alipay        // 支付宝小程序打包目录
│       └── mp-weixin        // 微信小程序开发环境打包目录
├── package.json             // npm 配置文件
├── postcss.config.js
├── public
│   └── index.html
├── README.md
├── src
│   ├── App.vue              // 入口文件
│   ├── assets
│   │   ├── font
│   │   └── style
│   ├── common
│   │   ├── components       // 通用组件目录
│   │   ├── configs          // 通用配置目录：如后端接口服务名。
│   │   ├── constants        // 全局常量
│   │   ├── filters          // 全局过滤器
│   │   ├── libs             // 全局第三方插件或组件：如 uview-ui、富文本
│   │   ├── mixins           // 全局混入
│   │   ├── store            // 全局状态机
│   │   ├── global
│   │   ├── index.ts
│   │   ├── modules
│   │   └── mutationTypes
│   │   └── utils            // 通用工具目录：请求 request、通用函数、通用正则等
│   ├── main.js              // Vue初始化入口文件
│   ├── manifest.json        // 配置应用名称、appid、logo、版本等打包信息
│   ├── pages                // 业务页面文件存放的目录
│   │   ├── index
│   │   ├── uview
│   ├── pages.json           // 配置页面路由、导航条、选项卡等页面类信息
│   ├── services             // 页面请求接口目录
│   │   └── demo.ts
│   ├── static               // 存放应用引用静态资源（如图片、视频等）的目录
│   ├── uni.scss             // 整体控制应用的风格，预置了一批 scss 变量预置，在代码中无需 import 这个文件即可在 scss 代码中使
├── tsconfig.json
├── vue.config.js            // 配置 webpack 等编译选项
└── yarn.lock

开发资源指引

第三方库或工具

• 组件库 uView-ui
• 图片压缩 tinypng
• 接口插件 luch-request