# web-view

更新时间：2025-02-20 11:00:36

基础库1.2.0开始支持,低版本需做兼容处理

开发者工具1.22.0开始支持

承载网页的容器。会自动铺满整个小程序页面

# 属性

属性	类型	必填	说明
src	string	否	webview 指向网页的链接
bindmessage	(e: { detail: { data: Record<string, unknown> } } & Event) => void	否	网页向小程序 postMessage 时，会在特定时机（小程序后退、组件销毁、分享）触发并收到消息。e.detail = { data }，data是多次 postMessage 的参数组成的数组
bindload	(e: { detail: { src: string } } & Event) => void	否	网页加载成功时候触发此事件。e.detail = { src }
binderror	(e: { detail: { src: string } } & Event) => void	否	网页加载失败的时候触发此事件。e.detail = { src }

网页中可以使用注入的 ks 对象调用一些 api。sdk 由小程序框架在每个页面完成注入，开发者无需手动引入 js 文件。

路由相关 api 和小程序 api 的使用方式基本保持一致。其中 url 参数只能使用绝对路径，无法使用相对路径。

api	说明	示例
navigateTo	新开一个页面，打开小程序页面	`ks.navigateTo({url:'pages/index/index'})`
redirectTo	打开小程序页面，替换现有页面	`ks.redirectTo({url:'pages/index/index'})`
switchTab	跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面	`ks.switchTab({url:'pages/index/index'})`
navigateBack	关闭当前页面，返回上一个页面	`ks.navigateBack()`
postMessage	向小程序发送消息，会在以下特定时机触发组件的message事件：小程序后退、组件销毁、分享	`ks.postMessage({data:'通信'})`
getClipboardData	获取剪贴板数据	`ks.getClipboardData({success,fail,complete})`
setClipboardData	设置剪贴板数据	`ks.setClipboardData({data,success,fail,complete})`

从快手9.3.10开始，可以通过判断 userAgent 中包含 miniProgram 字样来判断小程序 web-view 环境。

代码示例

console.log(window.navigator.userAgent);

//"Mozilla/5.0... miniProgram/1.91.0..." 携带了 miniProgram字样和小程序基础库的版本号

Tip：webview url域名也需要配置到域名白名单