Weex 阿里跨平臺(tái)開(kāi)發(fā)組件擴(kuò)展庫(kù)

WeexPlus

為解決目前移動(dòng)開(kāi)發(fā)頻繁的迭代、開(kāi)發(fā)周期長(zhǎng)、人員成本高的問(wèn)題，移動(dòng)跨平臺(tái)開(kāi)發(fā)方案層出不窮。 WeexPlus則是一款基于阿里weex跨平臺(tái)方案(android/ios/h5)開(kāi)發(fā)的weex端與android native交互的組件擴(kuò)展庫(kù)，提供頁(yè)面導(dǎo)航、數(shù)據(jù)存儲(chǔ)、圖片選擇、二維碼識(shí)別、權(quán)限等原生功能。web開(kāi)發(fā)者不用再為調(diào)用native功能而煩惱，android開(kāi)發(fā)者輕松搞定hybrid開(kāi)發(fā)。

如果你想采用純?cè)焖匍_(kāi)發(fā)方案，請(qǐng)移步：MVVMHabit

源碼地址：https://github.com/goldze/WeexPlus

框架特點(diǎn)

  • 快速集成

    不管是web開(kāi)發(fā)者，還是android開(kāi)發(fā)者，都可以快速的集成此庫(kù)。

  • 事件模式

    整體使用事件派發(fā)思想，weex與native完全解耦，相互不依賴(lài)。weex端指定唯一的Action(動(dòng)作)，native端會(huì)根據(jù)Action做出判斷，執(zhí)行對(duì)應(yīng)的邏輯，響應(yīng)結(jié)果。

  • 頁(yè)面加載器

    WeexPlus提供一個(gè)原生的頁(yè)面加載器，只需要傳入JSBundle文件路徑(本地/網(wǎng)絡(luò)都可以)，會(huì)自動(dòng)渲染頁(yè)面，并帶有material design加載效果。加載失敗顯示錯(cuò)誤信息，可點(diǎn)擊重新加載。

1、準(zhǔn)備工作

WeexPlus基于Weex技術(shù)，Weex 是一個(gè)使用 Web 開(kāi)發(fā)體驗(yàn)來(lái)開(kāi)發(fā)高性能原生應(yīng)用的框架，所以你需要掌握一定的Weex開(kāi)發(fā)知識(shí)。相關(guān)文檔

根據(jù)官方介紹配置安裝weex開(kāi)發(fā)環(huán)境

1.1、android視角

WeexPlus是集成了weex_sdk、glide、rxpermissions2、rxjava2、matisse、zxing、material的一套android library。提供了頁(yè)面導(dǎo)航、數(shù)據(jù)存儲(chǔ)、圖片選擇、二維碼識(shí)別、權(quán)限等原生功能給weex端調(diào)用，節(jié)約了自己再去開(kāi)發(fā)這樣一套庫(kù)的時(shí)間成本。

不管你是做hybrid開(kāi)發(fā)，還是純跨平臺(tái)開(kāi)發(fā)，android端直接依賴(lài)此庫(kù)(業(yè)務(wù)邏輯交給前端去搞定 罒ω罒)。

1.1.1、依賴(lài)方式

  • 源碼依賴(lài)： 下載例子程序，直接import weexplus module

  • 遠(yuǎn)程依賴(lài)：

    //添加倉(cāng)庫(kù)支持
    repositories {
        ...
        maven { url 'https://jitpack.io' }
    }
    //遠(yuǎn)程依賴(lài)
    implementation 'com.github.goldze:WeexPlus:1.0.0'

建議使用源碼依賴(lài)的方式，方便業(yè)務(wù)擴(kuò)展。

1.1.2、配置Application

繼承weexplus中的WeexApplication，或者在你Application的onCreate方法中調(diào)用：

WeexApplication.initialize(this);

1.1.3、混淆

-keep class me.goldze.weex.** { *; }
-dontwarn me.goldze.weex.**

1.2、web視角

WeexPlus可以讓你在沒(méi)有android開(kāi)發(fā)人員的情況下，滿(mǎn)足native功能調(diào)用的需求。

1.2.1、依賴(lài)方式

下載例子程序，將 android 文件夾整個(gè)放入weex目錄的 platforms 下，不再需要命令weex platform add android生成android程序。

1.2.2、配置app

項(xiàng)目集成好后，通過(guò)android studio打開(kāi)android項(xiàng)目，找到app/src/main/res/values/strings.xml，修改app名稱(chēng)和第一個(gè)頁(yè)面入口url的值。

