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学习路,与君共勉。

目录
相关文章
|
22天前
|
Web App开发 JavaScript 前端开发
Node.js开发
Node.js开发
37 13
|
29天前
|
存储 JavaScript 前端开发
深入浅出Node.js后端开发
在数字化时代的浪潮中,后端开发作为连接用户与数据的桥梁,扮演着至关重要的角色。本文将以Node.js为例,深入探讨其背后的哲学思想、核心特性以及在实际项目中的应用,旨在为读者揭示Node.js如何优雅地处理高并发请求,并通过实践案例加深理解。无论你是初学者还是有一定经验的开发者,这篇文章都将为你提供新的视角和思考。
|
26天前
|
Web App开发 开发框架 JavaScript
深入浅出Node.js后端开发
本文将带你领略Node.js的魅力,从基础概念到实践应用,一步步深入理解并掌握Node.js在后端开发中的运用。我们将通过实例学习如何搭建一个基本的Web服务,探讨Node.js的事件驱动和非阻塞I/O模型,以及如何利用其强大的生态系统进行高效的后端开发。无论你是前端开发者还是后端新手,这篇文章都会为你打开一扇通往全栈开发的大门。
|
29天前
|
Web App开发 开发框架 JavaScript
深入浅出Node.js后端开发
在这篇文章中,我们将一起探索Node.js的奇妙世界。无论你是刚接触后端开发的新手,还是希望深化理解的老手,这篇文章都适合你。我们将从基础概念开始,逐步深入到实际应用,最后通过一个代码示例来巩固所学知识。让我们一起开启这段旅程吧!
|
25天前
|
Web App开发 JavaScript 前端开发
深入浅出Node.js后端开发
本文将带领读者从零基础开始,一步步深入到Node.js后端开发的精髓。我们将通过通俗易懂的语言和实际代码示例,探索Node.js的强大功能及其在现代Web开发中的应用。无论你是初学者还是有一定经验的开发者,这篇文章都将为你提供新的见解和技巧,让你的后端开发技能更上一层楼。
|
28天前
|
JavaScript 前端开发 API
深入理解Node.js事件循环及其在后端开发中的应用
本文旨在揭示Node.js的核心特性之一——事件循环,并探讨其对后端开发实践的深远影响。通过剖析事件循环的工作原理和关键组件,我们不仅能够更好地理解Node.js的非阻塞I/O模型,还能学会如何优化我们的后端应用以提高性能和响应能力。文章将结合实例分析事件循环在处理大量并发请求时的优势,以及如何避免常见的编程陷阱,从而为读者提供从理论到实践的全面指导。
|
29天前
|
Web App开发 JavaScript 前端开发
深入浅出Node.js后端开发
本文将带你走进Node.js的世界,从基础到进阶,逐步解析Node.js在后端开发中的应用。我们将通过实例来理解Node.js的异步特性、事件驱动模型以及如何利用它处理高并发请求。此外,文章还会介绍如何搭建一个基本的Node.js服务器,并探讨如何利用现代前端框架与Node.js进行交互,实现全栈式开发。无论你是初学者还是有一定经验的开发者,这篇文章都将为你提供新的视角和深入的理解。
27 4
|
Web App开发 JavaScript 前端开发
|
JavaScript 前端开发 .NET
用JavaScript调用WCF Service
原文:用JavaScript调用WCF Service   原创地址:http://www.cnblogs.com/jfzhu/p/4039604.html 转载请注明出处   前面介绍过《Step by Step 创建一个WCF Service》和《使用WCF的Trace与Message Log功能》,本文介绍一下如何用JavaScript来调用WCF Service。
740 0
|
1月前
|
JavaScript 前端开发
JavaScript中的原型 保姆级文章一文搞懂
本文详细解析了JavaScript中的原型概念,从构造函数、原型对象、`__proto__`属性、`constructor`属性到原型链,层层递进地解释了JavaScript如何通过原型实现继承机制。适合初学者深入理解JS面向对象编程的核心原理。
27 1
JavaScript中的原型 保姆级文章一文搞懂