本文主要是介绍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页面的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!