自己怎么建网站,站设计培训课程,成都住房和城乡建设厅网站首页,东莞网站推广运营公司在移动应用开发中#xff0c;内嵌 H5 页面或与外部网页交互是常见需求。UniApp 作为跨平台框架#xff0c;提供了灵活的方式实现 App 与 H5 的跳转和双向通信。本文将详细讲解实现方法#xff0c;并提供可直接复用的代码示例。 文章目录 一、 App 内嵌 H5 页面#xff08;使…在移动应用开发中内嵌 H5 页面或与外部网页交互是常见需求。UniApp 作为跨平台框架提供了灵活的方式实现 App 与 H5 的跳转和双向通信。本文将详细讲解实现方法并提供可直接复用的代码示例。 文章目录 一、 App 内嵌 H5 页面使用 web-view 组件二、 App 跳转外部浏览器打开 H5三、App 与 H5 的双向通信四、注意事项和常见问题五、完整代码示例六、总结 一、 App 内嵌 H5 页面使用 web-view 组件
1.核心场景
在 App 内直接显示第三方活动页、帮助文档等。保持应用内导航体验避免跳转外部浏览器。
2.实现步骤 1创建 web-view 页面 在 UniApp 项目中新建页面 pages/webview/webview.vue
templateview classwebview-container// 全屏加载H5页面web-viewidmy-webview:srch5UrlmessagehandleH5Message/web-view/view
/templatescript setup
import { ref } from vue;const h5Url ref();onLoad((options) {// 接收跳转时传递的 URL 参数if(options.url){h5Url.value decodeURIComponent(options.url);uni.setNavigationBarTitle({ title: options.title || 加载中...});} else{uni.showToast({ title: 页面参数错误, icon: none });setTimeout(() uni.navigateBack(), 1500);}
});// 接收 H5 页面发送的消息
const handleH5Message (e) {console.log(收到 H5 消息, e.detail.data);// 示例根据消息关闭页面if(e.detail.data.action close) {uni.navigateBack();}
}
/script2跳转到 H5 页面 在需要跳转的地方调用
// 示例在按钮点击事件中跳转
const openH5Page () {const targetUrl https://www.example.com/h5-page;uni.navigateTo({url: /pages/webview/webview?url${encodeURIComponent(targetUrl)}title活动页})
}二、 App 跳转外部浏览器打开 H5
1.核心场景
用户协议、隐私政策等需脱离应用环境的页面调用第三方支付、地图等外部服务
2.实现代码
const openExternalBrowser (url) {// 判断平台App 端使用 plus.runtime, H5 端使用 window.openconst platform uni.getSystemInfoSync().platformif(platform android || platform ios){plus.runtime.openURL(url);} else {window.open(url, _blank);}
}// 调用示例
openExternalBrowser(https://www.example.com/external-page);三、App 与 H5 的双向通信
1. H5 向 App 发送消息 1H5 页面代码 在 H5 页面中通过 uni-postMessage 发送消息
!DOCTYPE html
html
bodybutton onclicksendMessageToApp() 发送消息给 APP/buttonscriptfunction sendMessageToApp() {// 发送消息给 UniAppuni.postMessage({data: {action: close,message: 用户点击了关闭按钮}})}/script
/body
/html2UniApp 接收消息 在 web-view 组件中监听 message 事件
web-view:srch5UrlmessagehandleH5Message
/web-view2. App 向 H5 发送消息 1UniApp 调用 H5 方法 通过 evalJS 执行 H5 页面的代码
// 获取 web-view 上下文需指定 web-view 的 id
const webViewContext uni.createWebViewContext(my-webview);// 调用 H5 页面中的函数
const sendMessageToH5 () {webViewContext.evalJS(handleAppMessage(Hello from App!))
}2H5 页面接收消息 在 H5 页面中定义全局函数
script// 供 App 调用的函数function handleAppMessage(msg){alert(收到 APP 消息 msg)}
/script四、注意事项和常见问题
1.跨域问题H5端
问题H5 页面与 UniApp 服务域名不同时可能触发跨域限制。解决方案 1.配置 H5 服务端支持 CORS 2.本地开发时在 manifest.json 中设置代理
{h5: {devServer: {proxy: {/api: {target: https://api.example.com,changeOrigin: true}}}}
}2.微信小程序特殊处理
配置域名白名单在微信公众平台设置 request 合法域名和 web-view 业务域名强制 HTTPS所有 H5 链接必须使用 HTTPS
3.页面返回逻辑 处理 Android 返回键和导航栏返回按钮
// 监听 Android 返回键
uni.onBackPress(() {uni.showModel({title: 提示,content: 确定要离开当前页面吗,success: (res) {if(res.confirm){uni.navigateBack();}}});return true; // 阻止默认返回行为
})五、完整代码示例
1. UniApp 项目结构
src/├── pages/│ └── webview/│ └── webview.vue # web-view 容器页面└── utils/└── bridge.js # 封装通信工具2.通信工具封装bridge.js
// 封装通信方法
export const H5Bridge {// 发送消息到 H5sendToH5: (message) {const webViewContext uni.createWebViewContext(h5-container);webViewContext.evalJS(handleAppMessage(${JSON.stringify(message)}))},// 接收 H5 消息onH5Message: (callback) {uni.$on(h5-message, callback);}
}六、总结
通过 web-view 组件和 uni.postMessage/evalJS, UniApp 实现了 App 与 H5 页面的无缝跳转和双向通信。关键点总结
内嵌 H5保持应用内体验适合常规内容展示外部跳转适合需要调用系统能力的场景如支付。通信机制通过消息事件和 JS 执行实现双向交互
