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

2019-10-11 admin

在微信小程序和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

}

[转载]原文链接:https://segmentfault.com/a/1190000020654954

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-77155.html

文章标题:在微信小程序和APP中嵌入H5时,如何交互?

相关文章
js性能优化 如何更快速加载你的JavaScript页面
确保代码尽量简洁 不要什么都依赖JavaScript。不要编写重复性的脚本。要把JavaScript当作糖果工具,只是起到美化作用。别给你的网站添加大量的JavaScript代码。只有必要的时候用一下。只有确实能改善用户体验的时候用一下。 ...
2015-11-12
请前往任务中心完善资料即可激活会员
登录后,点击右上角的用户名,在下拉菜单中可以进去“我的任务” 注册自动激活,本站没有VIP!没有充值!没有推广任务等等 回复即可下载 ...
2015-11-18
Android中Okhttp3实现上传多张图片同时传递参数
之前上传图片都是直接将图片转化为io流传给服务器,没有用框架传图片。 最近做项目,打算换个方法上传图片。 Android发展到现在,Okhttp显得越来越重要,所以,这次我选择用Okhttp上传图片。 Okhttp目前已经更新到Okhttp...
2017-03-17
v-charts | 饿了么团队开源的基于 Vue 和 ECharts 的图表工具
在使用echarts生成图表时,经常需要做繁琐的数据类型转化、修改复杂的配置项,v-charts的出现正是为了解决这个 痛点。基于Vue2.0和echarts封装的v-charts图表组件,只需要统一提供一种对前后端都友好的数据格式 设置简...
2018-05-24
JavaScript实现PC手机端和嵌入式滑动拼图验证码三种效果
PC和手机端网站滑动拼图验证码效果源码,同时包涵了弹出式Demo,使用ajax形式提交二次验证码所需的验证结果值,嵌入式Demo,使用表单形式提交二次验证所需的验证结果值,移动端手动实现弹出式Demo三种效果 首先要确认前端使用页面,比如...
2017-03-17
国内外html5游戏引擎排行
一个好的HTML5游戏引擎,能够大大简化游戏的开发实现。 排名列表: Construct 2 ImpactJS EaselJS pixi.js Phaser GameMaker Three.js PlayCanvas Turbulenz ...
2015-11-12
Vue获取DOM元素样式和样式更改示例
在 vue 中用 document 获取 dom 节点进行节点样式更改的时候有可能会出现 ‘style’ is not definde的错误,这时候可以在 mounted 里用 $refs 来获取样式,并进行更改: &lt;template...
2017-03-13
详解HTML5游戏玩家流失原因
对任何类型的电子游戏来说,玩家流失都是一个无法回避的问题。玩家为什么离开游戏?近日,HTML5游戏设定师纳森·洛维托(Nathan Lovato)在游戏开发者网站Gamasutra撰写文章,解读了玩家离开游戏的16个理由。 HTML5游戏 ...
2015-11-12
YouTube正式默认使用HTML5视频播放器
YouTube视频网站现在默认使用HTML5播放器,这意味着更好的性能、 稳定性、 电池寿命和甚至是更好的安全性。现在用户通过Chrome、IE 11、Safari 8和Beta版本的Firefox进行浏览的时候都默认使用HTML5视频播放...
2015-11-12
jsdom 中文文档(纯翻译)
jsdom是一个纯粹由 javascript 实现的一系列 web标准,特别是 WHATWG 组织制定的DOM和 HTML 标准,用于在 nodejs 中使用。大体上来说,该项目的目标是模拟足够的Web浏览器子集,以便用于测试和挖掘真实世界...
2018-05-14
回到顶部