# auto-template-react

**Repository Path**: zzliux/auto-template-react

## Basic Information

- **Project Name**: auto-template-react
- **Description**: @auto.pro的react模板项目，auto.js pro 8也可以愉快的使用react写ui
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2022-05-28
- **Last Updated**: 2023-10-10

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 说明
该 demo 由 molysama 大佬的 [auto-template-html](https://github.com/molysama/auto-template-html) 与本人的[auto-template-vue](https://gitee.com/zzliux/auto-template-vue)修改而来，前端UI使用MUI(Material UI)，该UI完全实现了安卓组件。

# auto-template-react
@auto.pro 的 React 模板

# Usage

首次安装

```
npm i
```

若使用pro9的终端，则使用进行安装
```
npm i --no-bin-links
```

生成 build 文件夹并监听 src 的变化

```
npm run start
```

个人建议使用模拟器编写时使用模拟器自带的**文件共享**功能，将脚本放到共享的路径中，模拟器端可直接执行项目，使用npm start自动生成了 index.html, web.js, auto.js 三个文件，入口为 auto.js, 直接运行项目即可

## React 相关
- 调试  
    执行`npm run start`，使用浏览器打开 `dist/index.html` 后可调试前端代码，需要在浏览器的console执行`localStorage.debug = 1`，AutoWeb.auto相关通信会通过prompMock拦截，模拟数据见`src/mock/promptMock.js`
- 编译  
    执行`npm run build`，会同时编译 auto 的代码和 html 代码，在`dist`目录下生成编译文件

## 通讯
### web 向 auto 发送事件
webview 可以自定义浏览器事件，因此我们可以拦截一些不常用事件，通过魔改这些事件来传值和执行安卓代码，这就是所谓的 JsBridge。在本项目里使用的是prompt事件来传递。

web 端 使用 AutoWeb 的例子见 src/template/pages/Settings.jsauto 端接收 web 端发来的事件并处理后返回结果的例子见目录 `src/webViewEvents`，完成路由编写后在index.js中注册路由，page组件settings：`src/page/Settings.js`中的事件在`src/webViewEvents/settings`中进行处理并响应。

### auto 向 web 发送事件
auto 执行 html 的代码原理就很简单了，直接通过 webview 来执行一段代码
```javascript
import { effect$ } from "@auto.pro/core"
import { run } from "@auto.pro/webview"

const webview = run("file://" + files.path("dist/index.html"))
effect$.subscribe(() => {
    // 在html里执行document.title，获取到标题并返回
    webview.runHtmlJS("document.title").subscribe((value) => {
        toastLog(`title是${value}`)
    })

    // 在html里执行run，并传递两个参数
    webview.runHtmlFunction("run", "hello", "world").subscribe((value) => {})
})
```

# LICENSE
MIT