App与JS交互

一、js调用app

// 调用时传递的参数均为字符串，未方便书写，写成了对象形式，下同。

/**
 * 向app发起请求
 * actionName {String} 调用app的方法名
 * @param args.__token {String} token为唯一标识，用来区别，同一方法的多次调用。
 * @param args 其他的所有字段均为请求时需要的数据
 */
// js调用app，iOS
window.webkit.messageHandlers['actionName'].postMessage({
    __token: 'token',
    ...args
});
// js调用app，Android
window.AndroidInterface['actionName']({
    __token: 'token',
    ...args
});

// app处理完毕后回调js
/**
 * app处理完毕后回调js
 * @param args.__name {String} js调用app时使用的方法名
 * @param args.__token {String} js调用时传递的token
 * @param args.__status {Number} 是否处理成功，Number类型 0为成功，其他值为失败
 * @param args.__message {String} 可选，如果处理失败，则必须在这个字段中添加失败描述
 * @param args 其他的所有字段均为处理后的返回结果
 */
window['koolearnApp2jsBridge.callback']({
    __name: 'actionName',
    __token: 'token',
    __status: 0,
    __message: '',
    ...args
});

二、APP调用js

/**
 * 向js发起请求
 * @param args.__name {String} js处理完毕后回调app的方法名
 * @param args.__token {String} token为唯一标识，用来区别，同一方法的多次调用。
 * @param args 其他的所有字段均为请求时需要的数据
 */
window['koolearnApp2jsBridge.trigger']({
    __name: 'actionName',
    __token: 'token',
    ...args
});

/**
 * js处理完毕后回调app
 * actionName {String} app发起调用时传递的方法名
 * @param args.__token {String} app调用时传递的token
 * @param args.__status {Number} 是否处理成功，Number类型 0为成功，其他值为失败
 * @param args.__message {String} 可选，如果处理失败，则必须在这个字段中添加失败描述
 * @param args 其他的所有字段均为处理后的返回结果
 */
// js回调app，iOS
window.webkit.messageHandlers['actionName'].postMessage({
    __token: 'token',
    __status: 0,
    __message: '',
    ..args
});
// js回调app，Android
window.AndroidInterface['actionName']({
    __token: 'token',
    __status: 0,
    __message: '',
    ...args
});

三、 前端js模块的使用方法

/*
 * sendToApp(actionName, params, needCallback)
 * 向app发起请求
 * @param actionName {String} 调用app的方法名
 * @param params {Object} 需要向app传递的参数
 * @param needCallback {Boolean} 是否需要回调
 * @return 如果needCallback为false或没有此参数，则返回null，否则返回promise对象进行回调处理
 */
var sendToApp = require('project/m-teach/1.x/common/send-to-app/2.x/send-to-app');
sendToApp('login', {}, true).then(
    function(data){
        console.log('登陆成功', data);
    },
    function(message){
        console.log('登陆失败', message);
    }
);

// 前端被动监听app发起的请求
sendToApp.on('actionName', function(e, data){
    var dfd = $.Deferred();
    // 前端业务处理
    // ...
    // dfd.resolve({arg1:'返回到数据'});
    // dfd.reject('处理失败');
    // 处理后回调app
    return dfd.promise();
});

四、常用接口示例

**登录接口的app回调**
window['testjsBridge.callback']({
    __name: 'actionName',
    __token: 'token',
    __status: 0,
    __message: '',
    headImg: "http://img2.imgtn.bdimg.com/it/u=3588772980,2454248748&fm=27&gp=0.jpg",
    userAccount: 0,
    userId: 63938231,
    userName: "张三"
});

下载地址：

https://download.csdn.net/download/lvluffy/10311552