weexeros js和原生交互之Module拓展2019.3

官方建议：请优先使用官方扩展的 widget，不建议直接使用Module，如果需要直接引用Module的话，一定要自己在封装一层类似我们的 widget，因为原生Module在后续版本中可能会有所修改，统一封装一层对以后升级改动会小一些！

Module 扩展

Module是 js 与 native 交互的机制，比如像页面跳转、网络请求等一些操作，需要 native 通过扩展 Module 的方式提供接口供 js 调用，自定义 module 的步骤：

1.  自定义的module类 必须实现 WXModuleProtocol
2.  必须添加宏WX_EXPORT_METHOD, 它可以被weex识别，它的参数是 JavaScript调用 module指定方法的参数
3.  添加@synthesized weexInstance，每个moudle对象被绑定到一个指定的实例上   
4.  Module 方法会在UI线程中被调用，所以不要做太多耗时的任务在这里，如果要在其他线程执行整个module 方法，需要实现WXModuleProtocol中- (NSThread *)targetExecuteThread的方法，这样，分发到这个module的任务会在指定的线程中运行
5.  Weex 的参数可以是 String 或者Map      
6.  Module 支持返回值给 JavaScript中的回调，回调的类型是      WXModuleCallback,回调的参数可以是String或者Map

官方实例一：网络请求 Module bmAxios
可能 native 端的同学会有疑问，为啥名字是 Axios，因为前端有个著名的网络请求库就叫'Axios'，类似于 iOS 端的 AFNetwork,所以为了方便前端同学识别 module 的作用故起名为 bmAxios。
注：两者是不一样的
原生端：
1.1头文件遵守WXModuleProtocol协议

#import 
#import 

@interface BMAxiosNetworkModule : NSObject 
@end

1.2实现文件

@implementation BMAxiosNetworkModule



// 1.绑定一个 weexInstance 实例
@synthesize weexInstance;

//2.将方法暴露出去，这个一定要添加，不然 js 端调不到这个方法
WX_EXPORT_METHOD(@selector(fetch:callback:))

/**
 3.方法实现

 @param info：js调用方法传递的参数 
 @param callback： 通过callback 将结果数据回传给 js
 */
- (void)fetch:(NSDictionary *)info callback:(WXModuleCallback)callback
{
    /* 添加判断 */
    if (![info isKindOfClass:[NSDictionary class]]) {
        WXLogError(@"js request info Error");
        return;
    }

    // 解析 info
    BMAxiosRequestModel *requestModel = [BMAxiosRequestModel yy_modelWithJSON:info];
    // 创建请求
    BMCommonRequest *api = [[BMCommonRequest alloc] initWithRequestModel:requestModel];

    [((BMBaseViewController *)weexInstance.viewController) addRequest:api];
    // 触发请求
    [api startRequestResult:^(id data) {

        WXLogInfo(@"request data: %@",data);
        // 将数据结果回传给 js
        if (callback) {
            callback(data);
        }

    }];
}

注：callback返回数据格式]

  resData 数据    
  {
     status:0,   //状态码，0表示操作成功 9表示操作失败，数据请求Module bmAxios 此参数为 http请求的状态码如：200、404、503等
    errorMsg: '错误描述信息',
    data: 数据
  }

1.3注册Module

图片.png

1.4在weex使用
1.4.1先引入
var axios = weex.requireModule('bmAxios')
1.4.2调用方法
如：发送请求 fetch(info,callback)

// 示例
axios.fetch({
    method: 'GET'                // 请求类型 GET、POST、HEAD、PUT、DELETE、PATCH
    url: 'http://xxx/xxx',       // 请求api,完整地址
    header: {}                   // 自定义请求头requestHeader
    data: {}                     // 请求参数
    timeout: 3000                // 超时时间（耗秒）：默认3000毫秒
}, function(resData){                        
    // resData 数据    
    // {
    //    status:200,   // http 请求状态吗
    //    errorMsg: '错误信息',
    //    data: 数据
    // }
})

官方请优先使用官方扩展的 widget，不建议直接使用Module，如果需要直接引用Module的话，一定要自己在封装一层类似我们的 widget
看下官方封装的widget的Axios.js

解读Axios.js未完待续