weex eros框架源码解析

weex eros是基于alibaba weex框架进行二次封装的客户端跨平台开发框架,主要是为前端开发者(可以不用熟悉客户端开发)提供的一站式客户端app开发解决方案。官网地址为:https://bmfe.github.io/eros-docs/#/。为了方便前端开发者和客户端开发者了解框架的原理和遇到问题时更快的定位,我将从源码的角度解析功能。


eros主要功能介绍

  1. eros cli是eros开发脚手架,可以用来生成eros项目,提供了编译,打包,运行,更新等一系列开发功能。
  2. eros widget在js端提供了vue实例中可以方便调用的许多原生扩展功能(请求,路由,事件发布订阅,本地存储等)。
  3. eros module在原生端对eros widget功能进行真正实现。
  4. eros component在原生端实现的扩展组件
  5. eros通过appboard配置实现多页面的公共代码js bundle抽出。
  6. eros通过mediator实现多页面内存共享。

首先从eros widget源码开始分析

eros widget提供了请求,路由,本地储存,原生导航,发布订阅等功能,下面将从请求功能去分析eros widget源码实现。


在eors官网中介绍的请求的定义是axios,前端的开发者看到这个会觉得很熟悉,因为有个著名的前端开源Http请求框架也叫作这个名字,我刚开始看到这个也是非常兴奋,因为axios开源框架功能很强大,所以觉得基于业务的Http请求封装很easy,可以直接复用了,但是用了之后发现不是那么回事,后面研究了源码之后,才知道eros只是把请求功能叫axios这个名字,但是跟开源框架axios背后实现原理,实现功能完全不一样!所以大家不要误解了!

我们先从Js调用端开始分析:

  1. 通过eros-cli创建项目之后,我们可以看到关于请求的配置有两个地方:

在config/index.js文件中我们可以看到就做了一个事情:new widget()创建了一个widget对象。new widget是eros widget功能的入口,在new widget()时通过传参完成了widget相关功能的配置,图中ajax对象正是对widget axios功能的配置。通过require引用找到Widget定义的地方,分析widget源码,也就是eros widget库的相关代码。

