uniapp实现小程序和内嵌webView的互通

这篇具有很好参考价值的文章主要介绍了uniapp实现小程序和内嵌webView的互通。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

webView传递消息到小程序

1、首先在自己的vue H5项目中添加shops.html

不管是不是uni 的H5,都需要引入这个uni 的sdk

<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>
			<%= htmlWebpackPlugin.options.title %>
		</title>
		<!-- Open Graph data -->
		<!-- <meta property="og:title" content="Title Here" /> -->
		<!-- <meta property="og:url" content="http://www.example.com/" /> -->
		<!-- <meta property="og:image" content="http://example.com/image.jpg" /> -->
		<!-- <meta property="og:description" content="Description Here" /> -->
		<script>
			var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') || CSS
				.supports(
					'top: constant(a)'))
			document.write(
				'<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' +
				(coverSupport ? ', viewport-fit=cover' : '') + '" />')
		</script>
		<link rel="stylesheet" href="<%= BASE_URL %>static/index.<%= VUE_APP_INDEX_CSS_HASH %>.css" />
	</head>
	<body>
		<noscript>
			<strong>Please enable JavaScript to continue.</strong>
		</noscript>
		<div id="app"></div>
		<!-- built files will be auto injected -->
	</body>
	<script type="text/javascript">
		var userAgent = navigator.userAgent;
		if (userAgent.indexOf('AlipayClient') > -1) {
			// 支付宝小程序的 JS-SDK 防止 404 需要动态加载,如果不需要兼容支付宝小程序,则无需引用此 JS 文件。
			document.writeln('<script src="https://appx/web-view.min.js"' + '>' + '<' + '/' + 'script>');
		}
	</script>
	<!-- 这个js需要放到自己的服务器,或
者OSS等地方 -->
	<script type="text/javascript" src="https://xxxx/js/uni.webview.1.5.2.js"></script>
	<script type="text/javascript">
		// 待触发 `UniAppJSBridgeReady` 事件后,即可调用 uni 的 API。
		document.addEventListener('UniAppJSBridgeReady', function() {

			uni.webView.getEnv(function(res) {
				console.log('当前环境:' + JSON.stringify(res));
			});
		});
	</script>
</html>

2、在manifest.json中打开Web配置,添加shops.html在index.html模板路径中

uniapp 微信小程序 vwebview 互通,uni-app,小程序,html5,javascript

修改了默认模版,需要重新跑一下项目,跑完之后若log出当前环境,则说明uni引入成功

uniapp 微信小程序 vwebview 互通,uni-app,小程序,html5,javascript

3、在H5中需要向小程序传递消息的地方添加方法(以支付宝小程序为例)

if ((navigator.userAgent.toLowerCase().indexOf('alipayclient') > -1) && (navigator.userAgent.toLowerCase().indexOf('miniprogram') > -1) ) {
    // 网页向小程序发送消息
	uni.webView.postMessage({
	    data: {
	        action: '传递的消息',
	    },
	})
}

4、传递完消息,就需要在小程序中去接收消息了

在uniapp小程序代码中添加:在webView页面we-view 中添加 @message="message",在methods中添加方法:message方法,参考示例:

<template>
	<view>
		<!-- #ifdef MP-ALIPAY -->
		<web-view :src="url" @message="message"></web-view>
		<!-- #endIf -->
		<!-- #ifdef H5 -->
		<web-view :src="url"></web-view>
		<!-- #endIf -->
	</view>
</template>
<script>
	export default {
		data() {
			return {
				url: '这个是你上面的那个H5的url'
			}
		},
		methods: {
			message(e) {
				this.$utils.toastDebug("进入了message" + e.detail.data)
			}
		}
	}
</script>
<style>
</style>

到这里,H5向小程序传递消息的逻辑就完成了

小程序向H5传递参数

直接在url链接后面写上参数,例如:https://baidu.com?test=valueTest,在H5页面的onLoad方法中获取传递的参数, 这种方式就不多说了,人人都会(无基础的可以自行查找)文章来源地址https://www.toymoban.com/news/detail-836495.html

