小伙伴们在用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的对接交互(混合开发)的更多相关文章

  1. Vue与原生APP的相互交互

    现在好多APP都采用了Hybrid的开发模式,这种模式特别适合那些内容变动更新较大的APP,从而使得开发和日常维护过程变得集中式.更简短.更经济高效,不需要纯原生频繁发布.但有利肯定有弊咯,性能方面能 ...

  2. 移动web、webApp、混合APP、原生APP、androd H5混合开发 当无网络下,android怎么加载H5界面

    PhoneGap是一个采用HTML,CSS和JavaScript的技术,创建移动跨平台移动应用程序的快速开发平台.它使开发者能够在网页中调用IOS,Android,Palm,Symbian,WP7,W ...

  3. 关于原生app、webApp、混合app的介绍

    WebApp 原生App(Native App) 混合App(hybrid App) webApp: 用html5,css3 js开发的网页,运行在移动端的浏览器 zepto.angular.vue. ...

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

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

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

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

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

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

  7. 谈谈App的混合开发

    一.概念 App混合开发,顾名思义,是一个开发模式,指的是开发一个App一部分功能用native构建一部分功能用html5构建,英文名叫:Hybrid App. 在几年前就已经出现了App混合开发模式 ...

  8. React Native 混合开发与实现

    关于 微信公众号:前端呼啦圈(Love-FED) 我的博客:劳卜的博客 知乎专栏:前端呼啦圈 前言 随着 React 的盛行,其移动开发框架 React Native 也收到了广大开发者的青睐,以下简 ...

  9. 《React Native 精解与实战》书籍连载「iOS 平台与 React Native 混合开发」

    此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 ...

随机推荐

  1. Redis命令、数据结构场景、配置文件总结

    本文大纲 一.常用数据类型简介二.redis操作命令三.redis配置文件详解四.redis数据类型使用场景 一.常用数据类型简介 redis常用五种数据类型:string,hash,list,set ...

  2. 【[SDOI2017]序列计数】

    感觉自己的复杂度感人 大概是\(O(p*\pi(m)+p^3logn)\) 还是能过去的 我们看到这么大的数据范围还是应该先想一想暴力怎么写 显然我们可以直接暴力\(dp\) 设\(dp[i][j]\ ...

  3. urllib下使用Xpath表达式示例

    urllib下使用Xpath表达式示例 使用xpath表达式需要先将需要匹配的数据转换成tree格式,这就需要先装lxml模块.安装方法可以使用pip安装. 示例代码: import urllib.r ...

  4. win10 系统下获取系统版本号为6.2的问题

    近期赶时髦升级了win10,用着挺爽.但是某天在测试一个bug时发现要对win10做特殊处理,于是直接调用了GetVersionEx,并取出版本号进行判断,但是发现得到的版本竟然是6.2.当时就被雷到 ...

  5. 对极几何(Epipolar Geometry)

    基本概念 对极几何(Epipolar Geometry)是Structure from Motion问题中,在两个相机位置产生的两幅图像的之间存在的一种特殊几何关系,是sfm问题中2D-2D求解两帧间 ...

  6. Shell笔记-04

    如果表达式中包含特殊字符,Shell 将会进行替换.例如,在双引号中使用变量就是一种替换,转义字符也是一种替换. 举个例子: #!/bin/bash a=10 echo -e "Value ...

  7. AWR报告分析

    AWR报告分析 awr报告是oracle 10g下提供的一种性能收集和分析工具,它能提供一个时间段内整个系统资源使用情况的报告,通过这个报告,我们就可以了解一个系统的整个运行情况,这就像一个人全面的体 ...

  8. ORACLE 中rownum和row_number()的使用区别(可指定取sql结果集的第几个数据)

    这篇文章主要介绍了oracle中rownum和row_number()的使用方法以及区别和联系,十分的详细,有需要的小伙伴可以参考下.   row_number()over(partition by ...

  9. java程序陷阱

    1.找奇数

  10. SPOJ 4487. Can you answer these queries VI splay

    题目链接:点击打开链接 题意比較明显,不赘述. 删除时能够把i-1转到根,把i+1转到根下 则i点就在 根右子树 的左子树,且仅仅有i这一个 点 #include<stdio.h> #in ...