// Weex 登录逻辑 login () { let param = { uid: this.uid, password: this.password }; let options = { url: '/getToken', method: 'POST', body: JSON.stringify(param) }; let vm = this; api.fetch(options, function (ret) { if (ret.ok && ret.data.code === 0) { // 前端可以获取到服务端返回的 token ，并将其作为全局变量 global.token = 'Bearer ' + ret.data.data.token; vm.$router.push('/tabIndex'); } else { modal.toast({ message: '用户认证失败!', duration: 1 }); } }); } // Weex 的每次请求，头部都带上 token initOptions.headers['Authorization'] = global.token;
经过以上代码逻辑处理后，我们查看 Weex 向服务端发送的请求头部，都携带了 token，如下图所示。这样服务端 express 处理这个请求时，就可以通过解析 token 获取到对应的用户 id ，从而允许其对服务端的数据访问。
4.4.2、图片选择/上传功能
（1）存在问题
很遗憾，Weex 竟然没有提供文件选择/上传的模块，对于前端开发者来说无疑晴天霹雳，那我不是要手动去写 Android 的 java 代码，经过反复查找，真的没有文件选择/上传模块，于是我们只能自己去写 Java 代码去实现 Android 端图片选择以及上传功能。当然，也可以使用一些第三方的插件。
（2）实现 Android 原生的图片选择/上传功能
在 weex_projectplatformsandroidappsrcmainjavacomweexappextend 目录下新建 图片上传 模块的类 WXAlbumModule ，其继承 WXModule ，其主要两个方法为 choosePhoto 和 onActivityResult ，其中 choosePhoto 用于给 Weex 前端来调用，当 Weex 前端需要选择相册中的图片时，Weex 前端就调用 choosePhoto 方法；onActivityResult 是用户选择好相册中的图片后，会相应触发该事件，并将用户选择的相片以参数形式传入 onActivityResult ，从而我们可以在 onActivityResult 中进行图片的上传逻辑，图片上传完成后，Android 端会在回调事件中通知前端，图片放置在服务端的目录路径，前端可以对应进行图片显示等操作。关键代码逻辑如下，如果如果对 Java 完全一无所知的同学可以先不看，懂 java 代码的建议结合项目代码来看，会更清晰。
例如，下面是Android端封装的
@JSMethod(uiThread = true) // 给 Weex 前端调用，当用户点击时，调用该函数 public void choosePhoto(String param, JSCallback callback) { if (ContextCompat.checkSelfPermission(mWXSDKInstance.getContext(), Manifest.permission.WRITE_EXTERNAL_STORAGE) != PackageManager.PERMISSION_GRANTED) { ActivityCompat.requestPermissions((WXPageActivity) mWXSDKInstance.getContext(), new String[]{Manifest.permission.WRITE_EXTERNAL_STORAGE}, CAMERA_REQUEST_CODE); } else { choosePhoto(); } try{ JSONObject jsonObject = new JSONObject(param); this.type = (String)jsonObject.get("type"); this.path = (String)jsonObject.get("path"); this.url = (String)jsonObject.get("url"); this.token = (String)jsonObject.get("token"); }catch (JSONException e){ e.printStackTrace(); } this.callback = callback; }
选择完成后，系统会返回图片的信息，此时就可以进行上传操作，如下所示：
@Override // 用户选择好相册中的图片后，会相应触发该事件，并将用户选择的相片以参数形式传入 public void onActivityResult(int requestCode, int resultCode, Intent data) { if (resultCode == WXPageActivity.RESULT_OK) { switch (requestCode) { case CAMERA_REQUEST_CODE: { try { Uri selectedImage = data.getData(); String[] filePathColumns = {MediaStore.Images.Media.DATA}; Cursor c = mWXSDKInstance.getContext().getContentResolver().query(selectedImage, filePathColumns, null, null, null); c.moveToFirst(); int columnIndex = c.getColumnIndex(filePathColumns[0]); String picturePath = c.getString(columnIndex); c.close(); //上传的文件 File file = new File(picturePath); // 普通参数 HashMap<String , String> params = new HashMap<>(); params.put("path", this.path); uploadForm(params, "file", file, "", this.url); } catch (Exception e) { e.printStackTrace(); } break; } } } super.onActivityResult(requestCode, resultCode, data); }
实现好以上选择图片和上传图片的代码逻辑后，我们需要在 weex_projectplatformsandroidappsrcmainjavaWXApplication.java 中进行模块的注册，代码逻辑如下：
WXSDKEngine.registerModule("wxalbum", WXAlbumModule.class);
然后，Weex 前端调用注册的原生模块即可，如下所示：