方法的映射通过标题的解释也可以很明显的看出来,是通过在js上调用和原生同名的方法,在原生返回数据中把这些数据回传给JS的一种方法,这么做的原因是weex中的网络请求不能满足我们客户端网络安全和各种配置的需求。
具体的做法,首先在weex中,我们写一个名为fetch.js的网络请求文件,将所有的方法都写在这里:
const request = weex.requireModule('fetchJS'); export function getListInfor (这里可以传入参数) { let dic = {page : "1", userID: "1234"}; return new Promise((resolve, reject) => { stream.fetch({ method: 'post', url: 'https://xxxxxxxxxxxxxxxxxxxxx', type: 'json', headers:{'Content-Type':'application/json'}, body: JSON.stringify(dic) }, (response) => { console.log('hello'+JSON.stringify(response.data)); //如果你的数据外层没有套data,那就直接写response resolve(response.data); }, () => {}) }) }
这样,我们的js方法就写好了,那怎么通过调用这个方法映射到原生的方法呢?在原生种我们这么写:
.h文件 #import <Foundation/Foundation.h> #import "WeexSDK.h" @interface WXEventModule : NSObject<WXModuleProtocol> @end .m文件 #import "WXEventModule.h" @implementation WXEventModule @synthesize weexInstance; WX_EXPORT_METHOD(@selector(fetch:callback:progressCallback:)) //!!!这个方法一定要跟我下面的一样哦,或者你可以去SKD里面搜索这个方法,里面提供了几个方法,一定要和这几个方法名一模一样,否则自己写的名字系统根本不认 - (void)fetch:(NSDictionary *)options callback:(WXModuleKeepAliveCallback)callback progressCallback:(WXModuleKeepAliveCallback)progressCallback { [[RequestManager sharedInstance] wx_request:options finished:^(id result) { //这里博主在数据外层套了一层data,不套的话js里面直接就是你的result层级这里层级一定不要搞错了,js和原生务必保持一致 callback(@{@"data": result}, false); }]; } //ps:这个是封装方法的内部 - (void)wx_request:(NSDictionary *)dic finished:(void(^)(id result))handler { //这里的参数url,body,method必须和js传过来的保持一致才能拿到 NSString *url = dic[@"url"]; NSDictionary *bodyDic = dic[@"body"]; NSString *method = dic[@"method"]; NSURLRequest *request; if ([method isEqualToString:@"get"]) { xxxxxx//get的不同设置 } else { xxxxxx//post的不同蛇粥 } //这是博主的网络请求方法,大家把自己的方法带入就可以,不要钻牛角尖 [self request:request requestCompletionHandler:^(NSMutableDictionary *dic, NSString *errorMsg) { handler(dic); }]; } //最后哆嗦一句,千万不要忘记注册,这些基本的博主就不说了,不会的可以看下面链接 [WXSDKEngine registerModule:@"fetchJS" withClass:NSClassFromString(@"WXEventModule")];
这个js方法的使用一定要告诉大家,不知道的情况还真是很难琢磨:
import * as fetchRequest from '../network/fetch'; request.getListInfor(这里需要参数的话和请求中保持一致).then( data=>{ console.log(JSON.stringify(data)); this.listArray = data; } );
以上就把方法的映射说完了,其实也不麻烦,其中的钩子函数和goback函数值得大家深究,不是很懂js,vue的可能看不懂,这不要紧,慢慢学习,weex学习路,与君共勉。