现在好多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()
}
}
}

Vue与原生APP的相互交互的更多相关文章

  1. vue 与原生app的对接交互(混合开发)

    小伙伴们在用vue开发h5项目特别是移动端的项目,很多都是打包后挂载在原生APP上的,那就少不了与原生交互了,我最近就是在坐这个,踩了一些坑,拿出来给大家分享下. 0.通过url传输数据:(一般是在入 ...

  2. iOS原生APP和H5交互-delegate和第三方

    一.原生代码中直接加载页面(拦截) 1.    具体案例 加载本地/网络HTML5作为功能介绍页 2.    代码示例 //本地 -(void)loadLocalPage:(UIWebView*)we ...

  3. 原生app与js交互 jsSDK设计

    var UA = window.navigator.userAgent.toLowerCase()var isIOS = UA && /iphone|ipad|ipod|ios/.te ...

  4. iOS原生App与H5页面交互笔记

    文/MikeZhangpy(简书作者)原文链接:http://www.jianshu.com/p/4ed3e5ed99c6著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”. 最近在做一个项 ...

  5. iOS原生APP与H5+JS交互////////////////////zzzz

    原生代码中直接加载页面 1.    具体案例 加载本地/网络HTML5作为功能介绍页 2.    代码示例 //本地 -(void)loadLocalPage:(UIWebView*)webView ...

  6. WebAPP与原生APP的交互设计区别

    WebAPP和原生APP同为移动端,很少有研究这两项的交互区别,最近公司做了一次从原生APP到WebAPP(HTML5 )的移植,故总结一下期间遇到的问题及不同点总结. 从使用场景上,WebAPP用户 ...

  7. Vue+原生App混合开发手记#1

    项目的大致需求就是做一个App,里面集成各种功能供用户使用,其中涉及到很多Vue的使用方法,单独总结太麻烦,所以通过这几篇笔记来梳理一下.原型图如下: 路由配置 主界面会用到一些原生App方法,比如验 ...

  8. h5 与原生 app 交互的原理

    现在移动端 web 应用,很多时候都需要与原生 app 进行交互.沟通(运行在 webview中),比如微信的 jssdk,通过 window.wx 对象调用一些原生 app 的功能.所以,这次就来捋 ...

  9. 客户端相关知识学习(二)之h5与原生app交互的原理

    前言 现在移动端 web 应用,很多时候都需要与原生 app 进行交互.沟通(运行在 webview中),比如微信的 jssdk,通过 window.wx 对象调用一些原生 app 的功能.所以,这次 ...

随机推荐

  1. 全网最详细的Linux命令系列-Screen远程会话命令

    screen 管理你的远程会话 你是不是经常需要 SSH 或者 telent 远程登录到 Linux 服务器?你是不是经常为一些长时间运行的任务而头疼,比如系统备份.ftp 传输等等.通常情况下我们都 ...

  2. Request库的安装与使用

    Request库的安装与使用 安装 pip install reqeusts Requests库的7个主要使用方法 requests.request() 构造一个请求,支撑以下各方法的基础方法 req ...

  3. istio-ServiceMesh解决方案

    istio-ServiceMesh解决方案 istio(1):ServiceMesh解决方案-k8s安装istio istio(2):流量管理-基于不同版本访问规则控制 istio(3):流量管理-基 ...

  4. sys.stdout.write和print和sys.stdout.flush

    1. 先看下官方文档 """ sys.stdout.write(string) Write string to stream. Returns the number of ...

  5. Cacti 安装插件

            Cacti本身可以以图形化界面显示出流量状态,cacti也可以安装插件,通过插件,cacti的功能被进一步强大:可以监控服务器状态:发送邮件通知:短信通知等.        0.88之 ...

  6. AJAX传输图片文件

    AJAX传输 例:const xhr = new XMLHttpRequest(); // 此方法因为状态改变被调用多次,实测执行三次(1->2->4) xhr.onreadystatec ...

  7. emmet笔记

    1.div.div${div$}*6 生成 <div class="div1">div1</div> <div class="div2&qu ...

  8. 【React Native】使用react-native-wechat 进行微信好友、微信朋友圈进行分享

    前提:微信平台注册,请自行百度.本篇主要是针对react native中使用react-native-wechat进行android端的分享. 1.Android版本安装配置方法 在android/s ...

  9. pikachu-文件包含漏洞(Files Inclusion)

    一.文件包含漏洞概述     在web后台开发中,程序员往往为了提高效率以及让代码看起来简洁,会使用"包含"函数功能.例如把一些功能函数都写进fuction.php中,之后当某个文 ...

  10. Maven 阿里云仓库地址

    https://maven.aliyun.com/mvn/view 一般使用聚合仓库(group),path是仓库地址.可点击右上角“使用指南”: 附   目前阿里云仓库的地址 https://mav ...