适合前端Vue开发童鞋的跨平台Weex的使用详解

npm install weex-toolkit -g

weex create weex_project

cd weex_project
npm install

npm start

weex platform add android

weex run android

$ npm install

$ npm run start

$ npm install -g weex-toolkit

$ npm install

$ npm run start

var expressJWT = require('express-jwt');
// token 设置
app.use(expressJWT({
 secret: CONSTANT.SECRET_KEY
}).unless({
 // 除了以下配置的地址，其他的URL都需要验证
 path: ['/getToken', /^\/public\/.*/, /^\/user_disk\/.*/]
}));

// 登录时，需要进行用户密码认证，相应路由跳转到下面一步
app.use('/getToken', tokenRouter);

// 当用户密码正确时，我们进行 token 设置
data: {
 token: jsonWebToken.sign({
 uid: obj.uid
 }, CONSTANT.SECRET_KEY, {
 expiresIn: 60 * 60 * 1
 }),
}

// 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;

@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);
}

WXSDKEngine.registerModule("wxalbum", WXAlbumModule.class);

const WXAlbum = weex.requireModule('wxalbum');

upload () {
 let path = 'public/upload/';
 let vm = this;
 storage.getItem('token', event => {
 let param = {
 type: 'image/jpeg', // 选择的数据类型
 path: path,
 url: CONSTANT.SERVER_URL + '/users/upload',
 token: event.data
 };
 WXAlbum.choosePhoto(JSON.stringify(param), ret => {
 let obj = JSON.parse(ret);
 vm.imgPath = '/' + path + obj.file[0].originalFilename;
 modal.alert({
 message: vm.imgPath,
 okTitle: '确认'
 }, function () {
 console.log('alert callback')
 })
 });
 })
},

// 该类主要实现 Websocket 的连接、发送消息、接收消息、关闭等函数或事件
public class DefaultWebSocketAdapter implements IWebSocketAdapter {
 @Override
 public void connect(){...}
 @Override
 public void send(String data) {...}
 @Override
 public void close(int code, String reason) {...}
 @Override
 public void destroy() {...}
 ... 
}

// 该类主要为创建 Websocket 对象的工厂类
public class DefaultWebSocketAdapterFactory implements IWebSocketAdapterFactory {
 @Override
 public IWebSocketAdapter createWebSocketAdapter() {
 return new DefaultWebSocketAdapter();
 }
}

WXSDKEngine.initialize(this,
 new InitConfig.Builder().setImgAdapter(new ImageAdapter()). setWebSocketAdapterFactory(new DefaultWebSocketAdapterFactory()).build()
);

const ws = weex.requireModule('webSocket');

ws.WebSocket(CONSTANT.SOCKET_WS, '');
// 需要注意 web 端的写法和 android 端的写法不一样
// android 的 onxx 事件是一个方法，需要传入一个JSCallback的值，
if (weex.config.env.platform === 'Web') {
 ws.onmessage = this.socketMessage;
} else {
 ws.onmessage(this.socketMessage);
}

 public void onBackPressed(){
 Map<String,Object> params=new HashMap<>();
 params.put("name","msg");
 mInstance.fireGlobalEventCallback("androidback",params);
 }

listenAndroidBack () {
 let vm = this;
 globalEvent.addEventListener('androidback', function (e) {
 if (vm.$route.name === 'tabIndex' || vm.$route.name === 'loginPage') {
 if (vm.exitFlag) {
 weex.requireModule('wxclose').closeApp();
 } else {
 modal.toast({
 message: '再点一次退出',
 duration: 1
 });
 vm.exitFlag = true;
 vm.clearExitFlag();
 }
 } else {
 vm.$router.go(-1);
 }
 });
},

<image ref="poster" src="/UploadFiles/2021-04-02/image.png">

（2）Android/IOS 端显示本地图片
Weex 没有在将 vue 编译成 Android 组件时，对应将图片放置到 Android 对应的目录下，所以我们只好自己将图片手动再放置一份，其中 Android 端需要额外将图片放在 /platforms/android/app/src/main/res/drawable-xxhdpi ，IOS 放入xcode 底下的 /Source/images/下 ，然后我们在代码逻辑中，根据环境判断现在是 Web 环境、Android 环境或者 IOS 环境，再对应的获取对应目录下的图片（暂时只能做到这种程度了...），如下代码所示:


