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

目录
相关文章
|
5天前
|
JavaScript 前端开发 测试技术
探索现代JavaScript开发的最佳实践
本文探讨了现代JavaScript开发中的最佳实践,涵盖ES6+特性、现代框架使用、模块化与代码分割、测试驱动开发、代码质量与性能优化、异步编程、SPA与MPA架构选择、服务端渲染和静态站点生成等内容,旨在帮助开发者提升代码质量和开发效率。
|
9天前
|
Web App开发 JavaScript 前端开发
深入浅出Node.js后端开发
【10月更文挑战第36天】本文将引导您探索Node.js的世界,通过实际案例揭示其背后的原理和实践方法。从基础的安装到高级的异步处理,我们将一起构建一个简单的后端服务,并讨论如何优化性能。无论您是新手还是有经验的开发者,这篇文章都将为您提供新的视角和深入的理解。
|
14天前
|
Web App开发 存储 JavaScript
深入浅出Node.js后端开发
【10月更文挑战第31天】本文将引导你进入Node.js的奇妙世界,探索其如何革新后端开发。通过浅显易懂的语言和实际代码示例,我们将一起学习Node.js的核心概念、搭建开发环境,以及实现一个简单但完整的Web应用。无论你是编程新手还是希望拓展技术的开发者,这篇文章都将为你打开一扇通往高效后端开发的大门。
|
10天前
|
运维 监控 JavaScript
鸿蒙next版开发:分析JS Crash(进程崩溃)
在HarmonyOS 5.0中,JS Crash指未处理的JavaScript异常导致应用意外退出。本文详细介绍如何分析JS Crash,包括异常捕获、日志分析和典型案例,帮助开发者定位问题、修复错误,提升应用稳定性。通过DevEco Studio收集日志,结合HiChecker工具,有效解决JS Crash问题。
29 4
|
13天前
|
移动开发 前端开发 JavaScript
前端实训,刚入门,我用原生技术(H5、C3、JS、JQ)手写【网易游戏】页面特效
于辰在大学期间带领团队参考网易游戏官网的部分游戏页面,开发了一系列前端实训作品。项目包括首页、2021校园招聘页面和明日之后游戏页面,涉及多种特效实现,如动态图片切换和人物聚合效果。作品源码已上传至CSDN,视频效果可在CSDN预览。
20 0
前端实训,刚入门,我用原生技术(H5、C3、JS、JQ)手写【网易游戏】页面特效
|
15天前
|
Web App开发 JavaScript 前端开发
深入浅出Node.js后端开发
【10月更文挑战第30天】本文将通过一个Node.js的简单示例,引导你进入Node.js的世界。我们将从基础概念讲起,然后一步步深入到代码实现,最后总结Node.js在后端开发中的优势和应用场景。无论你是前端开发者还是后端新手,这篇文章都将为你打开一扇了解Node.js的大门。
29 2
|
23天前
|
开发框架 JavaScript 前端开发
HarmonyOS UI开发:掌握ArkUI(包括Java UI和JS UI)进行界面开发
【10月更文挑战第22天】随着科技发展,操作系统呈现多元化趋势。华为推出的HarmonyOS以其全场景、多设备特性备受关注。本文介绍HarmonyOS的UI开发框架ArkUI,探讨Java UI和JS UI两种开发方式。Java UI适合复杂界面开发,性能较高;JS UI适合快速开发简单界面,跨平台性好。掌握ArkUI可高效打造符合用户需求的界面。
76 8
|
21天前
|
JavaScript 前端开发
javascript开发的简单的弹幕插件
这是一个原生javascript开发的简单的弹幕插件,具有美观、易用,占用的资源较低等特点,可以给弹幕设置内容、颜色、头像、链接地址等属性,鼠标悬停等,简单实用,欢迎下载!
37 5
|
19天前
|
数据采集 存储 JavaScript
如何使用Puppeteer和Node.js爬取大学招生数据:入门指南
本文介绍了如何使用Puppeteer和Node.js爬取大学招生数据,并通过代理IP提升爬取的稳定性和效率。Puppeteer作为一个强大的Node.js库,能够模拟真实浏览器访问,支持JavaScript渲染,适合复杂的爬取任务。文章详细讲解了安装Puppeteer、配置代理IP、实现爬虫代码的步骤,并提供了代码示例。此外,还给出了注意事项和优化建议,帮助读者高效地抓取和分析招生数据。
如何使用Puppeteer和Node.js爬取大学招生数据:入门指南
|
12天前
|
Web App开发 JavaScript 前端开发
探索后端开发:Node.js与Express的完美结合
【10月更文挑战第33天】本文将带领读者深入了解Node.js和Express的强强联手,通过实际案例揭示它们如何简化后端开发流程,提升应用性能。我们将一起探索这两个技术的核心概念、优势以及它们如何共同作用于现代Web开发中。准备好,让我们一起开启这场技术之旅!
28 0