Weex 阿里跨平台开发组件扩展库

WeexPlus

为解决目前移动开发频繁的迭代、开发周期长、人员成本高的问题，移动跨平台开发方案层出不穷。 WeexPlus则是一款基于阿里weex跨平台方案(android/ios/h5)开发的weex端与android native交互的组件扩展库，提供页面导航、数据存储、图片选择、二维码识别、权限等原生功能。web开发者不用再为调用native功能而烦恼，android开发者轻松搞定hybrid开发。

若是你想采用纯原生快速开发方案，请移步：MVVMHabit

源码地址：github.com/goldze/Weex…

框架特色

• 快速集成

  不论是web开发者，仍是android开发者，均可以快速的集成此库。

• 事件模式

  总体使用事件派发思想，weex与native彻底解耦，相互不依赖。weex端指定惟一的Action(动做)，native端会根据Action作出判断，执行对应的逻辑，响应结果。

• 页面加载器

  WeexPlus提供一个原生的页面加载器，只须要传入JSBundle文件路径(本地/网络均可以)，会自动渲染页面，并带有material design加载效果。加载失败显示错误信息，可点击从新加载。

一、准备工做

WeexPlus基于Weex技术，Weex 是一个使用 Web 开发体验来开发高性能原生应用的框架，因此你须要掌握必定的Weex开发知识。相关文档

根据官方介绍配置安装weex开发环境

1.一、android视角

WeexPlus是集成了weex_sdk、glide、rxpermissions2、rxjava2、matisse、zxing、material的一套android library。提供了页面导航、数据存储、图片选择、二维码识别、权限等原生功能给weex端调用，节约了本身再去开发这样一套库的时间成本。

无论你是作hybrid开发，仍是纯跨平台开发，android端直接依赖此库(业务逻辑交给前端去搞定 罒ω罒)。

1.1.一、依赖方式

• 源码依赖： 下载例子程序，直接import weexplus module

• 远程依赖：

//添加仓库支持
    repositories {
        ...
        maven { url 'https://jitpack.io' }
    }
    //远程依赖
    implementation 'com.github.goldze:WeexPlus:1.0.0'
复制代码

建议使用源码依赖的方式，方便业务扩展。

1.1.二、配置Application

继承weexplus中的WeexApplication，或者在你Application的onCreate方法中调用：

WeexApplication.initialize(this);
复制代码

1.1.三、混淆

-keep class me.goldze.weex.** { *; }
-dontwarn me.goldze.weex.**
复制代码

1.二、web视角

WeexPlus可让你在没有android开发人员的状况下，知足native功能调用的需求。

1.2.一、依赖方式

下载例子程序，将 android 文件夹整个放入weex目录的 platforms 下，再也不须要命令weex platform add android生成android程序。

1.2.二、配置app

项目集成好后，经过android studio打开android项目，找到app/src/main/res/values/strings.xml，修改app名称和第一个页面入口url的值。

<!--app名称-->
<string name="app_name">WeexPlus</string>
<!-- 入口url 换成你本身的第一个页面文件，能够是本地, 也能够是网络 -->
<string name="entrance_url">file://main_demo.js</string>
复制代码

集成好后执行 weex run android 看效果

二、weex调用

导入 WeexPlus 的 AppModule 组件

//App原生通讯模块
const appModule = weex.requireModule("AppModule");
复制代码

经过调用appModule.event(string,map,function,function)方法，来实现与native的通讯。其中，

第一个参数string：表明action，指调用功能的动做，是打开页面仍是关闭页面仍是选择图片；
第二个参数map：须要传入的参数；
第三个参数function：逻辑成功的回调；
第四个参数function：逻辑失败的回调。

全部与本地方法的通讯都是按照此结构来操做。

2.一、页面导航

2.1.一、打开页面

打开一个带有页面加载器的新页面

appModule.event(
        "START_PAGER",
        {
          url: geRootIp() + "/dist/index.js",
          title: "新页面",
          data: {}
        },
        function(e) {
          //页面打开完成的回调
        },
        function(e) {
          //页面打开失败的回调
        }
      );
复制代码

START_PAGER：动做名，表示须要打开一个新页面；
url：新页面JSBundle文件路径；
title：新页面的标题；注意：当值为NO_NAVIGATION时不显示标题栏；
data：须要传入到下一个界面的参数。

若是须要将参数传入下一个页面，这里提供了两种方法：

• 一种是，将参数放入url中，例如http:...?user=123&psw=abc，新页面经过weex.config.bundleUrl拿到当前url，经过字符串截取的方式取出参数值。
• 另外一种是，在新页面的created方法中，获取data字段传入过来的数据(推荐)。

created: function () {
      globalEvent.addEventListener("init", function(e) {
		//e.data便是上个页面data字段传过来的值
        console.log(e.data);
      });
    },
复制代码

2.1.二、关闭页面

关闭当前界面

appModule.event(
        "CLOSE_PAGER",
        {},
        function(e) {
           //页面关闭完成的回调
        },
        function(e) {
           //页面关闭失败的回调
        }
      );
复制代码

CLOSE_PAGER：动做名，表示须要关闭当前界面。

2.二、数据存储

这里说明一下：自己weex提供了storage模块, 为何这里又要本身写一个SharedPreferences存储呢？为的是weex与原生更好的通讯。好比混合开发时, 登陆界面是原生界面，登陆成功后本地保存用户惟一标识，当进入weex界面时能够经过该模块取出用户惟一标识，实现相应逻辑。

2.2.一、写入数据

将数据保存到手机本地

appModule.event(
        "WRITE_DATA",
        {
          key: "user_info",
          value: "{'userName':'张三','age':'18岁'}"
        },
        function(e) {
          toastModule.showShort("写入成功!");
        }
      );
复制代码

WRITE_DATA：动做名，表示须要写入数据；
key：键名称； value：存入的数据。

2.2.二、读取数据

读取本地存储的数据

appModule.event(
        "READ_DATA",
        {
          key: "user_info"
        },
        function(e) {
          toastModule.showShort(e.value);
        }
      );
复制代码

READ_DATA：动做名，表示须要读取数据；
key：键名称；
e.value：在成功回调的方法中，获得存入的值。

2.三、图片选择

appModule.event(
        "IMAGE_SELECT",
        {},
        function(e) {
          toastModule.showShort("选择了" + e.imgs.length + "张照片");
        },
        function(e) {
          toastModule.showShort("图片选择失败!");
        }
      );
复制代码

IMAGE_SELECT：动做名，表示打开图片选择器选择图片；
e.imgs：多张图片绝对路径的集合，WeexPlus 中配置了ImageAdapter，可直接经过image组件的 :src属性加载。

2.四、二维码

2.4.一、识别二维码

打开二维码识别界面(二维码采用Google ZXing开源方案)。

appModule.event(
        "SCANNING_QR",
        {},
        function(e) {
          toastModule.showShort(e.result);
        },
        function(e) {
          toastModule.showShort("扫描失败，请检查权限是否打开!");
        }
      );
复制代码

SCANNING_QR：动做名，表示打开二维码识别界面；
e.result：二维码识别的结果，返回一个字符串

2.4.二、生成二维码

功能暂时屏蔽，大多数生成二维码的需求是由服务端实现

效果图

相关文档

Weex概念快速上手

Weex技术手册快览

Weex工程原理

License

Copyright 2018 goldze(曾宪泽)

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

 Unless required by applicable law or agreed to in writing, software
 distributed under the License is distributed on an "AS IS" BASIS,
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.复制代码