vue 与原生app的对接交互(混合开发)
小伙伴们在用vue开发h5项目特别是移动端的项目,很多都是打包后挂载在原生APP上的,那就少不了与原生交互了,我最近就是在坐这个,踩了一些坑,拿出来给大家分享下。
0.通过url传输数据:(一般是在入口页面传下app的用户信息进来供vue h5使用)
methods: {
// 接收url后的数据
urltext() {
let loc = location.href; let n1 = loc.length;//地址的总长度
let n2 = loc.indexOf("=");//取得=号的位置
let outToken = loc.substr(n2 + 1, n1 - n2);//从=号后面的内容
console.log(loc,n1,n2,outToken)
this.outTokenPost(outToken) //传到处理函数
},
}
1.原生APP提供一个接口对象的引用(例如一个扫码的接口,可能还有回调函数以获得扫码结果)
思路就是万物通过window 进行交互
// 将vue组件的要回调的函数暴露出去
mounted:function(){ // 将subscanQRCallBack方法绑定到window下面,提供给外部调用
window['scanQRCallBack'] = (result) => {
this.subscanQRCallBack(result)
} },
methods:{
scan(){
// alert('开始扫码了')
window.client.startScanQR('OS与js交互',scanQRCallBack) // 通过window调用app提供的client对象
}, subscanQRCallBack(result){
// alert('扫码结果6466:'+result);
this.scanPost(result)
},
}
vue 与原生app的对接交互(混合开发)的更多相关文章
- Vue与原生APP的相互交互
现在好多APP都采用了Hybrid的开发模式,这种模式特别适合那些内容变动更新较大的APP,从而使得开发和日常维护过程变得集中式.更简短.更经济高效,不需要纯原生频繁发布.但有利肯定有弊咯,性能方面能 ...
- 移动web、webApp、混合APP、原生APP、androd H5混合开发 当无网络下,android怎么加载H5界面
PhoneGap是一个采用HTML,CSS和JavaScript的技术,创建移动跨平台移动应用程序的快速开发平台.它使开发者能够在网页中调用IOS,Android,Palm,Symbian,WP7,W ...
- 关于原生app、webApp、混合app的介绍
WebApp 原生App(Native App) 混合App(hybrid App) webApp: 用html5,css3 js开发的网页,运行在移动端的浏览器 zepto.angular.vue. ...
- 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著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”. 最近在做一个项 ...
- 谈谈App的混合开发
一.概念 App混合开发,顾名思义,是一个开发模式,指的是开发一个App一部分功能用native构建一部分功能用html5构建,英文名叫:Hybrid App. 在几年前就已经出现了App混合开发模式 ...
- React Native 混合开发与实现
关于 微信公众号:前端呼啦圈(Love-FED) 我的博客:劳卜的博客 知乎专栏:前端呼啦圈 前言 随着 React 的盛行,其移动开发框架 React Native 也收到了广大开发者的青睐,以下简 ...
- 《React Native 精解与实战》书籍连载「iOS 平台与 React Native 混合开发」
此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 ...
随机推荐
- 【bzoj3456】 城市规划
题目 一句话题意,无向连通图计数 技不如人,甘拜下风 设\(f_i\)表示\(i\)个节点构成的无向连通图数量 之后...之后就不会了 于是抄题解 考虑容斥 \[f_i=t_i-\sum_{j=1}^ ...
- Go 测试单个方法
1.目录 gotest.go package mytest import ( "errors" ) func Division(a, b float64) (float64, er ...
- haproxy原理理解
1.haproxy使用最需要注意的点: 1.1连接数: 前端maxconn默认值为2000,非常有必要将其增加几倍. 1.2超时时间 timeout connect 60s # haproxy和服务端 ...
- [java之设计模式]策略模式
策略模式(strategy pattern) 定义>> 将一系列的算法封装到一些列的类里面,并且可以相互替换 作用>> 将算法的变化独立于客户端,将算法的指责和算法的行为分开, ...
- Struts2框架学习笔记--strtus2初识
struts2概述: 1.struts2框架应用于javaEE三层结构中的Web层框架 2.struts2框架是在struts1和webwork基础之上发展的全新框架(脱胎换骨 ,用法完全不一样)ps ...
- 截屏状态监听 - iOS
既接到电话状态监听的需求之后再次添加了截屏状态的监听,当使用 App 时若用户执行截屏操作需要对当前状态进行监听操作,下面有两种方法,其中可以替换截屏的图片内容(Plan A),也可以弹出提示框(Pl ...
- ajax 动态载入html后不能执行其中的js解决方法
事件背景 有一个公用页面需要在多个页面调用,其中涉及到部分js已经写在了公用页面中,通过ajax加载该页面后无法执行其中的js. 解决思路 1. 采用附加一个iframe的方法去执行js,为我等代码洁 ...
- MySQL----MySQL数据库入门----第五章 多表操作
5.1 外键 比如说有两个数据表,分别是学生信息表student和年级表grade.在student表中有存储学生年级的字段gid(外键),在grade表也有存储学生年级的字段id(主键),stude ...
- js实现table合并相同列单元格
/** * Created with JetBrains WebStorm. * User: Johnny * Date: 18-3-26 * Time: 下午4:48 * Table td 相同值合 ...
- linux 命令 uniq
linux命令uniq去重 实例详细说明linux下去除重复行命令uniq 一,uniq干什么用的 文本中的重复行,基本上不是我们所要的,所以就要去除掉.linux下有其他命令可以去除重复行,但是我觉 ...