weex开发 - 方法的映射,在weex调用fetch方法,实际调用同名的原生方法,在回调中把数据传递回js

简介: weex开发 - 方法的映射,在weex调用fetch方法,实际调用同名的原生方法,在回调中把数据传递回js

方法的映射通过标题的解释也可以很明显的看出来,是通过在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")];

weex-自定义module


这个js方法的使用一定要告诉大家,不知道的情况还真是很难琢磨:

import * as fetchRequest from '../network/fetch';
request.getListInfor(这里需要参数的话和请求中保持一致).then(
    data=>{
        console.log(JSON.stringify(data));
        this.listArray = data;
    }
);

以上就把方法的映射说完了,其实也不麻烦,其中的钩子函数和goback函数值得大家深究,不是很懂js,vue的可能看不懂,这不要紧,慢慢学习,weex学习路,与君共勉。

目录
相关文章
|
3天前
|
JavaScript 前端开发
js实现数据的双向绑定
js实现数据的双向绑定
13 2
|
13天前
|
数据采集 存储 JavaScript
基于Python 爬书旗网小说数据并可视化,通过js逆向对抗网站反爬,想爬啥就爬啥
本文介绍了如何使用Python编写网络爬虫程序爬取书旗网上的小说数据,并通过逆向工程对抗网站的反爬机制,最后对采集的数据进行可视化分析。
基于Python 爬书旗网小说数据并可视化,通过js逆向对抗网站反爬,想爬啥就爬啥
|
6天前
|
前端开发 JavaScript 安全
JavaScript——数字超过精度导致数据有误
JavaScript——数字超过精度导致数据有误
15 2
|
5天前
|
JavaScript 前端开发
JavaScript中通过按回车键进行数据的录入
这篇文章提供了一个JavaScript示例代码,演示了如何通过监听回车键(keyCode为13)在网页上实现数据的录入和触发一个警告框提示"正在登录验证......"。
JavaScript中通过按回车键进行数据的录入
|
11天前
|
JavaScript 数据处理
如何使用 Vue.js 将数据对象的值放入另一个数据对象中?
如何使用 Vue.js 将数据对象的值放入另一个数据对象中?
|
8天前
|
JavaScript 算法 数据安全/隐私保护
烯牛数据JS逆向:MD5数据加密?不存在的!
烯牛数据JS逆向:MD5数据加密?不存在的!
23 1
|
8天前
|
JavaScript 前端开发 网络协议
抖音直播弹幕数据逆向:websocket和JS注入
抖音直播弹幕数据逆向:websocket和JS注入
32 1
|
8天前
|
JavaScript 前端开发
在JavaScript如何确认数据的类型?
# `typeof` 与 `instanceof` 数据类型判断 `typeof` 操作符用于确定变量的基本数据类型,例如: - "string" - "number" - "boolean" - "undefined" 但对于引用类型如对象和数组,包括 `null`,它返回 "object"。 `instanceof` 用于检查对象是否为特定构造函数的实例,返回布尔值。它能准确识别数组等复杂类型,通过检查对象的原型链来确定其是否属于某个构造函数的实例。 两者结合使用可全面判断数据类型。
18 2
|
9天前
|
JavaScript 前端开发 NoSQL
使用Node.js进行后端开发入门
【8月更文挑战第10天】恭喜你完成了Node.js后端开发的入门之旅!这只是个开始,Node.js的世界远比这广阔。随着你对Node.js的深入学习和实践,你将能够构建更复杂、更强大的后端应用。不断探索、学习和实践,你将在Node.js的道路上越走越远。
|
19天前
|
SQL 存储 JSON
AlaSQL.js:用SQL解锁JavaScript数据操作的魔法
AlaSQL.js:用SQL解锁JavaScript数据操作的魔法
19 1