# web_multidevice_advanced_ui

**Repository Path**: ohadss/web_multidevice_advanced_ui

## Basic Information

- **Project Name**: web_multidevice_advanced_ui
- **Description**: Multi-device adaptation advanced component library of the HTML5 framework.
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 1
- **Created**: 2024-11-07
- **Last Updated**: 2024-12-25

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# web_multidevice_advanced_ui

### 介绍
H5框架的多设备适配高阶组件库

### 安装教程
#### 1. 进入到工程根目录
#### 2. 安装核心组件库

 **核心组件库** 

 **npm** 

```
npm install web-multidevice-advanced-ui
```
 **yarn** 

```
yarn add web-multidevice-advanced-ui
```

#### 3. 安装框架包装器，根据框架选择对应的安装命令

 **vue2包装器** 

 **npm** 

```
npm install web-multidevice-advanced-vue2
```
 **yarn**

```
yarn add web-multidevice-advanced-vue2
```

 **vue3包装器** 

 **npm**

```
npm install web-multidevice-advanced-vue3
```

 **yarn** 

```
yarn add web-multidevice-advanced-vue3
```
 **react包装器** 

 **npm**

```
npm install web-multidevice-advanced-react
```

 **yarn** 

```
yarn add web-multidevice-advanced-react
```

### 真机运行说明
以下两种方式，选择其一即可。

#### 使用网络链接进行访问

 **1. 确保H5项目运行的服务器和真机处在同一个局域网内** 

 **2. 在vue或react工程内运行npm run serve或yarn serve启动工程，生成Network链接** 

 **3. 打开原生工程，在web组件里使用src加载上一步生成的Network链接** 

```
Web({src: 'http://本地ip:port/', controller: this.controller})
```

 **4. 在原生工程的module.json5文件里配置网络请求权限** 

```
"requestPermissions": [
  {
    "name": "ohos.permission.INTERNET"
  }
]
```
 
 **5. 启动原生工程，运行在真机中，访问H5页面** 


#### 使用静态html文件进行访问

 **1. 修改h5工程的打包路径和路由** 

 1. vue2工程：
  (1) 在根目录的vue.config.js里，将publicPath设置为"./"；
  (2) 在路由设置文件router.ts文件里，将mode从history改为hash。
 2. vue3工程：
  (1) 在根目录的vue.config.js里，将publicPath设置为"./"；
  (2) 在路由设置文件router.ts文件里，从vue-router里导入createWebHashHistory，替换掉createWebHistory。
 3. react工程：
  (1) 打开package.json文件，在private属性下的任意位置添加"homepage": "./"；
  (2) 在项目中引用路由的位置，将BrowserRouter改为HashRouter。

 **2. 在vue或react工程内运行npm run build或yarn build，打包后在根目录生成dist文件夹** 

 **3. 将dist文件夹拷贝到原生工程的resource\rawfile目录下** 

 **4. 在web组件里使用$rawfile加载dist文件夹里的html资源** 

```
Web({src: $rawfile(dist/index.html), controller: this.controller})
```

 **5. 启动原生工程，运行在真机中，访问H5页面**