Hybird App:H5内嵌APP,前端用vue,APP之间的交互处理,适配安卓ios, 为了降低开发成本,减少前端适配工作量,三端统一使用  WebViewJavascriptBridge

在进行后端接口请求的时候统一先把参数返给APP端,APP端进行加密之后,再返回给前端,前端再进行异步请求

由于这里涉及到异步操作,异步请求可能会在和APP交互之前执行,那样就得不到APP返回的加密参数就执行了请求,所以是请求不到结果的,实际是要有先后顺序的,要一步一步的操作,上一步成功之后进行下一步操作,

所以最终利用promise把APP,H5和后端之间的交互进行同步处理,一步一步进行交互操作,最终成功

1. 先写web端的bridge.js

var u = navigator.userAgent;
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
// alert('是否是Android:'+isAndroid);
// alert('是否是iOS:'+isiOS);
function setupWebViewJavascriptBridge(callback) {
if(isAndroid){
if (window.WebViewJavascriptBridge) {
callback(WebViewJavascriptBridge)
} else {
document.addEventListener('WebViewJavascriptBridgeReady', function (event) {
if(window.onWebViewJavascriptBridgeReady) window.onWebViewJavascriptBridgeReady(window.__bridge = WebViewJavascriptBridge);
callback(WebViewJavascriptBridge)
}, false)
}
} if(isiOS){
if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); }
if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback); }
window.WVJBCallbacks = [callback];
var WVJBIframe = document.createElement('iframe');
WVJBIframe.style.display = 'none';
WVJBIframe.src = 'wvjbscheme://__BRIDGE_LOADED__';
document.documentElement.appendChild(WVJBIframe);
setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
} } export default {
callhandler (name, data, callback) {
setupWebViewJavascriptBridge(function(bridge) {
bridge.callHandler(name, data, callback)
})
},
registerhandler (name, callback) {
setupWebViewJavascriptBridge(function (bridge) {
bridge.registerHandler(name, function (data, responseCallback) {
callback(data, responseCallback)
})
})
}
}

2. 封装和APP交互的方法 callBridge.js

export default {
methods:{
callBridgefn(json){ // 调用app加密方法
let p = new Promise((resolve, reject)=>{
this.$bridge.callhandler('encryptParams', JSON.stringify(json),(data) =>{ //encryptParams是APP端规定的方法名
            resolve(data) })
}) return p;
},
    goBack(){ // 调用APP的返回
      this.$bridge.callhandler('goBack', (data) =>{ // goBack是APP端规定的方法名
    })
  }
}
}

3. 利用promise重写axios异步请求方法 promise.js

import axios from 'axios'

export default{
methods:{
sendServer(param) {
return new Promise((resolve,reject)=>{
axios.post(url ,param).then(res=>{ // url为请求地址
resolve(res.data)
}).catch(err=>{
reject(err)
})
})
},
}
}

4. 页面中请求接口的方法

_sendServer(param){
this.callBridgefn(param).then(data=>{
  this.sendServer(JSON.parse(data))
    .then(res=>{
                // 这里写要对后端返回的数据进行的操作
})
})
}

5. 在页面初始化的时候调用

created(){
this._sendServer(param) //param是要传递给APP进行加密的参数
}