<!--app名稱(chēng)-->
<string name="app_name">WeexPlus</string>
<!-- 入口url 換成你自己的第一個(gè)頁(yè)面文件，可以是本地, 也可以是網(wǎng)絡(luò) -->
<string name="entrance_url">file://main_demo.js</string>

集成好后執(zhí)行 weex run android 看效果

2、weex調(diào)用

導(dǎo)入 WeexPlus 的 AppModule 組件

//App原生通信模塊
const appModule = weex.requireModule("AppModule");

通過(guò)調(diào)用appModule.event(string,map,function,function)方法，來(lái)實(shí)現(xiàn)與native的通信。其中，

第一個(gè)參數(shù)string：代表action，指調(diào)用功能的動(dòng)作，是打開(kāi)頁(yè)面還是關(guān)閉頁(yè)面還是選擇圖片；</br>
第二個(gè)參數(shù)map：需要傳入的參數(shù)；</br>
第三個(gè)參數(shù)function：邏輯成功的回調(diào)；</br>
第四個(gè)參數(shù)function：邏輯失敗的回調(diào)。</br>

所有與本地方法的通信都是按照此結(jié)構(gòu)來(lái)操作。

2.1、頁(yè)面導(dǎo)航

2.1.1、打開(kāi)頁(yè)面

打開(kāi)一個(gè)帶有頁(yè)面加載器的新頁(yè)面

    appModule.event(
        "START_PAGER",
        {
          url: geRootIp() + "/dist/index.js",
          title: "新頁(yè)面",
          data: {}
        },
        function(e) {
          //頁(yè)面打開(kāi)完成的回調(diào)
        },
        function(e) {
          //頁(yè)面打開(kāi)失敗的回調(diào)
        }
      );

START_PAGER：動(dòng)作名，表示需要打開(kāi)一個(gè)新頁(yè)面；</br>
url：新頁(yè)面JSBundle文件路徑；</br>
title：新頁(yè)面的標(biāo)題；注意：當(dāng)值為NO_NAVIGATION時(shí)不顯示標(biāo)題欄；</br>
data：需要傳入到下一個(gè)界面的參數(shù)。

如果需要將參數(shù)傳入下一個(gè)頁(yè)面，這里提供了兩種方法：

  • 一種是，將參數(shù)放入url中，例如http:...?user=123&psw=abc，新頁(yè)面通過(guò)weex.config.bundleUrl拿到當(dāng)前url，通過(guò)字符串截取的方式取出參數(shù)值。
  • 另一種是，在新頁(yè)面的created方法中，獲取data字段傳入過(guò)來(lái)的數(shù)據(jù)(推薦)。
    created: function () {
      globalEvent.addEventListener("init", function(e) {
        //e.data即是上個(gè)頁(yè)面data字段傳過(guò)來(lái)的值
        console.log(e.data);
      });
    },

2.1.2、關(guān)閉頁(yè)面

關(guān)閉當(dāng)前界面

      appModule.event(
        "CLOSE_PAGER",
        {},
        function(e) {
           //頁(yè)面關(guān)閉完成的回調(diào)
        },
        function(e) {
           //頁(yè)面關(guān)閉失敗的回調(diào)
        }
      );

CLOSE_PAGER：動(dòng)作名，表示需要關(guān)閉當(dāng)前界面。

2.2、數(shù)據(jù)存儲(chǔ)

這里說(shuō)明一下：本身weex提供了storage模塊, 為什么這里又要自己寫(xiě)一個(gè)SharedPreferences存儲(chǔ)呢？為的是weex與原生更好的通信。比如混合開(kāi)發(fā)時(shí), 登錄界面是原生界面，登錄成功后本地保存用戶(hù)唯一標(biāo)識(shí)，當(dāng)進(jìn)入weex界面時(shí)可以通過(guò)該模塊取出用戶(hù)唯一標(biāo)識(shí)，實(shí)現(xiàn)相應(yīng)邏輯。

2.2.1、寫(xiě)入數(shù)據(jù)

將數(shù)據(jù)保存到手機(jī)本地

      appModule.event(
        "WRITE_DATA",
        {
          key: "user_info",
          value: "{'userName':'張三','age':'18歲'}"
        },
        function(e) {
          toastModule.showShort("寫(xiě)入成功!");
        }
      );

WRITE_DATA：動(dòng)作名，表示需要寫(xiě)入數(shù)據(jù)；</br>
key：鍵名稱(chēng)；
value：存入的數(shù)據(jù)。

2.2.2、讀取數(shù)據(jù)

讀取本地存儲(chǔ)的數(shù)據(jù)

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

READ_DATA：動(dòng)作名，表示需要讀取數(shù)據(jù)；</br>
key：鍵名稱(chēng)；</br>
e.value：在成功回調(diào)的方法中，得到存入的值。

