# mini **Repository Path**: xiaowei_android/mini ## Basic Information - **Project Name**: mini - **Description**: No description available - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2025-12-30 - **Last Updated**: 2025-12-30 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # 充电宝项目小程序 ## 前期准备 该项目统一使用yarn包管理安装流程如下 1. 安装nvm: 2. 验证nvm是否安装成功 ```BASH nvm -v ``` 3. 下载14.17.2版本nodeJS ```BASH ## 下载nodeJS nvm install 14.17.2 ## 使用nodeJS nvm use 14.17.2 ## 查看是否安装成功 node -v npm -v ## 安装镜像 npm install cnpm -g cnpm install ``` 4. 安装yarn ```BASH ## 安装yarn npm install -g yarn ## 查看yarn是否安装成功 yarn -v ``` ## 安装依赖 1. 进入该项目文件夹 2. 下载依赖 ```BASH ## 下载安装依赖 yarn install ``` npm install --save mobx-miniprogram mobx-miniprogram-bindings 3. 构建npm 打开微信开发者工具，点击 工具 -> 构建 npm，并勾选 使用 npm 模块 选项 4. 重新编译 ## 静态资源存放 小程序除特殊情况,项目内不存任何静态资源,所有的图片存放在119.23.182.151服务器端口号22,/home/www/website目录下, 找个服务器传输工具进行图片传输,访问域名 ```Bash https://www.krppay.com/jzx_assets/+图片名称/资源名称 ``` ## 小程序基本分包及目录 如需了解访问该文档: 添加页面直接在各分包规则里添加路由,微信开发者工具会自动生成对应的页面,.wxss文件需要修改成.less文件 ```JSON /your-wx-app ├── project.config.json ├── app.js ├── app.json ├── app.wxss ├── pages/ │ ├── index/ // 主页面 │ ├── common/ // 共享的二级页面和组件 │ │ ├── user/ │ │ ├── product/ │ │ └── ... │ ├── projectA_pages/ // 项目A特有的二级页面 │ │ ├── contentDetail/ // 项目A的内容详情页 │ │ │ ├── contentDetail.js │ │ │ ├── contentDetail.json │ │ │ ├── contentDetail.wxml │ │ │ └── contentDetail.wxss │ │ └── ... │ ├── projectB_pages/ // 项目B特有的二级页面 │ │ ├── contentDetail/ // 项目B的内容详情页 │ │ │ ├── contentDetail.js │ │ │ ├── contentDetail.json │ │ │ ├── contentDetail.wxml │ │ │ └── contentDetail.wxss │ │ └── ... │ └── ... ├── components/ ├── utils/ ├── config/ │ ├── index.js │ ├── projectA.js │ ├── projectB.js │ └── contentConfig/ // 新增：内容页面配置 │ ├── projectA.js // 项目A的内容页面配置 │ ├── projectB.js // 项目B的内容页面配置 │ └── common.js // 通用内容页面配置（可选） └── sitemap.json ``` ## 请求封装 根目录下/api文件内,request.js为请求封装,请求接口时在api.js文件下书写接口,例子如下 ```JavaScript // 入网资质图片ocr校验并上传 uploadImg: (data) => requestByForms(POST, 'pub/img/uploadImg', data), // 模糊查询总行信息 findByNewLikeHeadBankName: (data) => requests(GET, 'bankInfo/findByNewLikeHeadBankName', data), ``` ## 主题色使用 所有的主题色都在根目录下app.less中声明了变量,具体如下 ```Less // 主色 @index-color: #9F9F9F; @second-color:#222124; //辅助色 @error-color:#FF3B30;//异常色 @tag-color:#47DBBF;//标签和待处理色 // 文字颜色 @font-color:#1D1F24;//用于重要文字信息:模块标题、段落标题、重要文字信息等 @second-font-color:#393F47;//用于次要文字信息、列表中的产品名称、tab bar选中文字金刚区文字等 @929-color:#C1C1C1;//用于辅助性文字 @group-color:#E7E7E7;//用于分组信息，段落之间分割线 @background-color:#f1f1f1;//用于背景色 ``` 引用方法:例/pos/posList/poslist目录下 wxml文件 posList.wxml ```html pos/posList/posList.wxml ``` posList.less ```Less @import "/app.less"; text{ color:@title-color;//直接使用变量 } ``` ### 网络请求request request新方法 ``` $api.requestNetInfo({ data:data数据{}, isFormData: false onInterceptError:(err) => {} }) ``` ``` 小程序组件库 tdDesign npm i tdesign-miniprogram -S --production 小程序组件库 vant有赞 npm i @vant/weapp -S --production 小程序aes128加解密组件 npm install crypto-js ``` 57291933085 Aa1234567 000006027286559656 57291034884 Aa123456 57291933038 aA123456 检查非法颜色值 npm run color-check 检查wxml是否添加Style node scripts/checkStyle.js ### miniprogram-ci更新安装 npm install miniprogram-ci@latest --save-dev 安装好之后，确认版本： npx miniprogram-ci --version ### 项目使用用国内源（避免拉包失败）建议改成淘宝镜像： npm config set registry https://registry.npmmirror.com ### 运行npm install下载依赖库 npm install ### 构建项目 1、使用切换项目指令 dev构建 2、使用工具构建npm 如果构建异常，请删除package-lock.json、node_modules、miniprogram_npm，一定要彻底删除，然后重试 ### 切换项目编译指令 npm run dev:项目名称 例如:npm run dev:qykc ### 打包上传代码指令 npm run upload:项目名称 例如:npm run upload:hxdy ### 项目公用less覆盖到app.less 脚本方法： updateCommonThemeLess(config) 切换项目时，config/*CommonTheme.less会覆盖到app.less #### app.less被覆盖区域： /* === CommonTheme Start === */ /* === CommonTheme End === */