04 js如何和客户端通信

查看微信开发者文档

• html js css在手机上做的事情很有限，很多功能得借助大表哥app来做
• 微信公开开放给开发者的客户端能力，让js有能力操作手机的功能

• 前端开发者只要用js就可以调用

  
  image.png

hybrid 遇到的问题

回顾一下hybrid图谱

image.png image.png

• 这里的原理，客户端运行速度比js快一些，js是解释型语言
• 速度上（其实差不多）：类比 客户端获取80ms js100ms
• 获取方式上（最重要的地方）

客户端可以在点击的同时获取数据（prefech）
js必须在html页面渲染完成才能通过ajax获取数据

类似jsonp的方式.png

schema 协议

前端调用客户端能力 - schema协议

协议规则

image.png

微信的协议 （前面的协议名称可以自定义）

image.png

• 定义好以后，前端的js就可以和后端进行通信了
  伪代码

image.png
参数传递.png

代码演示：客户端拿到参数执行对应的函数

function invokeScan() {
    window['_invoke_scan_callback_'] = function (result) {
        alert(result)
    }

    var iframe = document.createElement('iframe')
    iframe.style.display = 'none'
    // iframe.src = 'weixin://dl/scan'  // 重要！
    iframe.src = 'weixin://dl/scan?k1=v1&k2=v2&k3=v3&callback=_invoke_scan_callback_'
    var body = document.body
    body.appendChild(iframe)
    setTimeout(function () {
        body.removeChild(iframe)
        iframe = null
    })
}

• schema协议调用封装成invoke.js

(function (window, undefined) {

    // 调用 schema 的封装
    function _invoke(action, data, callback) {
        // 拼装 schema 协议
        var schema = 'myapp://utils/' + action

        // 拼接参数
        schema += '?a=a'
        var key
        for (key in data) {
            if (data.hasOwnProperty(key)) {
                schema += '&' + key + data[key]
            }
        }

        // 处理 callback
        var callbackName = ''
        if (typeof callback === 'string') {
            callbackName = callback
        } else {
            callbackName = action + Date.now()
            window[callbackName] = callback
        }
        schema += 'callback=callbackName'

        // 触发
        var iframe = document.createElement('iframe')
        iframe.style.display = 'none'
        iframe.src = schema  // 重要！
        var body = document.body
        body.appendChild(iframe)
        setTimeout(function () {
            body.removeChild(iframe)
            iframe = null
        })
    }

    // 暴露到全局变量
    window.invoke = {
        share: function (data, callback) {
            _invoke('share', data, callback)
        },
        scan: function (data, callback) {
            _invoke('scan', data, callback)
        }
        login: function (data, callback) {
            _invoke('login', data, callback)
        }
    }

})(window)

• js代码调用客户端能力

document.getElementById('btn1').addEventListener('click', function () {
    // invokeScan()
    window.invoke.scan({}, function () {})
})
document.getElementById('btn2').addEventListener('click', function () {
    window.invoke.share({
        title: 'xxx',
        content: 'yyy'
    }, function (result) {
        if (result.errno === 0) {
            alert('分享成功')
        } else {
            alert(result.message)
        }
    })
})

内置invoke.js

image.png

总结

image.png