android中weex如何使用

android中weex如何使用，相信很多沒有經(jīng)驗(yàn)的人對(duì)此束手無策，為此本文總結(jié)了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個(gè)問題。

Weex 是什么

Weex is a extendable cross-platform solution for dynamic programming and publishing projects.
Weex是針對(duì)動(dòng)態(tài)編程和發(fā)布項(xiàng)目的一個(gè)可擴(kuò)展、跨平臺(tái)的解決方案。

這是來自Weex Document的介紹。這句話個(gè)人感覺還是非常有誘惑力的。為什么？擊中移動(dòng)端開發(fā)兩個(gè)痛點(diǎn)。

1. 動(dòng)態(tài)編程＋發(fā)布。Weex能做到隨時(shí)編程發(fā)布到服務(wù)端，應(yīng)用端即時(shí)更新。想想以前，應(yīng)用開發(fā)－測(cè)試－發(fā)布，多么繁瑣和耗時(shí)的一個(gè)流程，萬一線上出了bug，那真是痛不欲生，尤其時(shí)用戶量上百萬千萬的應(yīng)用，老板連殺你的心都有。但是有了Weex就不一樣了。修復(fù)bug，用戶都是無感知的（老板也是無感知的，哈哈哈）。

2. 跨平臺(tái)。這是移動(dòng)端無數(shù)人向往的和為之努力的事。一處編寫，到處運(yùn)行。Weex支持Android，iOS，Web三大平臺(tái)，一份代碼，三個(gè)平臺(tái)通用。等到有一天，Weex真的發(fā)展強(qiáng)大起來，公司成本估計(jì)可以節(jié)省不少。會(huì)不會(huì)一個(gè)Weex開發(fā)人員拿三份工資呢？（估計(jì)是我想太多????）

   github地址:[https://github.com/alibaba/weex(https://github.com/alibaba/weex)

Meet weex

• Install Weex Playground App to see examples we already written.

• If you want to write a demo, install weex-toolkit in Node.js 4.0+ and

• Run weex init to generate & start a simple project in an empty folder.

• Follow the instructions in the project README.

• Enjoy it.
  安裝Playground.apk到手機(jī)端，如果你想寫一個(gè)demo，安裝weex-toolkit在Node.js 4.0+環(huán)境的基礎(chǔ)上，用weex生成并啟動(dòng)一個(gè)簡(jiǎn)單的工程在一個(gè)文件夾中。詳情請(qǐng)查看README

For android

 

Prerequisites

• Install Node.js 4.0+

• Under project root
  -- npm install, install project
  -- ./start

• Install Android Environment

  Run playground, In Android Studio

• Open android/playground

• In app/java/com.alibaba.weex/IndexActivity, modify CURRENT_IP to your local IP
  Click  (Run button)

  Add an example

綜上所述，首先需要安裝node.js4.0+環(huán)境。然后安裝weex-toolkit工具生成.we文件，使用Playground.apk進(jìn)行掃一掃安裝到手機(jī)端進(jìn)行調(diào)試。
也可以使用weex-devtools(android)使用chrome瀏覽器進(jìn)行調(diào)試
官方中文版本環(huán)境搭建及demo運(yùn)行Weex快速上手教程(Weex Tutorial)
weex啟動(dòng)及界面渲染流程圖
初始化過程

初始化過程png

啟動(dòng)調(diào)用過程

啟動(dòng)調(diào)用過程.png

效果果然達(dá)到了write once，run everywhere！而且運(yùn)行效果可以與原聲媲美，并且virtual dom的加入更加優(yōu)化了性能問題，切對(duì)native擴(kuò)展等提供了很好的預(yù)留，目前可以采用組件形式與全頁形式進(jìn)行集成。

初始化操作

1. BaseApplication 初始化SDK 引擎
WXSDKEngine.init(this, null, null, new ImageAdapter(), null);
WXSDKEngine初始化了三件事：

1、初始化so庫文件，渲染邏輯、腳本業(yè)務(wù)框架等都封裝在了這里；

2、初始化initScriptsFramework ： 初始化腳本框架；

3、register 操作，初始化weex組件與module；
private void renderWX() {
        Rect outRect = new Rect();
        getWindow().getDecorView().getWindowVisibleDisplayFrame(outRect);
        if (instance != null) {
            instance.destroy();
            instance = null;
        }
        instance = new WXSDKInstance(this);
        instance.registerRenderListener(this);
        Map<String, Object> options = new HashMap<>();
        options.put("bundleUrl", WEEX_INDEX_URL);
        instance.renderByUrl(TAG, WEEX_INDEX_URL, options, null, ScreenUtil.getDisplayWidth(this),
                             ScreenUtil.getDisplayHeight(this), WXRenderStrategy.APPEND_ASYNC);
    }
首先看這個(gè)方法，可以在activity oncreate中被調(diào)用，可以清楚的看到，注冊(cè)了渲染監(jiān)聽器，以及傳入了當(dāng)前屏幕的寬高及url，可以猜測(cè)weex的適配方案采用的是百分比方案。
2. WXSDKInstance
  renderByUrl 方法內(nèi)調(diào)用了httpadapter進(jìn)行加載url，并且拼裝了user-agent header參數(shù)；
3. DefaultWXHttpAdapter
網(wǎng)絡(luò)處理 其實(shí)就是一個(gè)封裝的簡(jiǎn)單的網(wǎng)絡(luò)請(qǐng)求工具類，把請(qǐng)求下來的json數(shù)據(jù)回調(diào)給WXSDKInstance
4. WXSDKInstance render 方法進(jìn)行view的創(chuàng)建初始化
5. WXSDKManager createInstance
1、將json數(shù)據(jù)與instanceId添加到renderManager中；
2、使用bridge橋接管理器進(jìn)行UI繪制；
6. WXBridge 作用：  execJS 調(diào)用 so庫方法執(zhí)行JS腳本，進(jìn)行UI渲染；

最后提供與React Native的比較：
挺好的問題：

1. DSL 語法差異很大，可能 weex 更輕量一些，上手快一些；

2. Native 性能 weex 還是有一些優(yōu)勢(shì)的，包也更小。

看完上述內(nèi)容，你們掌握android中weex如何使用的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！