Vue与原生APP的相互交互
现在好多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的相互交互的更多相关文章
- vue 与原生app的对接交互(混合开发)
小伙伴们在用vue开发h5项目特别是移动端的项目,很多都是打包后挂载在原生APP上的,那就少不了与原生交互了,我最近就是在坐这个,踩了一些坑,拿出来给大家分享下. 0.通过url传输数据:(一般是在入 ...
- iOS原生APP和H5交互-delegate和第三方
一.原生代码中直接加载页面(拦截) 1. 具体案例 加载本地/网络HTML5作为功能介绍页 2. 代码示例 //本地 -(void)loadLocalPage:(UIWebView*)we ...
- 原生app与js交互 jsSDK设计
var UA = window.navigator.userAgent.toLowerCase()var isIOS = UA && /iphone|ipad|ipod|ios/.te ...
- iOS原生App与H5页面交互笔记
文/MikeZhangpy(简书作者)原文链接:http://www.jianshu.com/p/4ed3e5ed99c6著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”. 最近在做一个项 ...
- iOS原生APP与H5+JS交互////////////////////zzzz
原生代码中直接加载页面 1. 具体案例 加载本地/网络HTML5作为功能介绍页 2. 代码示例 //本地 -(void)loadLocalPage:(UIWebView*)webView ...
- WebAPP与原生APP的交互设计区别
WebAPP和原生APP同为移动端,很少有研究这两项的交互区别,最近公司做了一次从原生APP到WebAPP(HTML5 )的移植,故总结一下期间遇到的问题及不同点总结. 从使用场景上,WebAPP用户 ...
- Vue+原生App混合开发手记#1
项目的大致需求就是做一个App,里面集成各种功能供用户使用,其中涉及到很多Vue的使用方法,单独总结太麻烦,所以通过这几篇笔记来梳理一下.原型图如下: 路由配置 主界面会用到一些原生App方法,比如验 ...
- h5 与原生 app 交互的原理
现在移动端 web 应用,很多时候都需要与原生 app 进行交互.沟通(运行在 webview中),比如微信的 jssdk,通过 window.wx 对象调用一些原生 app 的功能.所以,这次就来捋 ...
- 客户端相关知识学习(二)之h5与原生app交互的原理
前言 现在移动端 web 应用,很多时候都需要与原生 app 进行交互.沟通(运行在 webview中),比如微信的 jssdk,通过 window.wx 对象调用一些原生 app 的功能.所以,这次 ...
随机推荐
- 林大妈的JavaScript进阶知识(一):对象与内存
JavaScript中的基本数据类型 在JS中,有6种基本数据类型: string number boolean null undefined Symbol(ES6) 除去这六种基本数据类型以外,其他 ...
- python3调用哈工大ltp
运行环境ubuntu+python3 安装pyltp sudo pip3 install pyltp 下载ltp_data_v3.4.0模型 http://ltp.ai/ 分句 from pyltp ...
- 最小生成树(二)prim
今天为大家带来最小生成树的第二种实现方式,比起kruskal来说,prim相对要复杂一些,在稠密图的表现中表现较好,最优情况下也是nlogn级别. 描述: 1).输入:一个加权连通图,其中顶点集合为V ...
- Codeforces_820
A.直接模拟. #include<bits/stdc++.h> using namespace std; int c,v0,v1,a,l; int main() { ios::sync_w ...
- DBA常用SQL之DDL生成语句-2
------数据迁移常用SQL SELECT 'DROP USER '||u.username ||' CASCADE;' AS dropstrs FROM DBA_USERS U where u.u ...
- 2020牛客寒假算法基础集训营4 E:最小表达式
E:最小表达式 考察点 : 贪心,高精度 坑点 : 高精度一定不要写错,一定一定不要写错 剩下的就是细节问题 侃侃 : 1.字符串长度达到 5e5,如果要涉及到加法,乘法,普通的肯定会爆 long l ...
- 关于线段树的感悟(Segment Tree)
线段树的感悟 : 学过的东西一定要多回头看看,不然真的会忘个干干净净. 线段树的 Introduction : English Name : Segment Tree 顾名思义 : 该数据结构由两个重 ...
- DOCKER 学习笔记9 Kubernetes (K8s) 弹性伸缩容器 下
前言 从上一篇看来,我们已经对于Kubernetes ,通过minikube 建立集群,而后使用kubectl 进行交互,对Deployment 部署以及服务的暴露等.这节,将学习弹性的将服务部署到多 ...
- dubbo 分布式服务框架 介绍
Dubbo是阿里巴巴内部的SOA服务化治理方案的核心框架,每天为2000+ 个服务提供3,000,000,000+ 次访问量支持,并被广泛应用于阿里巴巴集团的各成员站点.Dubbo自2011年开源后, ...
- HDU 2018 DP
A - 母牛的故事 Time Limit:1000MS Memory Limit:32768KB 64bit IO Format:%I64d & %I64u Submit St ...