const ICON_URL = {
 Web: `${WEB_IMAGE_URL}`,
 android: `local:///${pureName}`,
 iOS: `local:///filePng/${pureName}${suffixName}`
}
return ICON_URL[CUR_RUN_PLATFORM];



五、编译 Android apk
Android apk 打包分 debug 版和 release 版，通常所说的打包指生成 release 版的 apk，release 版的 apk 会比debug 版的小，release 版的还会进行混淆和用自己的 keystore 签名，以防止别人反编译后重新打包替换你的应用。 下面我们主要介绍如何在 Android Studio 中对 weex 项目进行打包。
5.1、Android 平台目录
Android Studio 打开 Android 工程，目录为：weex 项目 /platforms/android 。
5.2、常规的 AS 打包分为两种
一种是没有 “.jks” 文件的打包

一种是有 “.jks” 文件的打包

注：.jks” 文件 类似 apk 身份证；
5.3、没有 “ .jks ” 文件的打包
（1）打包步骤如下截图：








（2）我们点击选择 【Create new】创建jks





（3）填写 key 的相关信息





（4）点击 OK 之后，可以看到如下信息已被自动填充，并点击打包即可。








（5）等待打包完成后，就可以查看打包好的 apk 文件



六、Weex 开发总结
6.1、官网经常无法访问
Weex 官网经常出现无法访问的情况，频率大概一周至少一次；这就很影响开发效率了，因为在开发过程中需要经常查看官网的写法、说明等，如果访问不了，则会造成一定程度的开发 block。
6.2、官网文档粗糙
Weex 官网的文档比较粗糙，如果没有比较好的前端和移动端原生开发知识储备的话，看官网的文档就很吃力了，官网很多讲解写的非常简单，都默认你同时熟练前端和移动端原生开发，而且同时有较好前端和移动端原生开发人员应该在业界还比较少吧。
6.3、生态贫瘠
Weex 生态是真的贫瘠，除了阿里自己出产的组件库 weex-ui 外，其它的相关插件几乎找不到，有也是少于100个 star 的，例如我在项目开始前设计的一些功能：拍照、图片选择上传、语音录入、通讯、定位、文件预览等等移动端的特有功能，都没有插件，都需要自己去写 Android 的原生代码，那这时就失去了利用框架提高开发效率的意义；生态跟 react-native 差的真不是一丁半点，而是根本不是一个量级。
6.4、是否两个 Weex 版本
结合上一点，坊间传闻：Weex 存在两个版本，一个版本是阿里内部使用的，一个是非阿里内部使用；这个传言无从验证，但是结合第2点说的 Weex 生态贫瘠，我却无意在浏览器搜索中，发现了一系列常见功能的插件封装：weex.apache.org/zh/biz-comp… ，截图如下，但是这些插件并没有提供出来使用，存在 Weex 官网中，但是却没有访问入口。如果这些插件功能能提供使用，无疑将很大程度丰富 Weex 的生态。



6.5、三端兼容性不好
Weex 号称 “一次撰写，多端运行”，但是存在很多兼容性问题，比如我们在 Web 端调试开完后一个功能模块，但是在 Android 端一运行，就各种跑不通，各种兼容性问题；这种问题导致，我们后期根本不敢在 Web 环境开发，例如：我们这个项目是想开发个 Android 的 app，我们最终都直接在 Android 环境下开发，这种效率肯定就没有在 Web 环境开发效率高。
6.6、Vue 支持度不够
Weex 默认集成 Vue 框架，而且主打 Vue 受众，但是 Weex 对 Vue 的支持度还不够，除了官网上提到的那些 vue 特性不支持外，还有很多特性没有被列出，例如：vuex 等。
参考：

1，Weex实战项目链接

2，移动跨平台技术方案总结

3，Weex开发之地图篇

4，Weex Eros快速入门

5，WEEX环境搭建与入门

6，Weex开发之WEEX-EROS开发踩坑


以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。