# uni-app

**Repository Path**: shinekot/uni-app

## Basic Information

- **Project Name**: uni-app
- **Description**: uni-app集成IBiz
- **Primary Language**: TypeScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 2
- **Created**: 2024-09-13
- **Last Updated**: 2025-03-05

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# UniApp

UniApp项目是使用**unibest**框架**base**模板生成的uniApp应用，并在UniApp项目中集成了IBiz模板，该项目没有使用默认的UI库**wot-ui**，使用的是**uview-plus**UI库

## 参考官网

[Unibest文档](https://codercup.github.io/unibest-docs/)

[Uniapp文档](https://zh.uniapp.dcloud.io/case.html)

[uview-plus文档](https://uiadmin.net/uview-plus/)

## 环境准备

- **Node.js** - `>=v18` （demo项目使用的v18.16.1）
- **pnpm** - `>=7.30`（推荐使用 `8.12+`，demo项目使用的8.15.5）

## 项目创建过程

### 创建uniapp应用

使用unibest指令创建应用

```bash
# VS Code 模板
pnpm create unibest <项目名称> # 默认用 base 模板(推荐该方式)
```

### 集成IBiz模板

1. 在package.json中添加依赖

```json
{
  "dependencies": {
    "@ibiz-template/core": "0.7.35-alpha.1",
    "@ibiz-template/model-helper": "0.7.38-alpha.2",
    "@ibiz-template/runtime": "0.7.38-alpha.2",
    "@ibiz-template/theme": "^0.7.0",
    "@ibiz/model-core": "^0.1.55",
    "async-validator": "^4.2.5",
    "axios": "^1.4.0",
    "dayjs": "1.11.10",
    "handlebars": "^4.7.8",
    "lodash-es": "^4.17.21",
    "mqtt": "2.18.9",
    "path-browserify": "^1.0.1",
    "pinia": "2.0.36",
    "pinia-plugin-persistedstate": "3.2.1",
    "qs": "6.5.3",
    "qx-util": "^0.4.8",
    "ramda": "^0.29.0"
  },
  "devDependencies": {
    "@types/ramda": "^0.29.8",
    "@types/lodash-es": "^4.17.11",
    "@types/path-browserify": "^1.0.2"
  }
}
```

2. 使用**public**目录下的core和runtime将IBiz包对应文件替换

### 安装Uni自动安装插件

不安装此插件，vue组件仅挂载到App上时，微信小程序无法解析到组件

1. 安装 @uni-helper/vite-plugin-uni-components 插件

```bash
pnpm add @uni-helper/vite-plugin-uni-components -D
```

2. 在vite中配置插件
```ts
// @see https://github.com/uni-helper/vite-plugin-uni-components
import Components from '@uni-helper/vite-plugin-uni-components'

defineConfig({
  plugins: [
      Components({
        // 自动安装的文件类型，默认值 'vue'
        extensions: ['vue'],
        // 自动安装的文件路径，默认值 'src/components'
        dirs: ['src/components'],
        // 生成的自动安装文件位置
        dts: 'src/types/components.d.ts',
      }),
  ]
})
```

### UI库替换

#### 卸载 wot-ui 库

卸载 wot-ui 过程如下：

1. 删除 wot-ui 库：

```bash
pnpm un wot-design-uni
```

2. pages.config.ts 文件 easycom.custom 删除相关配置：

```diff
easycom: {
    autoscan: true,
    custom: {
-     '^wd-(.*)': 'wot-design-uni/components/wd-$1/wd-$1.vue',
    },
},
```

3. tsconfig.json 文件 compilerOptions.types 删除相关配置：

```diff
"types": [
    "@dcloudio/types",
    "@types/wechat-miniprogram",
-   "wot-design-uni/global.d.ts",
    "./components.d.ts",
    "./global.d.ts"
]
```

#### 安装 uview-plus 库

参考文档：

[unibast-UI 库替换篇](https://codercup.github.io/unibest-docs/base/7-ui)

[uview-plus-安装教程](https://uiadmin.net/uview-plus/components/npmSetting.html)

1. 安装 uview-plus 库：

```bash
pnpm add uview-plus
```

2. pages.config.ts 文件 easycom.custom 添加相关配置：

```diff
easycom: {
    autoscan: true,
    custom: {
+      '^u--(.*)': 'uview-plus/components/u-$1/u-$1.vue',
+      '^up-(.*)': 'uview-plus/components/u-$1/u-$1.vue',
+      '^u-([^-].*)': 'uview-plus/components/u-$1/u-$1.vue',
    },
},
```

3. tsconfig.json 文件 compilerOptions.types 添加相关配置：

```diff
"types": [
    "@dcloudio/types",
    "@types/wechat-miniprogram",
+   "uview-plus/types",
    "./components.d.ts",
    "./global.d.ts"
]
```

4. 引入uview-plus主JS库

在项目src目录中的main.js中，引入并使用uview-plus的JS库

```ts
import uviewPlus from 'uview-plus'

import { createSSRApp } from 'vue'
export function createApp() {
  const app = createSSRApp(App)
  app.use(uviewPlus)
  return {
    app,
  }
}
```

5. 引入uview-plus样式

在项目根目录的uni.scss中引入主题文件

```scss
@import 'uview-plus/theme.scss';
```

在App.vue中引入基础样式

```vue
<style lang="scss">
/* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
@import 'uview-plus/index.scss';
</style>
```

### 启用TSX

1. 安装 @vitejs/plugin-vue-jsx 插件

```bash
pnpm add @vitejs/plugin-vue-jsx -D
```
2. vite启用插件

```ts
import { defineConfig } from 'vite'
import vueJsx from '@vitejs/plugin-vue-jsx'

defineConfig({
  plugins: [
    vueJsx(),
  ]
})
```
3. 配置tsconfig.json文件

```diff
{
  "compilerOptions": {
+    "jsxFactory": "h",
+    "jsxFragmentFactory": "Fragment",
    // 是否在表达式和声明上有隐含的any类型时报错---解决tsx文件报错
+    "noImplicitAny": false,
  }
}
```

## 安装、运行

```bash [pnpm]
pnpm i
pnpm dev
# dev默认运行的是h5，其他平台执行dev:<uni-platform>，如:
pnpm dev:mp-weixin
```

**注意：** h5模式下可直接运行，微信小程序必须使用**public**目录下的core和runtime将IBiz包对应文件替换，
本地link启动才可以（原IBiz包中包含浏览器JS对象，小程序不识别，无法启动），
在微信开发工具中启动后，本地启动h5模式，即可测试请求