版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/CodingFire/article/details/82390069
方法的映射通过标题的解释也可以很明显的看出来,是通过在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学习路,与君共勉。