如今很多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()
}
}
}