到了这里,关于uniapp实现小程序和内嵌webView的互通的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序webview内嵌H5跳转页面后没有返回按钮完美解决方案

    简单的讲就是我们可以在小程序内放置一个web-view组件来链接我们的HTML页面了。 但是点击跳转页面的时候。页面左上角没有!!返回按钮!!导致回不去了,这不是搞笑的吗。 看了下其他的小程序,发现如果是两个小程序页面跳转的话,第二个页面的左上角是会有返回按钮

    2024年02月08日
    浏览(64)
  • uniapp 微信小程序 内嵌H5网页办法

    如图所示 1.新建webView页面 2.跳转页面

    2024年01月20日
    浏览(65)
  • uniapp 微信小程序webview 踩坑

    微信小程序的存在许多功能上的限制和约束,有些情况不得不去使用webview进行开发实现需求,比如 原生无法满足(例如某团队维护SDK 只提供了WEB端jsSDK,且不维护小程序SDK) H5可以同时适用多端(适用范围更广) H5可以弥补小程序部分欠缺 微信生态有部分限制(包大小,设

    2024年02月10日
    浏览(48)
  • uniapp webview H5跳转微信小程序

    第一步:manifest.json 第二步:index.html 第三步 H5跳转微信小程序代码

    2024年02月10日
    浏览(55)
  • 微信小程序webview中嵌套uniapp时的文件下载问题

    前往闪闪の小窝以获得更好的 阅读 和 评论 体验 这个标题就已经够抽象了吧 本来用微信小程序的web-view去嵌套h5已经因为微信的种种限制(微信不希望你把微信小程序当做一个浏览器来用,它就是不想担责)导致微信登录、文件下载等种种微信特色问题已经很烦了,结果我们

    2024年04月12日
    浏览(47)
  • uniapp中微信小程序和H5相互跳转及传参(webview)

    技术栈:uniapp-H5+uniapp-微信小程序(vue3+vite2+ts) 前言:在单位做项目的时候碰到一个需求,需要从微信小程序跳转到H5页面,这两个端都是使用uniapp编写的,查资料后决定使用webview来嵌入完成,然后考虑到还可能有参数(数据)需要传递,所以实现后记录一下。ps:以下代码

    2024年02月09日
    浏览(43)
  • 开发uniapp过程中对app、微信小程序与h5的webview调试

        因为在开发中使用到了webview,因为出现一些问题,所以需要对webview进行跟踪调试,但因为app,h5与微信小程序不一样,所以需要单独说一下。     一、H5     这个比较简单,因为都是在chrome,用F12就可以  二、对微信小程序       因为普通的uniapp页面上都能通过F12可以

    2024年02月11日
    浏览(64)
  • uniapp vue3中使用webview在微信小程序中实现双向通讯

    直接上图,注意事项是这里 官网链接: https://uniapp.dcloud.net.cn/component/web-view.html 传递方法的话好像只能通过url来传,其它方式不支持,,,我这个参数没做处理,用的话记得把参数做一下处理 也就是说传递数据之后需要 uni.redirectTo({ url: \\\'/pages/testFabric/index\\\' }) 特定时机,当然用

    2024年04月13日
    浏览(45)
  • 微信小程序内嵌H5页面实现微信支付

    背景: 在微信H5页面已经实现了微信JSAPI的网页支付,老板要求把整个业务线快速转移到微信小程序中,作为懒惰的程序员来说,直接把页面嵌套到小程序不就行了。说干就干,在小程序中设置好基本信息后,一预览居然成功了,一切看来是那么顺利,可到了系统的支付环节

    2024年02月11日
    浏览(55)
  • 微信小程序内嵌h5页面,实现动态设置顶部标题的功能

    一、需求描述 使用HBuilder X作为开发工具,vue作为开发语言,开发微信小程序。微信小程序页面内嵌h5页面,即web-view/web-view标签。通过设置不同url连接地址,设置不同的标题。 二、失败做法 页面A嵌入h5页面,需要给A设置标题。最开始写法是在lonload页面内,使用如下语句实现

    2024年02月04日
    浏览(65)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包