uni 在app中引入h5页面（uni编写）

关于在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>

uni 在app中引入h5页面（uni编写）相关推荐

客户端相关知识学习（一）之混合开发，为什么要在App中使用H5页面以及应用场景、注意事项...
混合开发随着移动互联网的高速发展,常规的开发速度已经渐渐不能满足市场需求.原生H5混合开发应运而生,目前,市场上许多主流应用都有用到混合开发,例如支付宝.美团等.下面,结合我本人的开发经验,简单谈一 ...
app 中嵌入H5页面，H5跳转H5页面的跳转实现
app 中嵌入H5页面,H5跳转H5页面的跳转实现模拟创建a标签,并将href给到a标签点击实现: 模拟创建a标签,并将href给到a标签点击实现: var a = document.createE ...
关于app内嵌h5页面调用百度地图定位问题，为什么定位不准呢？
关于app内嵌h5页面调用百度地图定位问题,为什么定位不准呢?以下为代码. 百度地图:里面有3种定位方式(a:浏览器定位,b:IP定位,c:定位SDK辅助定位),我选择第3种,是需要app那块添加些什 ...
app端内h5页面使用微信h5支付
app端内h5页面使用微信h5支付 app端内h5页面使用微信h5支付一.起初使用的方法二.解决方法三.最后 app端内h5页面使用微信h5支付一.起初使用的方法在对接支付宝支付的时候,我是 ...
app内嵌h5页面在ios手机端滑动卡顿的解决方法
app内嵌h5页面在ios手机端滑动卡顿的解决方法参考文章: (1)app内嵌h5页面在ios手机端滑动卡顿的解决方法 (2)https://www.cnblogs.com/1rookie/p/11 ...
如何在vue项目中引入html页面
在vue项目中引入html页面的两种方法第一种:/static/page.html 第二种:通过iframe嵌入第一种:/static/page.html 在static或public文件夹下,新 ...
html 中返回上一步页面,（移动端）在APP中嵌入H5网页，返回上一步返回APP菜单首页...
H5页面中:返回上一步固定写法(前端实现:使用vue框架的返回上一步语法即可): methods:{ backforward(){ this.$router.back(-1); // 返回上一步 }, ...
混合开发中，H5页面与原生app交互（方法互相调用与传参）
H5与原生app交互,需要WebViewJavascriptBridge,废话不多直接上代码,下面是项目中的封装bridge.js的全部代码(示例代码为vue) //iOS 交互声明 function ...
html5页面和app的区别,H5页面与APP区别何在
APP相信大家都非常熟悉,就是手机里经常安装的软件程序,它都需要经过下载安装的步骤才能打开产品进行操作.不过H5页面和APP却有比较大的区别,它不需要经过下载安装,直接能够在浏览器和微信等社交平台中打 ...

uni 在app中引入h5页面（uni编写）

关于在app中引入网页，使用的webview标签

uni 在app中引入h5页面（uni编写）相关推荐

最新文章

热门文章