官方建议：请优先使用官方扩展的 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 <Foundation/Foundation.h>
#import <WeexSDK.h>
@interface BMAxiosNetworkModule : NSObject <WXModuleProtocol>
@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未完待续