// 配置方法
import './src/mixins.js'import './src/font.js'
// 弹窗
import './src/notice.js'
// 获取地理位置
import './src/geo.js'
// 获取相机信息
import './src/camera.js'
// 图片操作相关
import './src/image.js'
// 设置导航
import './src/nav.js'
// 支付相关(已抽离第三方插件)
// import './src/pay.js'
// bindingx
import './src/bindingx.js'
// 存储相关
import './src/storage.js'
// 全局事件
import './src/events.js'
// 分享(已抽离第三方插件)
// import './src/share.js'
// 工具方法
import './src/tools.js'import './src/coms.js'// 路由
import Router from './src/router.js'
// 发送请求
import Axios from './src/axios.js'let instance = null
export default class Widget {constructor ({ router, ajax }) {if (!instance) {//这里是我们需要关注的,这里创建的请求对象,并且挂载在Vue里Vue.use(new Axios(ajax))Vue.use(new Router(router))instance = this}return instance}
}

2.代码我们可以很清楚的看到,整个widget的功能都是在这里被引入的,相关的配置信息也是通过widget的构造函数传到对应功能模块的。我们可以看到我们分析的Axios定义就在./src/axios.js这个文件里。继续往下分析axios.js代码:

import _isFunction from 'lodash/isFunction'
const bmAxios = weex.requireModule('bmAxios')//请求的真正执行者,这里对应一个weex原生自定义module,注册名字叫bmAxios
export default class Axios {//构造函数,通过外部传递请求相关配置参数constructor ({ timeout, apis, baseUrl = '', requestHandler, responseHandler }) {this.apis = apis //apis是配置请求别名的到路径的映射,别名通过它可以找到真实路径this.timeout = timeout//请求的超时时间this.baseUrl = baseUrl//请求的基础urlthis.requestHandler = requestHandler//请求的拦截器this.responseHandler = responseHandler//响应的拦截器return this}//vue自定义组件安装函数,前面说的vue.use()会调用该函数进行自定义组件的添加install (Vue) {/*** Contributor: Eric Xiao.* Description: extend promise.* Eros thanks every contributor.*/Promise.prototype.finally = function (callback) {const P = this.constructor;return this.then(value => P.resolve(callback()).then(() => value),reason => P.resolve(callback()).then(() => { throw reason }));};Promise.prototype.done = function (onFulfilled, onRejected) {this.then(onFulfilled, onRejected).catch(function (reason) {// Throw a global errorsetTimeout(() => { throw reason }, 0);});};const self = this//此处是在vue原型中挂载一个$fetch函数,挂载之后在vue实例中可以通过this.$fetch进行调用该函数,该函数是eros http请求的调用函数,支持多种http请求方式。Vue.prototype.$fetch = (options) => {return new Promise((resolve, reject) => {//判断requestHandle是否是函数,如果是函数则先执行requestHandle对请求进行处理,处理完成后再由handleAxios处理,否则直接由handleAxios处理。if (_isFunction(self.requestHandler)) {self.requestHandler(options, () => { //统一的http功能处理handleAxios(options, resolve, reject) })} else {//统一的http功能处理handleAxios(options, resolve, reject)}})}//vue原型上提供this.$get发起get请求的调用,逻辑同上Vue.prototype.$get = (options) => {options.method = 'GET'return new Promise((resolve, reject) => {if (_isFunction(self.requestHandler)) {self.requestHandler(options, () => { handleAxios(options, resolve, reject) })} else {handleAxios(options, resolve, reject)}})}//vue原型上提供this.$post发起Post请求的调用,逻辑同上Vue.prototype.$post = (options) => {options.method = 'POST'return new Promise((resolve, reject) => {if (_isFunction(self.requestHandler)) {self.requestHandler(options, () => { handleAxios(options, resolve, reject) })} else {handleAxios(options, resolve, reject)}})}//请求js端真正处理者function handleAxios (options, resolve, reject) {//首先对请求参数进行解析const { name, url, data, method, header, params } = options//通过name去apis配置里找真正请求路径const requestPath = name && pathFormater(name, params)//这里才是真正的请求功能的发起者,通过eros自定义weex的bmAxios原生模块真正发起请求,通过传递回调函数给原生从而在请求执行完之后获取到请求结果,再由promise对结果进行分发,如果自己定义了responseHandler函数,则由调用者在responseHandler函数中根据http status和业务code去分发请求结果bmAxios.fetch({url: url || (self.baseUrl   requestPath),data: data || {},method: method && method.toUpperCase() || 'GET',header: header || {},timeout: self.timeout || 30000}, (resData) => {// 统一的监控if (_isFunction(self.responseHandler)) {self.responseHandler(options, resData, resolve, reject)} else {resolve(resData)}})}//此函数是用来根据name去映射apis路径,以及对路径参数进行赋值替换function pathFormater (name, params) {let _path = self.apis[name]const matcher = _path.match(/[^{][a-zA-Z0-9] (?=\})/g)if (matcher && matcher.length) {matcher.forEach(item => {if (!params[item]) throw new Error(`you are using dynamic params, but ${item} not existed in your params`)_path = _path.replace(`{${item}}`, params[item] || 'undefined')})}return _path}}
}

3.通过上面的代码分析我们知道了在vue中通过this.$fetch调用真正的js处理逻辑,实际上js只是对请求参数进行定义和简单功能的封装。真正实现http调用处还是在原生,这个原生是相对的,如果jsbundle是运行在android上则是通过android weex模块去调用,如果运行在ios则通过ios weex模块去调用。

下面分析eros android端源码

