JS问题整理与思考--Hybrid 如何获取数据

  • 前端如何获取新闻内容
  • 不能用ajax获取。第一跨域,第二速度慢(解析js,js发起请求,再渲染。)
  • 客户端获取新闻内容(可以提前获取,而不是页面加载完解析完js),然后JS通讯拿到内容,在渲染

JS和客户端通讯的基本形式(类似于jsonp)

  • JS访问客户端能力,传递参数和回调函数
  • 客户端通过回调函数返回内容

schema协议

  • http(s)协议是网络请求协议
  • schema协议 -- 前端和客户端通讯的约定

类似于下面样式

    
    weixin://dl/scan
    weixin://dl/moments
var iframe = document.createElement('iframe')
    iframe.style.display = 'none'
    iframe.src = 'weixin://dl/scan?k1=v1&callback=weixin_scan' // iframe 访问schema,传入callback
    var body = document.body || document.getElementsByTagName('body')[0]
    body.appendChild(iframe)
    setTimeout(function () {
        body.removeChild(iframe)    // 销毁iframe
        iframe = null
    })

    window['weixin_scan'] = function (result) { // 创建全局函数
        alert(result)
    }

内置上线

  • 将invoke.js内置到客户端
  • 客户端每次启动webview,都默认执行invoke.js
  • 本地加载,免去网络加载的时间,更快
  • 本地加载,没有网络请求,黑客看不到schema协议,更安全

问题整理:前端和客户端如何通讯

  • 通讯的基本形式:调用能力,传递参数,监听回调
  • 对schema协议的理解和使用
  • 调用schema代码的封装
  • 内置上线的好处:更快,更安全

随机浏览