Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
erosXXX
uni-app
提交
1af5bd13
U
uni-app
项目概览
erosXXX
/
uni-app
与 Fork 源项目一致
Fork自
DCloud / uni-app
通知
1
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
U
uni-app
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
1af5bd13
编写于
10月 12, 2020
作者:
d-u-a
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
docs: update webview
上级
ccc9d103
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
155 addition
and
31 deletion
+155
-31
docs/component/web-view.md
docs/component/web-view.md
+155
-31
未找到文件。
docs/component/web-view.md
浏览文件 @
1af5bd13
...
...
@@ -136,35 +136,92 @@
在
`<web-view>`
加载的 HTML 中,添加以下代码:
```
html
<script
type=
"text/javascript"
>
var
userAgent
=
navigator
.
userAgent
;
if
(
userAgent
.
indexOf
(
'
AlipayClient
'
)
>
-
1
)
{
// 支付宝小程序的 JS-SDK 防止 404 需要动态加载,如果不需要兼容支付宝小程序,则无需引用此 JS 文件。
document
.
writeln
(
'
<script src="https://appx/web-view.min.js"
'
+
'
>
'
+
'
<
'
+
'
/
'
+
'
script>
'
);
}
else
if
(
/QQ/i
.
test
(
userAgent
)
&&
/miniProgram/i
.
test
(
userAgent
))
{
// QQ 小程序
document
.
write
(
'
<script type="text/javascript" src="https://qqq.gtimg.cn/miniprogram/webview_jssdk/qqjssdk-1.0.0.js"><
\
/script>
'
);
}
else
if
(
/miniProgram/i
.
test
(
userAgent
)
||
/MicroMessenger/i
.
test
(
userAgent
))
{
// 微信小程序 JS-SDK 如果不需要兼容微信小程序,则无需引用此 JS 文件。
document
.
write
(
'
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"><
\
/script>
'
);
}
else
if
(
/toutiaomicroapp/i
.
test
(
userAgent
))
{
// 字节跳动小程序 JS-SDK 如果不需要兼容字节跳动小程序,则无需引用此 JS 文件。
document
.
write
(
'
<script type="text/javascript" src="https://s3.pstatp.com/toutiao/tmajssdk/jssdk-1.0.1.js"><
\
/script>
'
);
}
else
if
(
/swan/i
.
test
(
userAgent
))
{
// 百度小程序 JS-SDK 如果不需要兼容百度小程序,则无需引用此 JS 文件。
document
.
write
(
'
<script type="text/javascript" src="https://b.bdstatic.com/searchbox/icms/searchbox/js/swan-2.0.18.js"><
\
/script>
'
);
}
if
(
!
/toutiaomicroapp/i
.
test
(
userAgent
))
{
document
.
querySelector
(
'
.post-message-section
'
).
style
.
visibility
=
'
visible
'
;
}
</script>
<!-- uni 的 SDK -->
<script
type=
"text/javascript"
src=
"https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"
></script>
```
待触发
`UniAppJSBridgeReady`
事件后,即可调用 uni 的 API。
```
html
<script>
document
.
addEventListener
(
'
UniAppJSBridgeReady
'
,
function
()
{
<!DOCTYPE html>
<html>
<head>
<meta
charset=
"utf-8"
/>
<meta
name=
"viewport"
content=
"width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"
/>
<title>
网络网页
</title>
<style
type=
"text/css"
>
.btn
{
display
:
block
;
margin
:
20px
auto
;
padding
:
5px
;
background-color
:
#007aff
;
border
:
0
;
color
:
#ffffff
;
height
:
40px
;
width
:
200px
;
}
.btn-red
{
background-color
:
#dd524d
;
}
.btn-yellow
{
background-color
:
#f0ad4e
;
}
.desc
{
padding
:
10px
;
color
:
#999999
;
}
.post-message-section
{
visibility
:
hidden
;
}
</style>
</head>
<body>
<p
class=
"desc"
>
web-view 组件加载网络 html 示例。点击下列按钮,跳转至其它页面。
</p>
<div
class=
"btn-list"
>
<button
class=
"btn"
type=
"button"
data-action=
"navigateTo"
>
navigateTo
</button>
<button
class=
"btn"
type=
"button"
data-action=
"redirectTo"
>
redirectTo
</button>
<button
class=
"btn"
type=
"button"
data-action=
"navigateBack"
>
navigateBack
</button>
<button
class=
"btn"
type=
"button"
data-action=
"reLaunch"
>
reLaunch
</button>
<button
class=
"btn"
type=
"button"
data-action=
"switchTab"
>
switchTab
</button>
</div>
<div
class=
"post-message-section"
>
<p
class=
"desc"
>
网页向应用发送消息,注意:小程序端应用会在此页面后退时接收到消息。
</p>
<div
class=
"btn-list"
>
<button
class=
"btn btn-red"
type=
"button"
id=
"postMessage"
>
postMessage
</button>
</div>
</div>
<script
type=
"text/javascript"
>
var
userAgent
=
navigator
.
userAgent
;
if
(
userAgent
.
indexOf
(
'
AlipayClient
'
)
>
-
1
)
{
// 支付宝小程序的 JS-SDK 防止 404 需要动态加载,如果不需要兼容支付宝小程序,则无需引用此 JS 文件。
document
.
writeln
(
'
<script src="https://appx/web-view.min.js"
'
+
'
>
'
+
'
<
'
+
'
/
'
+
'
script>
'
);
}
else
if
(
/QQ/i
.
test
(
userAgent
)
&&
/miniProgram/i
.
test
(
userAgent
))
{
// QQ 小程序
document
.
write
(
'
<script type="text/javascript" src="https://qqq.gtimg.cn/miniprogram/webview_jssdk/qqjssdk-1.0.0.js"><
\
/script>
'
);
}
else
if
(
/miniProgram/i
.
test
(
userAgent
)
&&
/micromessenger/i
.
test
(
userAgent
))
{
// 微信小程序 JS-SDK 如果不需要兼容微信小程序,则无需引用此 JS 文件。
document
.
write
(
'
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"><
\
/script>
'
);
}
else
if
(
/toutiaomicroapp/i
.
test
(
userAgent
))
{
// 头条小程序 JS-SDK 如果不需要兼容头条小程序,则无需引用此 JS 文件。
document
.
write
(
'
<script type="text/javascript" src="https://s3.pstatp.com/toutiao/tmajssdk/jssdk-1.0.1.js"><
\
/script>
'
);
}
else
if
(
/swan/i
.
test
(
userAgent
))
{
// 百度小程序 JS-SDK 如果不需要兼容百度小程序,则无需引用此 JS 文件。
document
.
write
(
'
<script type="text/javascript" src="https://b.bdstatic.com/searchbox/icms/searchbox/js/swan-2.0.18.js"><
\
/script>
'
);
}
else
if
(
/quickapp/i
.
test
(
userAgent
))
{
// quickapp
document
.
write
(
'
<script type="text/javascript" src="https://quickapp/jssdk.webview.min.js"><
\
/script>
'
);
}
if
(
!
/toutiaomicroapp/i
.
test
(
userAgent
))
{
document
.
querySelector
(
'
.post-message-section
'
).
style
.
visibility
=
'
visible
'
;
}
</script>
<!-- uni 的 SDK -->
<script
type=
"text/javascript"
src=
"https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"
></script>
<script
type=
"text/javascript"
>
// 待触发 `UniAppJSBridgeReady` 事件后,即可调用 uni 的 API。
document
.
addEventListener
(
'
UniAppJSBridgeReady
'
,
function
()
{
uni
.
postMessage
({
data
:
{
action
:
'
message
'
...
...
@@ -173,8 +230,47 @@
uni
.
getEnv
(
function
(
res
)
{
console
.
log
(
'
当前环境:
'
+
JSON
.
stringify
(
res
));
});
});
</script>
document
.
querySelector
(
'
.btn-list
'
).
addEventListener
(
'
click
'
,
function
(
evt
)
{
var
target
=
evt
.
target
;
if
(
target
.
tagName
===
'
BUTTON
'
)
{
var
action
=
target
.
getAttribute
(
'
data-action
'
);
switch
(
action
)
{
case
'
switchTab
'
:
uni
.
switchTab
({
url
:
'
/pages/tabBar/API/API
'
});
break
;
case
'
reLaunch
'
:
uni
.
reLaunch
({
url
:
'
/pages/tabBar/component/component
'
});
break
;
case
'
navigateBack
'
:
uni
.
navigateBack
({
delta
:
1
});
break
;
default
:
uni
[
action
]({
url
:
'
/pages/component/button/button
'
});
break
;
}
}
});
document
.
getElementById
(
'
postMessage
'
).
addEventListener
(
'
click
'
,
function
()
{
uni
.
postMessage
({
data
:
{
action
:
'
message
'
}
});
});
});
</script>
</body>
</html>
```
...
...
@@ -282,3 +378,31 @@ A:加载的 HTML 中是有 5+ 环境的,在 plusready 后调用即可。参
Q: web-view 加载 uni-app H5,内部跳转冲突如何解决
A:使用 uni.webView.navigateTo...
uni.webView.navigateTo 示例,注意uni sdk放到body下面
```
<!DOCTYPE html>
<html
lang=
"zh-CN"
>
<head>
...
</head>
<body>
<noscript>
<strong>
Please enable JavaScript to continue.
</strong>
</noscript>
<div
id=
"app"
></div>
<!-- built files will be auto injected -->
</body>
<!-- uni 的 SDK -->
<script
type=
"text/javascript"
src=
"https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"
></script>
<script>
document
.
addEventListener
(
'
UniAppJSBridgeReady
'
,
function
()
{
uni
.
webView
.
getEnv
(
function
(
res
)
{
console
.
log
(
'
当前环境:
'
+
JSON
.
stringify
(
res
));
});
// uni.webView.navigateTo(...)
});
</script>
</html>
```
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录