uniapp实现小程序和内嵌webView的互通
webView传递消息到小程序
(图片来源网络,侵删)
1、首先在自己的vue H5项目中添加shops.html
不管是不是uni 的H5,都需要引入这个uni 的sdk
var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') || CSS .supports( 'top: constant(a)')) document.write( '') var userAgent = navigator.userAgent; if (userAgent.indexOf('AlipayClient') > -1) { // 支付宝小程序的 JS-SDK 防止 404 需要动态加载,如果不需要兼容支付宝小程序,则无需引用此 JS 文件。 document.writeln('' + ''); } // 待触发 `UniAppJSBridgeReady` 事件后,即可调用 uni 的 API。 document.addEventListener('UniAppJSBridgeReady', function() { uni.webView.getEnv(function(res) { console.log('当前环境:' + JSON.stringify(res)); }); });
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方法,参考示例:
export default { data() { return { url: '这个是你上面的那个H5的url' } }, methods: { message(e) { this.$utils.toastDebug("进入了message" + e.detail.data) } } }
到这里,H5向小程序传递消息的逻辑就完成了
小程序向H5传递参数
直接在url链接后面写上参数,例如:https://baidu.com?test=valueTest,在H5页面的onLoad方法中获取传递的参数, 这种方式就不多说了,人人都会(无基础的可以自行查找)
(图片来源网络,侵删)
文章版权声明:除非注明,否则均为主机测评原创文章,转载或复制请以超链接形式并注明出处。
还没有评论,来说两句吧...