ARTICLE DETAIL

建站实战干货

来自一线的建站与推广经验沉淀,每一条都经过真实交付验证。

uniapp 引入h5页面

2026/9/23 15:01:41 拓冰建站 浏览量
uniapp 引入h5页面

如何在app中引入网页?通过使用webview 标签

  • uniapp 官网给出的webview使用方法:
    https://uniapp.dcloud.io/component/web-view
    但是给出的基本都是在app中使用原生html页面的方法和demo,但是用vue写的H5页面就不能正常使用,下面是解决方法:
第一步:在app项目中新建webview页面(src为你自己的网页地址)
<template><view><web-view :webview-styles="webviewStyles" src="https://uniapp.dcloud.io/static/web-view.html" @message="getMessage"></web-view></view>
</template><script>export default {data() {return {webviewStyles: {progress: {color: '#FF3333'}}}},methods: {getMessage(event) {console.log(event);uni.showModal({content: JSON.stringify(event.detail),});}}}
</script><style></style>
第二步:在你的H5页面引入 https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js 然后在你的H5页面进行使用,切记,使用里面的API一定要加上webView,例如(uni.webView.postMessage({});更多相关的API在官网里面自行查找,代码如下
<template><view class="w-full" style="background-color: #fafbfa;"><view @click = messageApp>点击发送消息</view></view>
</template><script>export default {data() {return {};},computed: {},onShow() {},methods: {messageApp(){uni.webView.postMessage({data: {data: '这是向app发送的消息',type: 'message'}});}}
};
</script><style></style>