Weex 阿里跨平臺開發組件擴展庫

時間 2019-12-08

原文原文鏈接

WeexPlus

爲解決目前移動開發頻繁的迭代、開發週期長、人員成本高的問題，移動跨平臺開發方案層出不窮。 WeexPlus則是一款基於阿里weex跨平臺方案(android/ios/h5)開發的weex端與android native交互的組件擴展庫，提供頁面導航、數據存儲、圖片選擇、二維碼識別、權限等原生功能。web開發者不用再爲調用native功能而煩惱，android開發者輕鬆搞定hybrid開發。html

若是你想採用純原生快速開發方案，請移步：MVVMHabit前端

源碼地址：github.com/goldze/Weex…vue

框架特色

快速集成java

不論是web開發者，仍是android開發者，均可以快速的集成此庫。android
事件模式ios

總體使用事件派發思想，weex與native徹底解耦，相互不依賴。weex端指定惟一的Action(動做)，native端會根據Action作出判斷，執行對應的邏輯，響應結果。git
頁面加載器github

WeexPlus提供一個原生的頁面加載器，只須要傳入JSBundle文件路徑(本地/網絡均可以)，會自動渲染頁面，並帶有material design加載效果。加載失敗顯示錯誤信息，可點擊從新加載。web

一、準備工做

WeexPlus基於Weex技術，Weex 是一個使用 Web 開發體驗來開發高性能原生應用的框架，因此你須要掌握必定的Weex開發知識。相關文檔express

根據官方介紹配置安裝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.二、生成二維碼

功能暫時屏蔽，大多數生成二維碼的需求是由服務端實現

效果圖

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.複製代碼