2.3、圖片選擇

      appModule.event(
        "IMAGE_SELECT",
        {},
        function(e) {
          toastModule.showShort("選擇了" + e.imgs.length + "張照片");
        },
        function(e) {
          toastModule.showShort("圖片選擇失敗!");
        }
      );

IMAGE_SELECT：動(dòng)作名，表示打開(kāi)圖片選擇器選擇圖片；</br>
e.imgs：多張圖片絕對(duì)路徑的集合，WeexPlus 中配置了ImageAdapter，可直接通過(guò)image組件的 :src屬性加載。

2.4、二維碼

2.4.1、識(shí)別二維碼

打開(kāi)二維碼識(shí)別界面(二維碼采用Google ZXing開(kāi)源方案)。

      appModule.event(
        "SCANNING_QR",
        {},
        function(e) {
          toastModule.showShort(e.result);
        },
        function(e) {
          toastModule.showShort("掃描失敗，請(qǐng)檢查權(quán)限是否打開(kāi)!");
        }
      );

SCANNING_QR：動(dòng)作名，表示打開(kāi)二維碼識(shí)別界面；</br>
e.result：二維碼識(shí)別的結(jié)果，返回一個(gè)字符串

2.4.2、生成二維碼

功能暫時(shí)屏蔽，大多數(shù)生成二維碼的需求是由服務(wù)端實(shí)現(xiàn)

效果圖

<img src="https://user-gold-cdn.xitu.io/2018/6/11/163ec89746c9a242?w=1080&h=1920&f=png&s=68426" width="288" hegiht="512" align=center /><img src="https://user-gold-cdn.xitu.io/2018/6/11/163ec8a088835e95?w=1080&h=1920&f=png&s=104774" width="288" hegiht="512" align=center /><img src="https://user-gold-cdn.xitu.io/2018/6/11/163ec8a74fe743f2?w=1080&h=1920&f=png&s=73863" width="288" hegiht="512" align=center /><img src="https://user-gold-cdn.xitu.io/2018/6/11/163ec8aeb397d5f0?w=1080&h=1920&f=png&s=810603" width="288" hegiht="512" align=center /><img src="https://user-gold-cdn.xitu.io/2018/6/11/163ec8c00f37d0a8?w=1080&h=1920&f=png&s=54384" width="288" hegiht="512" align=center /><img src="https://user-gold-cdn.xitu.io/2018/6/11/163ec8c40dd9b00a?w=1080&h=1920&f=png&s=1308075" width="288" hegiht="512" align=center /><img src="https://user-gold-cdn.xitu.io/2018/6/11/163ec8c8793597bb?w=1080&h=1920&f=png&s=92304" width="288" hegiht="512" align=center /><img src="https://user-gold-cdn.xitu.io/2018/6/11/163ec8cb1fd994c7?w=1080&h=1920&f=png&s=75377" width="288" hegiht="512" align=center /><img src="https://user-gold-cdn.xitu.io/2018/6/11/163ec8cdd29f96aa?w=1080&h=1920&f=png&s=272309" width="288" hegiht="512" align=center />

<div id="xgwd">相關(guān)文檔</div>

Weex概念快速上手

Weex技術(shù)手冊(cè)快覽

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.
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 179,063評(píng)論 25贊 709
  • 前言 2016年4月21日，阿里巴巴在Qcon大會(huì)上宣布跨平臺(tái)移動(dòng)開(kāi)發(fā)工具Weex開(kāi)放內(nèi)測(cè)邀請(qǐng)。Weex能夠完美兼...
    一縷殤流化隱半邊冰霜閱讀 39,469評(píng)論 135贊 365
  • 2016年4月21日，阿里巴巴在Qcon大會(huì)上宣布開(kāi)源跨平臺(tái)移動(dòng)開(kāi)發(fā)工具Weex，Weex能夠完美兼顧性能與動(dòng)態(tài)性...
    晴天咚咚閱讀 2,997評(píng)論 1贊 15
  • 今天老師留的話題是什么事情改變命運(yùn)？看到這個(gè)話題讓我想起自己的一段經(jīng)歷，也許就是這件事改變了我，也是我人生的一大轉(zhuǎn)...
    朋友你好嗎閱讀 165評(píng)論 3贊 0
  • 今天是我報(bào)道姑蘇平安服務(wù)隊(duì)的第一天，也是第一次做志愿者，服務(wù)站點(diǎn)是樂(lè)橋站。 由于自身原因，只有8點(diǎn)以后才有時(shí)間做志...
    aibigail閱讀 302評(píng)論 0贊 1

友情鏈接更多精彩內(nèi)容