更新记录

1.2（2023-07-17）

⭐⭐⭐ 下载发现uniapp不支持cli模板，会自动删除package等文件配置，所以我把代码上传到gitee上了，有需要的直接clone下载即可 ⭐⭐⭐ git clone https://gitee.com/tofireloli/cruelLoli-vue3.git

1.1（2023-07-17）

更换安装包

1.0（2023-07-11）

1. 支持多端mock数据，但APP端mock因为无展示地方，所以为错误提示实现
2. 支持阿里iconfont快捷操作
3. 封装u-page，用于页面统一，不需要可以删除
4. 封装mescroll-uni，实现下拉和接口的融合，节约代码 组件商城地址：https://ext.dcloud.net.cn/plugin?id=4094 官网地址：http://www.mescroll.com/uni.html
5. 已分包，方便日后app或者h5要转小程序
6. pinia 解决页面刷新数据丢失的问题
7. 支持主题颜色切换，配置文件位于 utils/skin
8. 已封装多种css样式，如不需要可删除

平台兼容性

开发规范

1、推荐项目开发工具

• 项目运行工具hbuilderX
• 项目开发工具VS Code，支持eslint校验，推荐下载扩展工具 （1）uni-ui-snippets： uni-ui 组件代码片段 （2）uniapp-snippet： uniapp 代码提示 （3）eslint，vetur，Vue3 Snippets等

2、项目组体框架

• 开发框架： vue3 + typescript + vite + pinia + mock

• UI框架：uni-ui，文档及演示地址：https://uniui.dcloud.net.cn/

• Uni-app API文档：https://uniapp.dcloud.io/api/

• Ajax库 官方文档：https://uniajax.ponjs.com/guide

• px单位采用rpx，一屏宽度固定750rpx（px与rpx换算一般为1：2），字体大小采用px

  3、安装使用

• 安装依赖

  npm i 

4、项目运行

一、H5端运行

1. hbuilderX运行

   运行 > 本地环境（mock环境）/联调环境/测试环境/生产环境

2. cmd运行

   npm run serve // 本地环境
   npm run serve:custom h5-dev // dev环境
   npm run serve:custom h5-test-next // 测试环境
   npm run serve:custom h5-uat // 生产环境

   二、 APP端运行

3. 项目目录 src/utils/app_env.ts 中，return 不同环境变量，APP端执行不同环境代码，在首页demo中可直接参考使用

// 测试环境
const testNext: EnvType = {
    NODE_ENV: '',
    VUE_APP_MODE: 'test-next',
    VUE_APP_URL: 'xxxx'
}
// 生产环境
const uat: EnvType = {
    NODE_ENV: '',
    VUE_APP_MODE: 'uat',
    VUE_APP_URL: 'xxxx'
}
// return不同环境变量，app端执行不同环境
return testNext

2. APP在手机上真机联调方法

   https://hx.dcloud.net.cn/Tutorial/App/PhoneDebugging

3. 常见问题解决方法

   • 手机连接无反应，开启开发人员选项，开启usb调试
   • 手机连接方式从充电模式改为文件传输模式
   • 查看电脑是否存在adb通道被占用的情况，常见占用的软件如 酷狗音乐 等

5、项目打包

一、H5端打包

1. hbuilderX打包

   发行 > 网站-PC Web或手机 H5

2. cmd运行

   npm run build

3. 打包文件位置

根目录/dist/build/h5

二、 APP端发行

1. 发行 > 原生APP-云打包 -填写包名/证书/密钥等 > 快速安心打包

2. 等待云打包排队执行，并产生一个本地安装包

6、项目目录结构

-dist // 打包文件
-mock/mocks // mock数据
-node_modules
-src
  -assets.css // 公共样式
  -components // 全局组件 u- || common- 开头的组件无需在业务中引入可直接使用
  -pages // 功能页面/组件
  -schema // 公共ts
  -static // 静态资源
  -store // vuex 每新增一个modules都要在index.d.ts中引入
  -uitls // 公共函数的储存位置
  -App.vue // 项目入口
  -manifest.json // uni配置文件
  -pages.json // router文件
  -uni.scss // 公共主题颜色
  -
-packages.json
-tsconfig.json
-vite.config.ts

2. 接口请求格式 （根据自身业务修改）

// 引入ajax
import $ajax from '@/utils/ajax'

// 例：查询接口 /captcha/code
const respData = await $ajax.get({url: '/captcha/code'})

3. mock数据

创建mock数据存放于mock/mocks下 目录格式： mock/mocks/...接口路径.ts 如接口地址为：abc/cc/dd/ee 则路径为 mock/mocks/abc/cc/dd/ee.ts

export default () => {
  return {
    statusCode: 200,
    body: {
      code: 0,
      data: {
        accessToken: 'accessToken',
        refreshToken: 'refreshToken',
        userInfo: {
          name: '123',
          icon: 'icon'
        }
      },
      msg: '登录',
      success: true
    }
  }
}

8、页面结构

所有页面最外层需要用u-page包裹，已作用全局无需引入 (按业务需要来，我这边只是做了一个工共封装，用于多颜色切换，通用header等)

<template>
  <u-page class="page-first-page">
    // 主体内容
  </u-page>
</template>

<script lang="ts">
</scrpit>

<style lang="scss">
</style>

9、列表页面

本模板已集成 mescroll-uni，可直接在页面中使用

<u-page class="example-uRefresh" title="上滑加载">
    <u-refresh :url="dataMap.url" @upCallback="dataMap.upCallback" ref="mescrollItem">
      <template #data="{index}">
        <view class="detail">{{index}}</view>
      </template>
    </u-refresh>
  </u-page>

10 、阿里iconfont引入功能（支持多彩图标和单色图标）

1.2 项目中使用

图标分为单色图标和彩色图标，单色图片可任意更换颜色，并根据font-size配置图标大小，彩色模式不支持颜色变更，改变大小需配置width，height。

1.2.1 单色图标

单色图标即只有单一颜色，颜色可根据color任意修改，尺寸根据font-size调整

1. 在图标图中点击font class模式，找到需要使用的图标并复制名称，如：icon-form-colse
2. 在项目中使用仅需i标签，并配置class为 font_family icon-xxxx，即可显示

<!-- 矢量图标 可自定义颜色 -->
<i class="font_family icon-a-Login-Mobilenumber"></i>
<style>
    .icon-a-Login-Mobilenumber {
        font-size: 50px;
        color: blue;
    }
</style>

1.2.2 彩色模式

彩色图标即存在两种和两种以上颜色，颜色随源图标不可更换，尺寸根据 width，height 调整

使用：将icon名称前加上t-xxxx, 类似icon-a-Login-Mobilenumber改为t-icon-a-Login-Mobilenumber

<!-- 多彩图标 -->
<view class="t-icon t-icon-logo" style="width: 60px; height: 60px;"></view>
<style>
    .t-icon-logo {
        width: 60px;
        height: 60px;
    }
</style>

2. 数据引用及维护

全局安装iconfont-tools，如之前已安装则跳过

npm install -g iconfont-tools

完成之后，在项目中执行

npm run icon

输入iconfont地址 (iconfont数据源为fontclass地址) 复制加粗部分数据并填写到cmd中

at.alicdn.com/t/c/ font_3500651_l9b2nwed3zn .js

按提示填写信息（无需修改，采用默认即可），填写完毕后便完成图标的导入