博主之前做过移动端app嵌入网页,与Android和IOS有交互,一直没有时间分享过程。这里不多说Android交互啦~很简单,详细了解IOS与h5的交互吧。

IOS不同语法和h5的交互所建立的JSBrige是不一样的,但是大致思想是一样。这里粘出swift与h5交互创建JSBrige。

这是js部分基础搭建桥,可以将其固定封装成单独的js文件,然后在main.js中引入,我们可以通过SwiftJSBridge.callNativeBridge传输数据。

假设网页端需要从ios端拿到token,便可以约定一个名为getToken的方法,{}里写着与ios约定好的JSON对象

window['first']=function() {
if(window.SwiftJSBridge){
SwiftJSBridge.callNativeBridge("getToken",{"data":"give me token"},function(data){
if(data.token){
//操作token
axios.defaults.headers.common['psstoken'] = data.token;
localStorage.setItem('token',data.token);
}
 
return;
})
}
}

交互方面其实是简单的。但是关于ios版本不兼容插件问题会有很多麻烦之处。

ios9不兼容jquery.mobile 1.4.5以下,并且不兼容es6语法糖,所以会导致如果使用原生js写项目,在ios9版本的手机,会没有任何js的交互功能出现。改用jquery.mobile 1.4.5之后,的确可以兼容了,但是却出现了ios其他版本请求后台没有反应的情况,经过一系列排查发现jquery.mobile 1.4.5是不被ios其他版本兼容的,因此当这种兼容问题出现时,可以考虑从客户端拿版本进行判断,也可以无脑式将两种插件载入。。没想到这招可以。。爬坑艰难

---zyy小媛酱---

IOS与h5交互记录的更多相关文章

  1. iOS与H5交互遇到的坑

    之前的博客写过使用<JavaScriptCore/JavaScriptCore.h>库来实现与H5的交互,但是在项目中还是遇到了一些不得不踩的坑.在这里将我遇到的问题以及参考网上几位大神的 ...

  2. iOS与H5交互

    H5与App原生交互,一般会是前端页面中的JavaScript与App使用的原生开发语言的交互.技术方案应能达到以下要求: 在js与原生进行交互的时候能保证正常的正向调用逻辑返回,反向可以处理异步回调 ...

  3. WebViewJavascriptBridge详细使用 iOS与H5交互的方案

    WebViewJavascriptBridge详细使用 源网址: https://www.cnblogs.com/jiang-xiao-yan/p/5345755.html    前言 WebView ...

  4. iOS与H5交互及UIWebView缓存

    iOS原生App与H5页面交互笔记 最近在做一个项目用到了原生App与H5交互,之前有做过简单的H5页面直接调用原生方法的例子,就是利用UIWebView中的代理方法 //webview每次加载之前都 ...

  5. iOS与H5交互(WKWbebView)

    前言: 在iOS开发中,或多或少的会嵌入一些H5页面,有时候需要原生代码和H5页面进行交互.iOS8开始苹果推出性能更强大的WKWebView,所以一下方法是关于WKWebView与JS的交互. 创建 ...

  6. 浅谈 iOS 与 H5 的交互- JavaScriptCore 框架

    前言 小的作为一个iOS程序猿,可能研究JavaScript以及H5相关的知识并不是为了真正的要去转行做这一方面,其实更多的为了要研究OC中的JavaScriptCore框架,JavaScriptCo ...

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

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

  8. iOS JavaScriptCore与H5交互时出现异常提示

    在利用JavaScriptCore与H5交互时出现异常提示: This application is modifying the autolayout engine from a background ...

  9. Native与H5交互的一些解决方法

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

随机推荐

  1. foj 2173 floyd+矩阵快速幂

     Problem 2173 Nostop Accept: 52    Submit: 210 Time Limit: 3000 mSec    Memory Limit : 32768 KB  Pro ...

  2. nodejs-n-nvm版本管理工具

    第一种版本管理工具: n n是Node的一个模块,作者是TJ Holowaychuk(鼎鼎大名的Express框架作者),就像它的名字一样,它的理念就是简单: "no subshells, ...

  3. Spark MLlib之线性回归源代码分析

    1.理论基础 线性回归(Linear Regression)问题属于监督学习(Supervised Learning)范畴,又称分类(Classification)或归纳学习(Inductive Le ...

  4. Ada boost学习

    http://blog.csdn.net/dark_scope/article/details/14103983 据说在Deep Learning出来之前,SVM和Adaboost是效果最好的 两个算 ...

  5. Linux命令(六)——软件包管理(安装应用程序)

    与windows安装各种应用程序相似,在linux下也可以安装各种需要的应用程序,通常称为软件包.目前,在linux系统下常见的软件包格式主要有:RPM包.TAR包.bz2包.gz包.deb包.sh结 ...

  6. Design库,所有控件的使用

    导入地址com.android.support:design:23.2.0..输入design搜索到确认就可以. 布局中android.support.design.widget.XXX,调用控件 控 ...

  7. Element UI Form 每行显示多列,即多个 el-form-item

    Element UI Form组件使用问题. 每个 el-form-item 都会独占一行. 对于输入项很多的管理app, 能否在每个form中, 每行显示 2 个或者多个 el-form-item ...

  8. DDos攻击篇

    DDoS(Distributed Denial of Service,分布式拒绝服务)攻击的主要目的是让指定目标无法提供正常服务,甚至从互联网上消失,是目前最强大.最难防御的攻击之一. 1.1. SY ...

  9. Node.js:Buffer

    ylbtech-Node.js:Buffer 1.返回顶部 1. Node.js Buffer(缓冲区) JavaScript 语言自身只有字符串数据类型,没有二进制数据类型. 但在处理像TCP流或文 ...

  10. 你要的 React 面试知识点,都在这了

    摘要: 问题很详细,插图很好看. 原文:你要的 React 面试知识点,都在这了 作者:前端小智 Fundebug经授权转载,版权归原作者所有. React是流行的javascript框架之一,在20 ...