跨境派

跨境派

跨境派,专注跨境行业新闻资讯、跨境电商知识分享!

当前位置:首页 > 卖家故事 > uniapp实现小程序和内嵌webView的互通

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

时间:2024-04-29 18:20:30 来源:网络cs 作者:亙句 栏目:卖家故事 阅读:

标签: 实现  程序 
阅读本书更多章节>>>>

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模板路径中

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

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.kjpai.cn/gushi/2024-04-29/163561.html,文章来源:网络cs,作者:亙句,版权归作者所有,如需转载请注明来源和作者,否则将追究法律责任!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。

文章评论