uniappwebview传参（uniapp使用webview）

## uni-app webview 传参### 简介在 uni-app 开发中，`webview` 组件用于加载网页。当我们需要从 uni-app 页面向 `webview` 中的网页传递参数时，就需要用到 `webview` 传参。### 传参方式uni-app `webview` 传参主要有以下几种方式：1.

URL参数传递

2.

利用 `uni.postMessage` 进行通信

3.

通过 `localStorage` 或 `sessionStorage` 存储数据

### 详细说明#### 1. URL参数传递这是最简单直接的传参方式，将参数拼接到 URL 后面，`webview` 中的网页可以通过解析 URL 获取参数。

uni-app 页面：

```html ```

webview 中的网页 (JavaScript)：

```javascript // 获取 URL 参数 function getQueryString(name) {var reg = new RegExp("(^|&)" + name + "=([^&]

)(&|$)", "i");var r = window.location.search.substr(1).match(reg);if (r != null) return unescape(r[2]);return null; }var name = getQueryString("name"); // 获取 name 参数值 var type = getQueryString("type"); // 获取 type 参数值 ```

优点:

- 简单易用

缺点:

- 传递的信息长度受限 - 参数暴露在 URL 中，安全性较低#### 2. 利用 `uni.postMessage` 进行通信`uni.postMessage` 可以实现 uni-app 页面与 `webview` 中网页的双向通信。

uni-app 页面：

```html ```

webview 中的网页 (JavaScript)：

```javascript // 接收来自 uni-app 的消息 window.addEventListener('message', function(e) {console.log(e.data); });// 发送消息给 uni-app window.parent.postMessage({message: 'hello uniapp', }, '

'); ```

优点:

- 可以传递复杂数据类型 - 可以实现双向通信

缺点:

- 需要在网页中编写 JavaScript 代码#### 3. 通过 `localStorage` 或 `sessionStorage` 存储数据将参数存储在 `localStorage` 或 `sessionStorage` 中，`webview` 中的网页读取对应数据即可。

uni-app 页面：

```javascript // 存储数据到 localStorage uni.setStorageSync('name', 'uniapp'); uni.setStorageSync('type', 'webview'); ```

webview 中的网页 (JavaScript)：

```javascript // 读取 localStorage 数据 var name = localStorage.getItem('name'); var type = localStorage.getItem('type'); ```

优点:

- 可以传递较多数据 - 数据存储在本地，刷新页面数据不会丢失

缺点:

- 需要考虑数据同步问题，例如 uni-app 修改数据后，webview 需要及时更新### 总结选择哪种传参方式取决于具体需求。 - 如果参数简单，可以使用 URL参数传递。 - 如果需要传递复杂数据类型或实现双向通信，可以使用 `uni.postMessage`。 - 如果需要存储较多数据并且希望数据在页面刷新后仍然保留，可以使用 `localStorage` 或 `sessionStorage`。

uni-app webview 传参

简介在 uni-app 开发中，`webview` 组件用于加载网页。当我们需要从 uni-app 页面向 `webview` 中的网页传递参数时，就需要用到 `webview` 传参。

传参方式uni-app `webview` 传参主要有以下几种方式：1. **URL参数传递** 2. **利用 `uni.postMessage` 进行通信** 3. **通过 `localStorage` 或 `sessionStorage` 存储数据**

详细说明

1. URL参数传递这是最简单直接的传参方式，将参数拼接到 URL 后面，`webview` 中的网页可以通过解析 URL 获取参数。**uni-app 页面：**```html ```**webview 中的网页 (JavaScript)：**```javascript // 获取 URL 参数 function getQueryString(name) {var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");var r = window.location.search.substr(1).match(reg);if (r != null) return unescape(r[2]);return null; }var name = getQueryString("name"); // 获取 name 参数值 var type = getQueryString("type"); // 获取 type 参数值 ```**优点:** - 简单易用**缺点:**- 传递的信息长度受限 - 参数暴露在 URL 中，安全性较低

2. 利用 `uni.postMessage` 进行通信`uni.postMessage` 可以实现 uni-app 页面与 `webview` 中网页的双向通信。**uni-app 页面：**```html ```**webview 中的网页 (JavaScript)：**```javascript // 接收来自 uni-app 的消息 window.addEventListener('message', function(e) {console.log(e.data); });// 发送消息给 uni-app window.parent.postMessage({message: 'hello uniapp', }, '*'); ```**优点:**- 可以传递复杂数据类型 - 可以实现双向通信**缺点:**- 需要在网页中编写 JavaScript 代码

3. 通过 `localStorage` 或 `sessionStorage` 存储数据将参数存储在 `localStorage` 或 `sessionStorage` 中，`webview` 中的网页读取对应数据即可。**uni-app 页面：**```javascript // 存储数据到 localStorage uni.setStorageSync('name', 'uniapp'); uni.setStorageSync('type', 'webview'); ```**webview 中的网页 (JavaScript)：**```javascript // 读取 localStorage 数据 var name = localStorage.getItem('name'); var type = localStorage.getItem('type'); ```**优点:**- 可以传递较多数据 - 数据存储在本地，刷新页面数据不会丢失**缺点:**- 需要考虑数据同步问题，例如 uni-app 修改数据后，webview 需要及时更新

总结选择哪种传参方式取决于具体需求。 - 如果参数简单，可以使用 URL参数传递。 - 如果需要传递复杂数据类型或实现双向通信，可以使用 `uni.postMessage`。 - 如果需要存储较多数据并且希望数据在页面刷新后仍然保留，可以使用 `localStorage` 或 `sessionStorage`。