在微信小程序和APP中嵌入H5时,如何交互?

2019-10-11

在微信小程序和APP中使用H5时,如何做事件交互?


微信小程序使用web view嵌入H5,使用方式见微信文档使用中要注意的:1. <web-view>标签嵌入式全屏的,基本上就不能再在页面上加其他的功能了2. 文档中提到的bindmessage属性,很鸡肋😓:文档上说会在特定时机(小程序后退、组件销毁、分享)触发并收到消息。 实际业务上的交互只能靠wx.miniProgram.navigateTo带着交互参数跳转某个页面实现


H5端代码

// 引入微信jssdk

<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>

// 交互方法,例如点击了按钮

// 判断当前处于什么环境,根据不同环境做对应的处理

if(window.\_\_wxjs\_environment === 'miniprogram'){

    // 当前是微信小程序环境

    wx.miniProgram.navigateTo({url: '/XXX/XXXX?id=1'})

} else if (isAndroidApp()){

    // 其中"app"是客户端注入的实例,可自定义;“myMethod”是用来交互的方法,不同事件可,自定义。

    app.myMethod({id: 1})

} else if (isiOSApp()){

    // “myMethod”是用来交互的方法,不同事件,可自定义。其中参数如果为空时,还是要传个null

    window.webkit.messageHandlers.myMethod.postMessage({id: 1});

}

判断当前是否是Android客户端打开

function isAndroidApp() {

    var ue = navigator.userAgent

    // XXX是和APP的协议名称

    return (ue.match(/XXXX\\/Android/i) == "XXXX/Android") ? true : false

}

判断当前是否是Android客户端打开

function isiOSApp() {

    var ue = navigator.userAgent

    // XXX是和APP的协议名称

    return (ue.match(/XXXX\\/iOS/i) == "XXXX/iOS") ? true : false

}
原文链接:segmentfault.com

上一篇:ES6 之 Class 的基本语法和继承
下一篇:《高性能网站建设指南》规则7、8—避免CSS表达式、使用外部JavaScript和CSS
相关教程
关注微信

扫码加入 JavaScript 社区

相关文章

首次访问,需要验证
微信扫码,关注即可
(仅需验证一次)

欢迎加入 JavaScript 社区

号内回复关键字:

回到顶部