javascript

您所在的位置:网站首页 vue和原生app交互 javascript

javascript

2023-09-06 13:14| 来源: 网络整理| 查看: 265

现在好多APP都采用了Hybrid的开发模式,这种模式特别适合那些内容变动更新较大的APP,从而使得开发和日常维护过程变得集中式、更简短、更经济高效,不需要纯原生频繁发布。但有利肯定有弊咯,性能方面能稍微差一点,还有就是两者之间的交互问题。美团、爱奇艺、微信等知名移动应用,都是采用Hybrid App开发模式。Hybrid开发已成为未来的一种发展趋势。

1、原生APP与Vue交互

场景:原生的头部标题栏,内容为H5页面。现在需要在原生头部增加一个时间帅选功能,原生筛选好时间后调用H5的查询方法。

mounted () { /* 将nativeCallToSearch方法绑定到window下面,提供给外部调用 */ window.nativeCallToSearch = (res) => { this.nativeCallToSearch(res) } } methods () { /** * 原生时间筛选 * @param {string} searchDate 查询的时间 */ nativeCallToSearch (searchDate) { // do something... } }

2、Vue与原生APP交互

场景:H5页面中涉及分享功能(用H5来做分享坑太多),H5实现具体分享的内容,原生只负责分享操作。

methods () { /** * 分享微信好友 */ goWXFriend () { this.$loading.show() if (this.androidOrIos === 'android') { /* eslint-disable */ /* 安卓识别不了js对象 */ javascript: share.shareWX(this.shareObj.link, this.shareObj.linkTitle, this.shareObj.linkContent, this.shareObj.linkImgUrl) /* eslint-enable */ this.$loading.hide() } else if (this.androidOrIos === 'ios') { /* 将对象转为字符串 */ window.webkissageHandlers.shareWX.postMessage(JSON.stringify(this.shareObj)) this.$loading.hide() } } }


【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3