qsh-webview-sdk 2.0.1 → 2.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +227 -238
- package/dist/index.d.ts +117 -116
- package/dist/uni-webview.es.js +131 -122
- package/dist/uni-webview.es.js.map +1 -1
- package/dist/uni-webview.umd.js +1 -1
- package/dist/uni-webview.umd.js.map +1 -1
- package/package.json +40 -29
package/README.md
CHANGED
|
@@ -1,238 +1,227 @@
|
|
|
1
|
-
# UniApp WebView SDK
|
|
2
|
-
|
|
3
|
-
一个重构后的 UniApp WebView SDK,支持微信小程序和 APP 端的 WebView 与原生端通信。
|
|
4
|
-
|
|
5
|
-
## 特性
|
|
6
|
-
|
|
7
|
-
- ✅ 支持微信小程序 WebView
|
|
8
|
-
- ✅ 支持 APP 端 (Plus/NVUE/UVUE)
|
|
9
|
-
- ✅ 模块化架构,易于维护
|
|
10
|
-
- ✅ TypeScript 类型支持
|
|
11
|
-
- ✅ UMD 和 ESM 双格式输出
|
|
12
|
-
- ✅ 自动环境检测
|
|
13
|
-
|
|
14
|
-
## 安装
|
|
15
|
-
|
|
16
|
-
### NPM 安装
|
|
17
|
-
|
|
18
|
-
```bash
|
|
19
|
-
npm install qsh-webview-sdk
|
|
20
|
-
```
|
|
21
|
-
|
|
22
|
-
### CDN 引入
|
|
23
|
-
|
|
24
|
-
```html
|
|
25
|
-
<script src="path/to/uni-webview.umd.js"></script>
|
|
26
|
-
```
|
|
27
|
-
|
|
28
|
-
## 使用方法
|
|
29
|
-
|
|
30
|
-
### 在 HTML 中引入
|
|
31
|
-
|
|
32
|
-
```html
|
|
33
|
-
<!-- 微信小程序环境(可选)-->
|
|
34
|
-
<script type="text/javascript">
|
|
35
|
-
if (/miniProgram/i.test(navigator.userAgent) && /micromessenger/i.test(navigator.userAgent)) {
|
|
36
|
-
document.write('<script src="https://res.wx.qq.com/open/js/jweixin-1.
|
|
37
|
-
}
|
|
38
|
-
</script>
|
|
39
|
-
|
|
40
|
-
<!-- 引入 UniApp WebView SDK -->
|
|
41
|
-
<script type="text/javascript" src="path/to/uni-webview.umd.js"></script>
|
|
42
|
-
```
|
|
43
|
-
|
|
44
|
-
### 基础使用
|
|
45
|
-
|
|
46
|
-
```javascript
|
|
47
|
-
// 等待 SDK 准备就绪
|
|
48
|
-
document.addEventListener('UniAppJSBridgeReady', function() {
|
|
49
|
-
console.log('SDK 已准备就绪');
|
|
50
|
-
});
|
|
51
|
-
|
|
52
|
-
// 或使用 Promise
|
|
53
|
-
|
|
54
|
-
console.log('SDK 已准备就绪');
|
|
55
|
-
});
|
|
56
|
-
```
|
|
57
|
-
|
|
58
|
-
### 导航功能
|
|
59
|
-
|
|
60
|
-
```javascript
|
|
61
|
-
// 跳转到新页面
|
|
62
|
-
|
|
63
|
-
url: '/pages/detail/detail?id=1'
|
|
64
|
-
});
|
|
65
|
-
|
|
66
|
-
// 返回上一页
|
|
67
|
-
|
|
68
|
-
delta: 1
|
|
69
|
-
});
|
|
70
|
-
|
|
71
|
-
// 切换 Tab
|
|
72
|
-
|
|
73
|
-
url: '/pages/home/home'
|
|
74
|
-
});
|
|
75
|
-
|
|
76
|
-
// 重启应用
|
|
77
|
-
|
|
78
|
-
url: '/pages/index/index'
|
|
79
|
-
});
|
|
80
|
-
|
|
81
|
-
// 重定向
|
|
82
|
-
|
|
83
|
-
url: '/pages/login/login'
|
|
84
|
-
});
|
|
85
|
-
```
|
|
86
|
-
|
|
87
|
-
### 消息通信
|
|
88
|
-
|
|
89
|
-
```javascript
|
|
90
|
-
// 发送消息到原生端
|
|
91
|
-
|
|
92
|
-
data: {
|
|
93
|
-
action: 'share',
|
|
94
|
-
title: '分享标题',
|
|
95
|
-
content: '分享内容'
|
|
96
|
-
}
|
|
97
|
-
});
|
|
98
|
-
|
|
99
|
-
// 获取环境信息
|
|
100
|
-
|
|
101
|
-
console.log('环境信息:', result);
|
|
102
|
-
// result: { miniprogram: true, weixin: true }
|
|
103
|
-
// 或 { app: true, plus: true }
|
|
104
|
-
});
|
|
105
|
-
```
|
|
106
|
-
|
|
107
|
-
### 环境检测
|
|
108
|
-
|
|
109
|
-
```javascript
|
|
110
|
-
// 获取当前环境信息
|
|
111
|
-
const env =
|
|
112
|
-
|
|
113
|
-
console.log('环境类型:', env.type); // 'weixin' | 'plus' | 'nvue' | 'uvue' | 'h5'
|
|
114
|
-
console.log('是否微信小程序:', env.isWeixinMiniProgram);
|
|
115
|
-
console.log('是否 APP:', env.isAppPlus);
|
|
116
|
-
```
|
|
117
|
-
|
|
118
|
-
## API 文档
|
|
119
|
-
|
|
120
|
-
### 导航 API
|
|
121
|
-
|
|
122
|
-
| 方法 | 说明 | 参数 |
|
|
123
|
-
|------|------|------|
|
|
124
|
-
| `navigateTo` | 保留当前页面,跳转到应用内的某个页面 | `{ url: string }` |
|
|
125
|
-
| `navigateBack` | 关闭当前页面,返回上一页面或多级页面 | `{ delta?: number }` |
|
|
126
|
-
| `switchTab` | 跳转到 tabBar 页面 | `{ url: string }` |
|
|
127
|
-
| `reLaunch` | 关闭所有页面,打开到应用内的某个页面 | `{ url: string }` |
|
|
128
|
-
| `redirectTo` | 关闭当前页面,跳转到应用内的某个页面 | `{ url: string }` |
|
|
129
|
-
|
|
130
|
-
### 消息 API
|
|
131
|
-
|
|
132
|
-
| 方法 | 说明 | 参数 |
|
|
133
|
-
|------|------|------|
|
|
134
|
-
| `postMessage` | 向原生端发送消息 | `{ data?: any }` |
|
|
135
|
-
| `getEnv` | 获取当前环境信息 | `callback: Function` |
|
|
136
|
-
|
|
137
|
-
### 环境属性
|
|
138
|
-
|
|
139
|
-
| 属性 | 类型 | 说明 |
|
|
140
|
-
|------|------|------|
|
|
141
|
-
| `environment.type` | `string` | 环境类型 |
|
|
142
|
-
| `environment.isWeixinMiniProgram` | `boolean` | 是否微信小程序 |
|
|
143
|
-
| `environment.isAppPlus` | `boolean` | 是否 APP Plus |
|
|
144
|
-
| `environment.isNvue` | `boolean` | 是否 NVUE |
|
|
145
|
-
| `environment.isUvue` | `boolean` | 是否 UVUE |
|
|
146
|
-
| `environment.isUniApp` | `boolean` | 是否 UniApp |
|
|
147
|
-
|
|
148
|
-
## 开发
|
|
149
|
-
|
|
150
|
-
### 安装依赖
|
|
151
|
-
|
|
152
|
-
```bash
|
|
153
|
-
npm install
|
|
154
|
-
```
|
|
155
|
-
|
|
156
|
-
### 开发模式
|
|
157
|
-
|
|
158
|
-
```bash
|
|
159
|
-
npm run dev
|
|
160
|
-
```
|
|
161
|
-
|
|
162
|
-
### 构建
|
|
163
|
-
|
|
164
|
-
```bash
|
|
165
|
-
npm run build
|
|
166
|
-
```
|
|
167
|
-
|
|
168
|
-
## 示例文件
|
|
169
|
-
|
|
170
|
-
项目包含以下示例文件:
|
|
171
|
-
|
|
172
|
-
- `example/test.html` - 完整的测试页面,包含所有功能演示
|
|
173
|
-
- `example/simple.html` - 简单示例,展示基础用法
|
|
174
|
-
- `test.html` - 快速测试页面
|
|
175
|
-
|
|
176
|
-
## 项目结构
|
|
177
|
-
|
|
178
|
-
```
|
|
179
|
-
src/
|
|
180
|
-
├── core/ # 核心模块
|
|
181
|
-
│ ├── environment.js # 环境检测
|
|
182
|
-
│ ├── messenger.js # 消息通信
|
|
183
|
-
│ └── bridge.js # 桥接初始化
|
|
184
|
-
├── platforms/ # 平台适配
|
|
185
|
-
│ ├── weixin.js # 微信小程序
|
|
186
|
-
│ └── app.js # APP 端
|
|
187
|
-
├── api/ # API 接口
|
|
188
|
-
│ ├── navigation.js # 导航 API
|
|
189
|
-
│ └── message.js # 消息 API
|
|
190
|
-
├── index.js # 主入口
|
|
191
|
-
└── index.d.ts # 类型定义
|
|
192
|
-
```
|
|
193
|
-
|
|
194
|
-
## 兼容性
|
|
195
|
-
|
|
196
|
-
- 微信小程序 WebView
|
|
197
|
-
- UniApp APP 端 (Android/iOS)
|
|
198
|
-
- H5+ 环境
|
|
199
|
-
- NVUE 页面
|
|
200
|
-
- UVUE 页面 (UniApp X)
|
|
201
|
-
|
|
202
|
-
## License
|
|
203
|
-
|
|
204
|
-
MIT
|
|
205
|
-
|
|
206
|
-
### NPM/ES Module 使用
|
|
207
|
-
|
|
208
|
-
```javascript
|
|
209
|
-
// 安装
|
|
210
|
-
npm install qsh-webview-sdk
|
|
211
|
-
|
|
212
|
-
// 在项目中导入
|
|
213
|
-
import
|
|
214
|
-
|
|
215
|
-
// 等待初始化完成
|
|
216
|
-
|
|
217
|
-
// 使用 SDK
|
|
218
|
-
|
|
219
|
-
url: '/pages/test/test'
|
|
220
|
-
});
|
|
221
|
-
});
|
|
222
|
-
|
|
223
|
-
// 或者手动初始化(如果需要控制初始化时机)
|
|
224
|
-
import
|
|
225
|
-
|
|
226
|
-
```
|
|
227
|
-
```
|
|
228
|
-
|
|
229
|
-
## 主要改动说明
|
|
230
|
-
|
|
231
|
-
1. **移除了 bridge.js 中的自动初始化**,避免在模块加载时过早执行
|
|
232
|
-
2. **在 index.js 中添加了智能初始化逻辑**,会检测 DOM 状态并在合适的时机初始化
|
|
233
|
-
3. **提供了 `uni.init()` 方法**,允许用户手动控制初始化时机
|
|
234
|
-
4. **保持了向后兼容性**,UMD 版本仍然可以正常工作
|
|
235
|
-
|
|
236
|
-
这样修改后,无论是通过 `<script>` 标签引入还是通过 npm 安装导入,SDK 都能正常工作。
|
|
237
|
-
|
|
238
|
-
需要我帮您实际修改这些文件吗?
|
|
1
|
+
# UniApp WebView SDK
|
|
2
|
+
|
|
3
|
+
一个重构后的 UniApp WebView SDK,支持微信小程序和 APP 端的 WebView 与原生端通信。
|
|
4
|
+
|
|
5
|
+
## 特性
|
|
6
|
+
|
|
7
|
+
- ✅ 支持微信小程序 WebView
|
|
8
|
+
- ✅ 支持 APP 端 (Plus/NVUE/UVUE)
|
|
9
|
+
- ✅ 模块化架构,易于维护
|
|
10
|
+
- ✅ TypeScript 类型支持
|
|
11
|
+
- ✅ UMD 和 ESM 双格式输出
|
|
12
|
+
- ✅ 自动环境检测
|
|
13
|
+
|
|
14
|
+
## 安装
|
|
15
|
+
|
|
16
|
+
### NPM 安装
|
|
17
|
+
|
|
18
|
+
```bash
|
|
19
|
+
npm install qsh-webview-sdk
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
### CDN 引入
|
|
23
|
+
|
|
24
|
+
```html
|
|
25
|
+
<script src="path/to/uni-webview.umd.js"></script>
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
## 使用方法
|
|
29
|
+
|
|
30
|
+
### 在 HTML 中引入
|
|
31
|
+
|
|
32
|
+
```html
|
|
33
|
+
<!-- 微信小程序环境(可选)-->
|
|
34
|
+
<script type="text/javascript">
|
|
35
|
+
if (/miniProgram/i.test(navigator.userAgent) && /micromessenger/i.test(navigator.userAgent)) {
|
|
36
|
+
document.write('<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"><\/script>');
|
|
37
|
+
}
|
|
38
|
+
</script>
|
|
39
|
+
|
|
40
|
+
<!-- 引入 UniApp WebView SDK -->
|
|
41
|
+
<script type="text/javascript" src="path/to/uni-webview.umd.js"></script>
|
|
42
|
+
```
|
|
43
|
+
|
|
44
|
+
### 基础使用
|
|
45
|
+
|
|
46
|
+
```javascript
|
|
47
|
+
// 等待 SDK 准备就绪
|
|
48
|
+
document.addEventListener('UniAppJSBridgeReady', function() {
|
|
49
|
+
console.log('SDK 已准备就绪');
|
|
50
|
+
});
|
|
51
|
+
|
|
52
|
+
// 或使用 Promise
|
|
53
|
+
qsh.ready().then(() => {
|
|
54
|
+
console.log('SDK 已准备就绪');
|
|
55
|
+
});
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
### 导航功能
|
|
59
|
+
|
|
60
|
+
```javascript
|
|
61
|
+
// 跳转到新页面
|
|
62
|
+
qsh.navigateTo({
|
|
63
|
+
url: '/pages/detail/detail?id=1'
|
|
64
|
+
});
|
|
65
|
+
|
|
66
|
+
// 返回上一页
|
|
67
|
+
qsh.navigateBack({
|
|
68
|
+
delta: 1
|
|
69
|
+
});
|
|
70
|
+
|
|
71
|
+
// 切换 Tab
|
|
72
|
+
qsh.switchTab({
|
|
73
|
+
url: '/pages/home/home'
|
|
74
|
+
});
|
|
75
|
+
|
|
76
|
+
// 重启应用
|
|
77
|
+
qsh.reLaunch({
|
|
78
|
+
url: '/pages/index/index'
|
|
79
|
+
});
|
|
80
|
+
|
|
81
|
+
// 重定向
|
|
82
|
+
qsh.redirectTo({
|
|
83
|
+
url: '/pages/login/login'
|
|
84
|
+
});
|
|
85
|
+
```
|
|
86
|
+
|
|
87
|
+
### 消息通信
|
|
88
|
+
|
|
89
|
+
```javascript
|
|
90
|
+
// 发送消息到原生端
|
|
91
|
+
qsh.postMessage({
|
|
92
|
+
data: {
|
|
93
|
+
action: 'share',
|
|
94
|
+
title: '分享标题',
|
|
95
|
+
content: '分享内容'
|
|
96
|
+
}
|
|
97
|
+
});
|
|
98
|
+
|
|
99
|
+
// 获取环境信息
|
|
100
|
+
qsh.getEnv(function(result) {
|
|
101
|
+
console.log('环境信息:', result);
|
|
102
|
+
// result: { miniprogram: true, weixin: true }
|
|
103
|
+
// 或 { app: true, plus: true } 或 { h5: true }
|
|
104
|
+
});
|
|
105
|
+
```
|
|
106
|
+
|
|
107
|
+
### 环境检测
|
|
108
|
+
|
|
109
|
+
```javascript
|
|
110
|
+
// 获取当前环境信息
|
|
111
|
+
const env = qsh.environment;
|
|
112
|
+
|
|
113
|
+
console.log('环境类型:', env.type); // 'weixin' | 'plus' | 'nvue' | 'uvue' | 'h5'
|
|
114
|
+
console.log('是否微信小程序:', env.isWeixinMiniProgram);
|
|
115
|
+
console.log('是否 APP:', env.isAppPlus);
|
|
116
|
+
```
|
|
117
|
+
|
|
118
|
+
## API 文档
|
|
119
|
+
|
|
120
|
+
### 导航 API
|
|
121
|
+
|
|
122
|
+
| 方法 | 说明 | 参数 |
|
|
123
|
+
|------|------|------|
|
|
124
|
+
| `navigateTo` | 保留当前页面,跳转到应用内的某个页面 | `{ url: string }` |
|
|
125
|
+
| `navigateBack` | 关闭当前页面,返回上一页面或多级页面 | `{ delta?: number }` |
|
|
126
|
+
| `switchTab` | 跳转到 tabBar 页面 | `{ url: string }` |
|
|
127
|
+
| `reLaunch` | 关闭所有页面,打开到应用内的某个页面 | `{ url: string }` |
|
|
128
|
+
| `redirectTo` | 关闭当前页面,跳转到应用内的某个页面 | `{ url: string }` |
|
|
129
|
+
|
|
130
|
+
### 消息 API
|
|
131
|
+
|
|
132
|
+
| 方法 | 说明 | 参数 |
|
|
133
|
+
|------|------|------|
|
|
134
|
+
| `postMessage` | 向原生端发送消息 | `{ data?: any }` |
|
|
135
|
+
| `getEnv` | 获取当前环境信息 | `callback: Function` |
|
|
136
|
+
|
|
137
|
+
### 环境属性
|
|
138
|
+
|
|
139
|
+
| 属性 | 类型 | 说明 |
|
|
140
|
+
|------|------|------|
|
|
141
|
+
| `environment.type` | `string` | 环境类型 |
|
|
142
|
+
| `environment.isWeixinMiniProgram` | `boolean` | 是否微信小程序 |
|
|
143
|
+
| `environment.isAppPlus` | `boolean` | 是否 APP Plus |
|
|
144
|
+
| `environment.isNvue` | `boolean` | 是否 NVUE |
|
|
145
|
+
| `environment.isUvue` | `boolean` | 是否 UVUE |
|
|
146
|
+
| `environment.isUniApp` | `boolean` | 是否 UniApp |
|
|
147
|
+
|
|
148
|
+
## 开发
|
|
149
|
+
|
|
150
|
+
### 安装依赖
|
|
151
|
+
|
|
152
|
+
```bash
|
|
153
|
+
npm install
|
|
154
|
+
```
|
|
155
|
+
|
|
156
|
+
### 开发模式
|
|
157
|
+
|
|
158
|
+
```bash
|
|
159
|
+
npm run dev
|
|
160
|
+
```
|
|
161
|
+
|
|
162
|
+
### 构建
|
|
163
|
+
|
|
164
|
+
```bash
|
|
165
|
+
npm run build
|
|
166
|
+
```
|
|
167
|
+
|
|
168
|
+
## 示例文件
|
|
169
|
+
|
|
170
|
+
项目包含以下示例文件:
|
|
171
|
+
|
|
172
|
+
- `example/test.html` - 完整的测试页面,包含所有功能演示
|
|
173
|
+
- `example/simple.html` - 简单示例,展示基础用法
|
|
174
|
+
- `test.html` - 快速测试页面
|
|
175
|
+
|
|
176
|
+
## 项目结构
|
|
177
|
+
|
|
178
|
+
```
|
|
179
|
+
src/
|
|
180
|
+
├── core/ # 核心模块
|
|
181
|
+
│ ├── environment.js # 环境检测
|
|
182
|
+
│ ├── messenger.js # 消息通信
|
|
183
|
+
│ └── bridge.js # 桥接初始化
|
|
184
|
+
├── platforms/ # 平台适配
|
|
185
|
+
│ ├── weixin.js # 微信小程序
|
|
186
|
+
│ └── app.js # APP 端
|
|
187
|
+
├── api/ # API 接口
|
|
188
|
+
│ ├── navigation.js # 导航 API
|
|
189
|
+
│ └── message.js # 消息 API
|
|
190
|
+
├── index.js # 主入口
|
|
191
|
+
└── index.d.ts # 类型定义
|
|
192
|
+
```
|
|
193
|
+
|
|
194
|
+
## 兼容性
|
|
195
|
+
|
|
196
|
+
- 微信小程序 WebView
|
|
197
|
+
- UniApp APP 端 (Android/iOS)
|
|
198
|
+
- H5+ 环境
|
|
199
|
+
- NVUE 页面
|
|
200
|
+
- UVUE 页面 (UniApp X)
|
|
201
|
+
|
|
202
|
+
## License
|
|
203
|
+
|
|
204
|
+
MIT
|
|
205
|
+
|
|
206
|
+
### NPM/ES Module 使用
|
|
207
|
+
|
|
208
|
+
```javascript
|
|
209
|
+
// 安装
|
|
210
|
+
npm install qsh-webview-sdk
|
|
211
|
+
|
|
212
|
+
// 在项目中导入
|
|
213
|
+
import qsh from 'qsh-webview-sdk';
|
|
214
|
+
|
|
215
|
+
// 等待初始化完成
|
|
216
|
+
qsh.ready().then(() => {
|
|
217
|
+
// 使用 SDK
|
|
218
|
+
qsh.navigateTo({
|
|
219
|
+
url: '/pages/test/test'
|
|
220
|
+
});
|
|
221
|
+
});
|
|
222
|
+
|
|
223
|
+
// 或者手动初始化(如果需要控制初始化时机)
|
|
224
|
+
import qsh from 'qsh-webview-sdk';
|
|
225
|
+
qsh.init(); // 手动初始化
|
|
226
|
+
```
|
|
227
|
+
```
|