uniapp 引入h5页面

本文主要是介绍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>

这篇关于uniapp 引入h5页面的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---