共计 955 个字符，预计需要花费 3 分钟才能阅读完成。
现在好多 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.webkit.messageHandlers.shareWX.postMessage(JSON.stringify(this.shareObj))
this.$loading.hide()
}
}
}