  1. 首先找到android erosSdk中的 AxiosModule.java类文件。这个类里面定义了js端调用的相关方法。
package com.benmu.framework.extend.module;import com.benmu.framework.constant.WXConstant;
import com.benmu.framework.constant.WXEventCenter;
import com.benmu.framework.manager.ManagerFactory;
import com.benmu.framework.manager.impl.dispatcher.DispatchEventManager;
import com.benmu.framework.model.WeexEventBean;
import com.taobao.weex.annotation.JSMethod;
import com.taobao.weex.bridge.JSCallback;
import com.taobao.weex.common.WXModule;/*** Created by Carry on 17/1/16.*/public class AxiosModule extends WXModule {@JSMethod(uiThread = false)public void fetch(String params, final JSCallback jsCallback) {WeexEventBean eventBean = new WeexEventBean();eventBean.setContext(mWXSDKInstance.getContext());eventBean.setKey(   WXEventCenter.EVENT_FETCH);eventBean.setJsParams(params);eventBean.setJscallback(jsCallback);ManagerFactory.getManagerService(DispatchEventManager.class).getBus().post(eventBean);}//其他省略....
}
  1. 整个类看起来很简单,跟js端bmAxios对应的方法就一个fetch(),里面有两个参数,一个为js传递过来的请求参数,另外一个是js端的回调函数。我们可以看到方法的实现里面并没有具体的执行逻辑,只是创建了一个叫做WeexEventBean的实体类,并把参数params和jsCallback等传给了它,并通过类似bus的对象给post出去了。在这里说一下,所有的eros自定义module都是通过事件总线(android otto框架)的机制进行分发和功能处理的。WeexEventBean是对所有Module功能入口的统一封装,它通过统一包装所有的js调用请求,根据创建时定义的key,通过反射分发到对应key的功能类上进行处理。下面我们找到WeexEventBean事件的接收处。
package com.benmu.framework.event;import android.app.Activity;
import android.content.Context;
import android.text.TextUtils;
import com.benmu.framework.adapter.router.RouterTracker;
import com.benmu.framework.constant.WXEventCenter;
import com.benmu.framework.manager.ManagerFactory;
import com.benmu.framework.manager.impl.dispatcher.DispatchEventManager;
import com.benmu.framework.model.BaseEventBean;
import com.benmu.framework.model.WeexEventBean;
imporot cm.benmu.framework.utils.JsPoster;
import com.benmu.wxbase.EventGate;
import com.benmu.wxbase.EventGateFactory;
import com.squareup.otto.Subscribe;
import com.taobao.weex.WXSDKInstance;
import com.taobao.weex.bridge.JSCallback;import java.util.ArrayList;/*** Created by Carry on 2017/8/23.*/public class DispatchEventCenter {//这里DispatchEventCenter创建了一个单例对象private static DispatchEventCenter mInstance = new DispatchEventCenter();private DispatchEventCenter() {}public static DispatchEventCenter getInstance() {return mInstance;}//这里对DispatchEventCenter对象进行注册,注册之后可以接收Bus分发的事件public void register() {ManagerFactory.getManagerService(DispatchEventManager.class).getBus().register(this);}//这里对DispatchEventCenter对象进行解注,解注之后取消接收Bus分发的事件public void unregister() {ManagerFactory.getManagerService(DispatchEventManager.class).getBus().unregister(this);}//这里是WeexEventBean事件的接收,所有eros module post出来的WeexEventBean类型对象都在这里接收之后进行转发@Subscribepublic void onWeexEvent(WeexEventBean weexEventBean) {if (weexEventBean == null) return;Context context = safeContext(weexEventBean.getContext());if (context == null) return;String params = weexEventBean.getJsParams();switch (weexEventBean.getKey()) {case WXEventCenter.EVENT_IMAGE_UPLOAD://这里就是我们要找的key为EVENT_FETCH的处理地方case WXEventCenter.EVENT_FETCH://这里我们直接传递了一个class绝对路径的string,此处的做法值得商榷。下面我们继续看reflectionClazzPerform方法reflectionClazzPerform("com.benmu.framework.event.http.EventFetch", context, weexEventBean, "", weexEventBean.getKey());break;...中间省略default:reflectionClazzPerform(weexEventBean.getKey(), context, weexEventBean, "");break;}}//真正反射创建对象的调用逻辑在这个函数里private void reflectionClazzPerform(String clazzName, Context context, WeexEventBean weexEventBean, String errosMsg, String type) {//这里EventGateFactory根据clazzName反射去创建对象,但是为啥对象是EventGate类型的呢,因为eros所有的Event都实现了EventGate接口,所以创建出来的对象都是EventGate实现类的对象。EventGate event = EventGateFactory.getEventGate(clazzName);String params = weexEventBean.getJsParams();if (null != event) {//根据上面调用逻辑,type为WXEventCenter.EVENT_FETCH,不为空,直接走else逻辑if (TextUtils.isEmpty(type)) {event.perform(context, weexEventBean);} else {//event.perform是所有实现EventGate接口的Event对象执行功能的入口,本文分析的是com.benmu.framework.event.http.EventFetch这个类,下面我去找EventFetch对象的perform方法。event.perform(context, weexEventBean, type);}} else {//如果找不到对应的EVENT处理类,则给js回调失败处理if (TextUtils.isEmpty(params)) {JsPoster.postFailed(weexEventBean.getJscallback());} else {JsPoster.postFailed(errosMsg, weexEventBean.getJscallback());}}}}
  1. 通过DispatchEventCenter 类,我们把js端的调用真正的分发到了对应的事件类上进行处理,每个事件类名对应着一个js调用模块的函数名。此处我们继续分析:com.benmu.framework.event.http.EventFetch这个类:
package com.benmu.framework.event.http;import android.content.Context;
import android.text.TextUtils;
import android.widget.Toast;import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.JSONObject;
import com.benmu.framework.constant.Constant;
import com.benmu.framework.constant.WXEventCenter;
import com.benmu.framework.http.okhttp.OkHttpUtils;
import com.benmu.framework.http.okhttp.callback.StringCallback;
import com.benmu.framework.http.okhttp.exception.CancelException;
import com.benmu.framework.http.okhttp.exception.HttpException;
import com.benmu.framework.http.okhttp.exception.IrregularUrlException;
import com.benmu.framework.http.okhttp.utils.L;
import com.benmu.framework.manager.ManagerFactory;
import com.benmu.framework.manager.impl.AxiosManager;
import com.benmu.framework.manager.impl.ImageManager;
import com.benmu.framework.manager.impl.ModalManager;
import com.benmu.framework.manager.impl.ParseManager;
import com.benmu.framework.manager.impl.PersistentManager;
import com.benmu.framework.manager.impl.dispatcher.DispatchEventManager;
import com.benmu.framework.model.AxiosGet;
import com.benmu.framework.model.AxiosPost;
import com.benmu.framework.model.AxiosResultBean;
import com.benmu.framework.model.UploadImageBean;
import com.benmu.framework.model.UploadResultBean;
import com.benmu.framework.model.WeexEventBean;
import com.benmu.framework.utils.JsPoster;
import com.benmu.framework.utils.TextUtil;
import com.benmu.wxbase.EventGate;
import com.lzy.imagepicker.bean.ImageItem;
import com.squareup.otto.Subscribe;
import com.taobao.weex.bridge.JSCallback;import java.util.ArrayList;import okhttp3.Call;/*** Created by Carry on 2017/8/16.*/public class EventFetch extends EventGate {private JSCallback mUploadAvatar;private Context mUploadContext;//根据上面分析执行到这里@Overridepublic void perform(Context context, WeexEventBean weexEventBean, String type) {String params = weexEventBean.getJsParams();pe//此处type为WXEventCenter.EVENT_FETCH,所以直接执行if里面的fetch方法if (WXEventCenter.EVENT_FETCH.equals(type)) {fetch(params, context, weexEventBean.getJscallback());} else if (WXEventCenter.EVENT_IMAGE_UPLOAD.equals(type)) {uploadImage(params, context, weexEventBean.getJscallback());}}//js端fetch请求分发到这里public void fetch(String params, final Context context, final JSCallback jscallback) {//创建参数解析管理类ParseManager parseManager = ManagerFactory.getManagerService(ParseManager.class);//创建Axios执行管理类AxiosManager axiosManager = ManagerFactory.getManagerService(AxiosManager.class);//把js 参数解析成Json对象JSONObject object = parseManager.parseObject(params);//获取请求的Urlfinal String mUrl = object.getString("url");Boolean noRepeat = object.getBoolean("noRepeat");//如果重复发了则取消上一个请求if (noRepeat != null && noRepeat) {axiosManager.cancel(mUrl);}//此处提供了所有的restful请求方法,说明js端可以发起所有的restful请求,根据对应的method进行分发处理switch (object.getString("method")) {case OkHttpUtils.METHOD.GET:AxiosGet axiosGet = parseManager.parseObject(params, AxiosGet.class);get(context, axiosManager, axiosGet, jscallback);break;case OkHttpUtils.METHOD.POST:AxiosPost axiosPost = parseManager.parseObject(params, AxiosPost.class);post(context, axiosManager, axiosPost, jscallback);break;case OkHttpUtils.METHOD.HEAD:AxiosGet axiosHead = parseManager.parseObject(params, AxiosGet.class);head(context, axiosManager, axiosHead, jscallback);break;case OkHttpUtils.METHOD.DELETE:AxiosPost axiosDelete = parseManager.parseObject(params, AxiosPost.class);delete(context, axiosManager, axiosDelete, jscallback);break;case OkHttpUtils.METHOD.PUT:AxiosPost axiosPut = parseManager.parseObject(params, AxiosPost.class);put(context, axiosManager, axiosPut, jscallback);break;case OkHttpUtils.METHOD.PATCH:AxiosPost axiosPatch = parseManager.parseObject(params, AxiosPost.class);patch(context, axiosManager, axiosPatch, jscallback);break;}}//暂时只分析get请求,其他是一样的。private void get(final Context context, AxiosManager axiosManager, AxiosGet axiosGet, finalJSCallback jscallback) {//此处只是调用axiosManager.get()方法,真正的http调用发起逻辑是在axiosManager类里面,通过给该方法传递StringCallback()回调获取到http执行之后的结果,然后对结果进行解析之后回调到Js端。axiosManager.get(axiosGet.url, axiosGet.data, axiosGet.header, newStringCallback() {@Overridepublic void onError(Call call, Exception e, int id) {//请求出现error之后的处理parseError(context, e, jscallback);}@Overridepublic void onResponse(String response, int id) {//请求成功之后的处理parseResponse(response, jscallback, code);}}, axiosGet.url, axiosGet.timeout);}//请求错误的解析private void parseError(Context context, Exception e, JSCallback callback) {if (e instanceof CancelException) {//request canceledModalManager.BmLoading.dismissLoading(context);return;}AxiosResultBean bean = new AxiosResultBean();if (e instanceof HttpException) {HttpException httpException = (HttpException) e;bean.status = httpException.getmErrorCode();bean.errorMsg = httpException.getmErrorMessage();} else if (e instanceof IrregularUrlException) {IrregularUrlException irregularUrlException = (IrregularUrlException) e;bean.status = 9;bean.errorMsg = irregularUrlException.getmErrosMeeage();}//请求错误之后给js端回调,回调的data为AxiosResultBean,到这里js——>java——>js 整个调用过程结束了if (callback != null) {callback.invoke(bean);}}//请求正常的解析private void parseResponse(String response, JSCallback callBack, int code) {try {AxiosResultBean bean = new AxiosResultBean();if (callBack != null && !TextUtils.isEmpty(response)) {bean.status = code;bean.errorMsg = "";bean.data = JSON.parse(response);//请求正常返回之后给js端回调,回调的data为AxiosResultBean,到这里js——>java——>js 整个调用过程结束了callBack.invoke(bean);}} catch (Exception e) {e.printStackTrace();L.e("json 解析错误");AxiosResultBean bean = new AxiosResultBean();bean.status = -1;bean.errorMsg = "json 解析错误";if (callBack != null) {//请求错误之后给js端回调,回调的data为AxiosResultBean,到这里js——>java——>js 整个调用过程结束了callBack.invoke(bean);}}}
}
  1. 通过EventFetch源码,我们知道EventFetch只是做了请求参数的解析,根据请求http method进行对应分发处理,并且对http请求之后的结果进行封装之后发起jsCallback处理,jsCallback调用之后,整个js——>java——>js调用过程结束。但是真正http执行逻辑还在AxiosManager里面,下面我们继续分析AxiosManager类:
package com.benmu.framework.manager.impl;import android.content.Context;
import android.net.Uri;
import android.text.TextUtils;import com.benmu.framework.BMWXEnvironment;
import com.benmu.framework.extend.adapter.WeexOkhttp3Interceptor;
import com.benmu.framework.http.Api;
import com.benmu.framework.http.BMPersistentCookieStore;
import com.benmu.framework.http.okhttp.OkHttpUtils;
import com.benmu.framework.http.okhttp.builder.GetBuilder;
import com.benmu.framework.http.okhttp.builder.OkHttpRequestBuilder;
import com.benmu.framework.http.okhttp.builder.OtherRequestBuilder;
import com.benmu.framework.http.okhttp.builder.PostFormBuilder;
import com.benmu.framework.http.okhttp.callback.FileCallBack;
import com.benmu.framework.http.okhttp.callback.StringCallback;
import com.benmu.framework.http.okhttp.cookie.CookieJarImpl;
import com.benmu.framework.http.okhttp.exception.IrregularUrlException;
import com.benmu.framework.http.okhttp.log.LoggerInterceptor;
import com.benmu.framework.manager.Manager;
import com.benmu.framework.manager.ManagerFactory;
import com.benmu.framework.manager.impl.dispatcher.DispatchEventManager;
import com.benmu.framework.model.UploadResultBean;
import com.benmu.framework.utils.AppUtils;
import com.benmu.framework.utils.DebugableUtil;import java.io.File;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import java.util.concurrent.TimeUnit;import okhttp3.Call;
import okhttp3.HttpUrl;
import okhttp3.MediaType;
import okhttp3.OkHttpClient;
import okhttp3.RequestBody;/*** Created by Carry on 2017/8/7. default implement by okHttpUtils*/public class AxiosManager extends Manager {private static final String DEFAULT_MEDIATYPE = "application/json; charset=utf-8";private static final String DEFAULT_HOST = "http://app.weex-eros.com";//创建OkHttpClient对象public OkHttpClient createClient(Context context, long timeout) {CookieJarImpl cookieJar = new CookieJarImpl(new BMPersistentCookieStore(context));OkHttpClient.Builder builder = new OkHttpClient.Builder().addInterceptor(new LoggerInterceptor("TAG"))//接口超时时间  默认3000毫秒.connectTimeout(timeout == 0 ? 3000L : timeout, TimeUnit.MILLISECONDS).readTimeout(timeout == 0 ? 30000L : timeout, TimeUnit.MILLISECONDS).cookieJar(cookieJar);if (DebugableUtil.isDebug()) {builder.addNetworkInterceptor(new WeexOkhttp3Interceptor());}return builder.build();}public void initClient(Context context) {OkHttpUtils.initClient(createClient(context, 0));}public void cancel(Object tag) {}//上面EventFetch get请求调用到这里,这里是真正发起请求的地方,最终通过okhttpUtil发送的请求。public void get(String mUrl, HashMap<String, String> params, HashMap<String, String> header,StringCallback stringCallback, Object tag, long timeout) {mUrl = safeUrl(mUrl);if (mUrl == null) {if (stringCallback != null) {stringCallback.onError(null, new IrregularUrlException("url不合法"), 0);}return;}if (header == null) {header = new HashMap<>();}setTimeout(timeout);//此处使用的是对okhttp进行封装的OkHttpUtils框架发送的get请求,并通过stringCallback回调真正的请求结果。GetBuilder builder = OkHttpUtils.get().url(mUrl).tag(tag).headers(header);generateParams(params, builder);builder.build().execute(stringCallback);}private void setTimeout(long timeout) {if (timeout != 0) {OkHttpUtils.getInstance().updateHttpClient(createClient(BMWXEnvironment.mApplicationContext, timeout));}}private RequestBody createRequestBodyByMediaType(Map<String, String> header, String content) {if (header != null && !TextUtils.isEmpty(header.get("Content-Type"))) {String s = header.get("Content-Type");MediaType mediaType = null;try {mediaType = MediaType.parse(s);} catch (Exception e) {e.printStackTrace();}if (mediaType == null) {mediaType = MediaType.parse(DEFAULT_MEDIATYPE);}return RequestBody.create(mediaType, content);}return RequestBody.create(MediaType.parse(DEFAULT_MEDIATYPE), content);}private String safeUrl(String origin) {if (origin == null) return null;Uri parse = Uri.parse(origin);StringBuilder builder = new StringBuilder();Uri requestHost = Uri.parse(TextUtils.isEmpty(Api.BASE_URL) ? DEFAULT_HOST : Api.BASE_URL);if (TextUtils.isEmpty(parse.getScheme())) {builder.append(requestHost.getScheme());} else {builder.append(parse.getScheme());}builder.append("://");if (TextUtils.isEmpty(parse.getHost())) {builder.append(requestHost.getHost());} else {builder.append(parse.getHost());}if (parse.getPort() != -1) {builder.append(":").append(parse.getPort());}if (!TextUtils.isEmpty(parse.getPath())) {builder.append(origin.substring(origin.indexOf(parse.getPath())));}String finalUrl = builder.toString();return HttpUrl.parse(finalUrl) == null ? null : builder.toString();}private void generateParams(Map<String, String> params, OkHttpRequestBuilder builder) {if (params == null) {params = new HashMap<>();}if (builder instanceof GetBuilder) {GetBuilder getBuilder = (GetBuilder) builder;for (Map.Entry<String, String> entry : params.entrySet()) {getBuilder.addParams(entry.getKey().trim(), entry.getValue().trim());}}}/*** 组合返回给前端的Js 数据*/public UploadResultBean resultBean(int code, String message, ArrayList<String> arrayList) {UploadResultBean uploadResultBean = new UploadResultBean();uploadResultBean.resCode = code;uploadResultBean.msg = message;uploadResultBean.setData(arrayList);return uploadResultBean;}
}
  1. AxiosManager使用的是OkhttpUtils发起的http请求,它对okhttpclient进行的一些配置和拦截。至此,整个js端axios.fetch发起的调用分析结束。

总结

整个eros js端和原生功能封装的比较完整,基本上是按照weex原生功能风格去扩展的。对于前端同学进行纯weex项目开发来说,eros提供了一站式解决方案还是比原生weex开发方便很多。但是也有一些不足的地方,比如说在js 端在非Vue实例中调用widget功能(储存功能可能js里调用)还是稍微有点不方便,需要自己去扩展。还有提供的http模块可配置性和拦截器功能比原生js http框架弱很多,对于复杂的js请求处理起来很别扭,需要自己扩展等等,android原生端实现模块功能切分的比较清晰,不过感觉整个调用逻辑有点绕,还有就是通过绝对路径Key去反射创建对象这个做法有隐患。当然,能够在weex原生的基础上扩展出来这么多功能,还是比较赞的,很多地方还是值得学习的!

后记

下次分析一下eros是如何在weex多页应用中插入js widget功能,多页应用中如何在js端进行全局生命周期监听和全局配置处理。


更多专业前端知识,请上 【猿2048】www.mk2048.com

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/366618.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

多选一的图片和文字

利用 radio 做单选事件&#xff0c;js 兄弟选择 nextSibling 获取邻近的图片对象&#xff0c;然后进行改变 例子&#xff1a; CSS <style type"text/css">input[type"radio"] {display: none;}label{font-size: 16px;}.choose_or{width: 1.2rem;heig…

【每日一题】收集足够苹果的最小花园周长

文章目录 Tag题目来源解题思路方法一&#xff1a;二分枚举答案 写在最后 Tag 【二分枚举答案】【二维网格】【2023-12-24】 题目来源 1954. 收集足够苹果的最小花园周长 解题思路 方法一&#xff1a;二分枚举答案 思路 通过如下过程&#xff0c;我们可以求出边长为 2n 时&…

小数前的0在html不显示,jsp小数显示问题 例如 我在oracle 数据库中查询出来的是 0.01 但是在jsp页面上就显示成 .01 没有前面的0...

满意答案1234junling2013.08.28采纳率&#xff1a;56% 等级&#xff1a;12已帮助&#xff1a;6022人控制保留几位有效小数的js函数//Code CreateBy abandonship 2007.03.12function FormatAfterDotNumber( ValueString, nAfterDotNum ){var ValueString,nAfterDotNum ;var r…

Jira filter subscribe issues

Jira & filter & subscribe & issues https://confluence.atlassian.com/search/?querysubscribeissues&productNameJiraCore&productVersion7.3]https://confluence.atlassian.com/jiracoreserver073/saving-your-search-as-a-filter-861257224.html 转载…

iView 一周年了,同时发布了 2.0 正式版,但这只是开始...

两年前&#xff0c;我开始接触 Vue.js 框架&#xff0c;当时就被它的轻量、组件化和友好的 API 所吸引。之后我将 Vue.js 和 Webpack 技术栈引入我的公司&#xff08;TalkingData&#xff09;可视化团队&#xff0c;并经过一年多的实践&#xff0c;现已成为整个公司的前端开发规…

Hawtio和Apache JClouds

介绍 我最近花了一些时间为Hawtio开发 Apache Jclouds插件。 尽管还有很多待完成的工作&#xff0c;但我无法激动&#xff0c;想分享…… 这个Hawtio到底是什么&#xff1f; 每当我注意到一个很酷的开源项目时&#xff0c;我通常都会订阅邮件列表&#xff0c;以便我可以更好地…

【转】安全加密(一):这些MCU加密方法你都知道吗?

本文导读 随着物联网和边缘计算的出现&#xff0c;五花八门的MCU也被应用其中&#xff0c;如何保证我们的程序安全和知识产权不受侵犯呢&#xff0c;本文我们将对主流MCU的程序加密进行讲解&#xff0c;希望能够帮助你选择最适合自己应用的微处理器。 1. MCU加密 通常所说的MC…

浅谈Vue内置component组件的应用场景

官方的说明 渲染一个“元组件”为动态组件。依 is 的值&#xff0c;来决定哪个组件被渲染。 <!-- 动态组件由 vm 实例的属性值 componentId 控制 --> <component :is"componentId"></component>具体可以官网文档中的 动态组件内置的组件compone…

ulli*3 实现翻书动画效果

按惯例&#xff0c;上GIF&#xff1a;重现&#xff1a;https://codepen.io/anon/pen/JJBxOm 这是我今天参加面试时候&#xff0c;面试官让我做的一道题&#xff0c;面试官坐我旁边看我现场做&#xff0c;然而我比较菜&#xff0c;回来后才做出来…… 来看看HTML部分&#xff1a…

cookie,session 会话跟踪技术

会话跟踪技术 1 什么是会话跟踪技术 我们需要先了解一下什么是会话&#xff01;可以把会话理解为客户端与服务器之间的一次会晤&#xff0c;在一次会晤中可能会包含多次请求和响应。例如你给10086打个电话&#xff0c;你就是客户端&#xff0c;而10086服务人员就是服务器了。…

200行代码写一个简易的dva

在美团实习的时候&#xff0c;第一次接触到dva这样的react框架&#xff0c;回学校的时候&#xff0c;就想有机会自己实现一下这样的框架&#xff0c;虽然自己水平有限&#xff0c;但是可以试一试哈。 目标是实现dva model的同步和异步 dispatch action。 看看 dva 的构成 let…

linux 切换root_Linux运维服务篇:流量监控工具iftop部署及详细参数分享

Linux流量监控工具--iftop介绍&#xff1a;在类Unix系统中可以使用top查看系统资源、进程、内存占用等信息。查看网络状态可以使用netstat、nmap等工具。若要查看实时的网络流量&#xff0c;监控TCP/IP连接等&#xff0c;则可以使用iftop。一、iftop是什么&#xff1f;iftop是类…

RabbitMQ安装以及集群部署

本次记录安装RabbitMQ的过程&#xff0c;只针对MAC下单机版安装、单机集群安装方法以及配置haproxy负载均衡。 RabbitMQ单机版本安装RabbitMQ单机集群安装方法&#xff08;适合开发练习&#xff09;RabbitMQ配置haproxy负载均衡RabbitMQ集群测试&#xff08;待续&#xff09;参…

r 保留之前曲线_生存曲线居然能够批量绘制了

生信分析第三步&#xff1a;生存曲线批量绘制各位解螺旋的小伙伴大家好&#xff0c;我是先锋宇&#xff0c;欢迎大家来到每周日的先锋宇专栏&#xff0c;经过前两期推文的学习&#xff0c;很多小伙伴都私信我说从先锋宇助教的专栏很接地气&#xff0c;自己能够开始慢慢处理数据…

基于vue自动化表单实践

背景 B端系统表单较多&#xff0c;且表单可能含有较多字段字段较多的表单带来了大片HTML代码在大片HTML中&#xff0c;混杂着参数绑定、事件处理等逻辑&#xff0c;不利于维护技术栈 Vue&#xff0c;Element(默认表单布局)适合中后台项目快速开发 目标 通过json配置快速生成表单…

天津科技大学计算机学院复试分数线,2021天津科技大学研究生复试分数线

2021天津科技大学研究生复试分数线已经公布&#xff0c;包含学术学位、专业学位、专项计划复试分数线&#xff0c;供大家参考&#xff0c;如意了在此祝广大考研学子都能顺利上岸。一、2021年天津科技大学研究生分数线1&#xff0e;专业分数线各学院严格执行《2021年全国硕士研究…

使用Eclipse Hibernate插件逐步为POJO域Java类和hbm自动生成代码

概述&#xff1a; 在本教程中&#xff0c;我们将使用Eclipse Hibernate工具自动生成域对象和相应的hbm xml文件。 如果您正在处理大型或中型项目&#xff0c;并且开始时有超过5个以上的表&#xff0c;则可能会发现此插件是自动生成映射域对象java文件和相应* .hbm.xml的绝佳工具…

idea本地跑如何看gc日志_线上故障如何快速排查?来看这套技巧大全

简介&#xff1a;有哪些常见的线上故障&#xff1f;如何快速定位问题&#xff1f;本文详细总结工作中的经验&#xff0c;从服务器、Java应用、数据库、Redis、网络和业务六个层面分享线上故障排查的思路和技巧。较长&#xff0c;同学们可收藏后再看。前言线上定位问题时&#x…

从零打造在线版H5页面生成器

想必你一定使用过易企秀或其它微场景生成工具制作过炫酷的h5页面&#xff0c;除了感叹其神奇之处有没有想过其实现方式呢&#xff1f;从设计者的角度来看待问题&#xff0c;会有不一样的收获&#xff0c;本文将从零开始&#xff0c;使用node技术来设计实现一款精简版的易企秀 G…

使用Struts2,Hibernate和MySQL BLOB开发个人迷你相册应用程序–第1部分

概述&#xff1a; 在本研讨会中&#xff0c;我们将开发一个Web应用程序&#xff0c;可用于创建漂亮的照片库。 您可以将其托管在Web服务器中&#xff0c;也可以在自己的PC中使用以维护和管理照片集。 使用本教程&#xff0c;您将能够了解与Struts2和Hibernate相关的以下重要内容…