JsBridge的异步不执行的处理--promise异步变同步的更多相关文章

  1. Js中强大的Promise异步机制

    少年别激动 我的这份随笔里面只涉及promise概念 如果想深入了解Promise的用法 可以去阮老师es6入门里面详读 奉上链接 http://es6.ruanyifeng.com/#docs/pr ...

  2. ES6笔记(7)-- Promise异步编程

    系列文章 -- ES6笔记系列 很久很久以前,在做Node.js聊天室,使用MongoDB数据服务的时候就遇到了多重回调嵌套导致代码混乱的问题. JS异步编程有利有弊,Promise的出现,改善了这一 ...

  3. Node.js之Promise维护(同步)多个回调(异步)状态

    金天:学习一个新东西,就要持有拥抱的心态,如果固守在自己先前的概念体系,就会有举步维艰的感觉..NET程序员初用node.js最需要适应的就是异步开发, 全是异步,常规逻辑下遍历列表都是异步,如何保证 ...

  4. 你所必须掌握的三种异步编程方法callbacks,listeners,promise

    目录: 前言 Callbacks Listeners Promise 前言 coder都知道,javascript语言运行环境是单线程的,这意味着任何两行代码都不能同时运行.多任务同时进行时,实质上形 ...

  5. 【ES6】Generator+Promise异步编程

    一.概念 首先我们要理解Generator和Promise的概念. Generator:意思是生成器,可以在函数内部通过yeild来控制语句的执行或暂停状态. *Foo(){ yeild consol ...

  6. Promise异步编程整理

    1.单线程模型 单线程模型指的是,JavaScript 只在一个线程上运行.也就是说,JavaScript 同时只能执行一个任务,其他任务都必须在后面排队等待. 注意,JavaScript 只在一个线 ...

  7. 异步解决方案(三)Promise

    首先建议大家先看看这篇博文,这是我看过的最清晰给力的博文了: https://www.cnblogs.com/lvdabao/p/es6-promise-1.html 附赠一篇笑死我了的博客,加入有一 ...

  8. Promise异步编程解决方案

    Promise是ES6中新增的异步编程解决方案,体现在代码中它是一个对象,可以通过 Promise 构造函数来实例化. 其最基本的使用 new Promise(function(resolve,rej ...

  9. ES6入门八:Promise异步编程与模拟实现源码

    Promise的基本使用入门: ——实例化promise对象与注册回调 ——宏任务与微任务的执行顺序 ——then方法的链式调用与抛出错误(throw new Error) ——链式调用的返回值与传值 ...

随机推荐

  1. c# 函数注释 显示换行 ,

    格式:<para>………..</para> /// <summary> /// <para>把html中的随机汉字转换为图片 调用如下:</par ...

  2. MSN在Win7下80072f0d错误解决

    近期电脑(笔记本联想 K41A)显卡出了点问题(该显卡一周前刚换的新的,竟然不到一周又出问题了,联想的质量真的...),在xp下电脑根本进不了操作系统,不断重新启动(可能驱动.系统垃圾太多有关),于是 ...

  3. File类常用方法

    File类是IO中常用的类 先介绍几个常用的方法: public boolean canRead(),public boolean canWrite() 测试当前文件是否可读可写,若是则返回true ...

  4. git clone出现SSL错误

    在学习git的时候,发现不能使用git clone从github.com下载,报了个ssl错误. Cloning into cancan... error: SSL certificate probl ...

  5. org.apache.commons.lang3.tuple.Pair 作为更新参数,XML 中的 Sql 取不到值、报错

    项目用的 Mybatis,今天改一个需求,落地实现是批量更新,且只需要根据主键(id)来更新一个字段(name). 于是,没有犹豫,像下面这样设计了数据结构: 既然是批量更新,那外层肯定是 List ...

  6. order by 的用法

    select * from emp order by sal desc  --将员工工资按照由高到低的顺序排列

  7. 自学Aruba1.4-Aruba体系结构-产品线

    点击返回:自学Aruba之路 1. Aruba产品线 IP switches: 1500.2500.3500 Controllers:7200 .70x0 Series.7005 Meridian:基 ...

  8. 消息队列RabbitMQ与Spring

    1.RabbitMQ简介 RabbitMQ是流行的开源消息队列系统,用erlang语言开发.RabbitMQ是AMQP(高级消息队列协议)的标准实现. 官网:http://www.rabbitmq.c ...

  9. SHT30 Linux标准 i2c-dev 读取程序

    #include <stdio.h> #include <stdlib.h> #include <sys/types.h> #include <sys/sta ...

  10. GodMode | Windows上帝模式

    最近在网上学习到了一些Windows的隐藏功能,今天我就来说说GodMode模式吧. 借鉴:https://jingyan.baidu.com/article/90bc8fc853c38bf65264 ...