Weex的環境搭建以及集成到Android項目

最近由於公司的需要，初步研究了Weex，Weex是阿里開發的一個web的框架，官方的介紹如下：

Weex 是一套簡單易用的跨平台開發方案，能以 web 的開發體驗構建高性能、可擴展的 native 應用，
為了做到這些，Weex 與 Vue 合作，使用 Vue 作為上層框架，並遵循 W3C 標准實現了統一的 JSEngine 和 DOM API，這樣一來，
你甚至可以使用其他框架驅動 Weex，打造三端一致的 native 應用。

總的來說，它是一個跨平台的框架，以Web的形式構建具有原生性能的native的應用。

首先，項目環境的搭建：奉上官方鏈接。

1、node.js的安裝。

　　要求：基本沒啥要求，就是版本要5.x+ 可升不可降，現在node.js官網一般來說有兩個，一個是6.10.2的穩定版，一個是最新版。

　　安裝沒啥要注意的，直接下一步咯，最后安裝好后，相應的npm的包管理工具也會隨之安裝好。

　　最后一步就是檢測是否安裝成功，這個和簡單嘛，命令如下：

$ node -v

$ npm -v

　　一看就明白這兩是什么命令了，前面那條是打印node.js的版本號，后面那條是打印npm包管理工具的版本號。

　　如果都能正常的打印出來，那就OK咯。

2、Weektools的安裝

　　這里需要注意的是：weex-toolkit 在 1.0.1 之后才支持初始化 Vue 項目，使用前請確認版本是否正確。

　　然后，安裝，命令如下：

npm install -g weex-toolkit

　　這就是安裝命令了，但是，它是從https://registry.npmjs.org/這里下載安裝源的，所以需要梯子，既然這個是國產的阿里的框架，那么阿里肯定就有提供啦，所以，我們不需要去這里下載。直接從阿里的鏡像里面去下載就好。

　　官方是這樣給出的：

npm install -g cnpm --registry=https://registry.npm.taobao.org

cnpm install -g weex-toolkit

sudo cnpm install -g weex-toolkit

　　這兩條命令也很簡單，一條是從阿里上下載安裝源，第二條是利用cnpm來安裝剛才下載的。貼心的阿里還給出了一個安裝錯誤的常見情況，就是如果提示安裝失敗，且失敗的原因是由於權限的話，那么就使用sudo這個命令去安裝。

 

　　但是，但是，但是我無論怎樣都安裝失敗，但並不是由於權限，具體原因不明，同時也很奇怪，當你打印版本號的時候可以出來，但是你直接weex的時候，就出錯了，所以我也不知道是為啥，知道的兄弟麻煩告知一聲，謝謝！

 

　　最后，倒騰了許久，找到了這篇博客，使用如下的兩條命令，居然安裝成功了。

npm config set registry https://registry.npm.taobao.org 

npm install -g weex-toolkit

　　這兩條命令， 一條是更改下載源，一條是安裝，和最初的那條安裝命令是一樣的，不同的是，這個更改下載源后就不再從國外的服務器上下載，而是在阿里的鏡像里面下載，所以，效果是一樣的，省心。

　　最后一步：檢驗是否安裝成功

weex -v

weex

當你這兩條命令都能出來如下結果的時候，就說明安裝成功了。

至此，安裝weex結束，下面就來個Helloworld。哈哈

Helloworld:

1、找個地方，新建一個文件夾作為項目的根目錄。這個直接windows下完成就好了。建好之后，打開cmd，進入剛才新建的項目。

2、執行 weex init

3、安裝依賴，npm install 

4、運行項目和服務器，分別是 npm run dev  和  npm run serve

5、打開：http://localhost:8080/index.html 

最后需要解釋一下的是，項目里面的package.json里面的-->serve -p 8080，這個就是服務器的端口號了，如果你項目運行不成功的話，先打開這個看一下，端口號寫對了沒有，沒有你就更改一下。

 

下面，來跑自己試試，先在src下新建一個we文件，文件內容你可以自己寫，不會就用下面這段吧：

<template>
  <div class="wrapper">
    <text class="weex">Hello Weex !</text>
    <text class="vue">Hello Vue !</text>
  </div>
</template>
<style scoped>
  .wrapper {
    flex-direction: column;
    justify-content: center;
  }
  .weex {
   font-size: 60px;
   text-align: center;
   color: #1B90F7;
  }
  .vue {
   font-size: 60px;
   text-align: center;
   margin-top: 30px;
   color: #41B883;
  }
</style>

　　完了之后，直接cmd到項目的src目錄，執行weex FileName 就可以了，例如你的文件名是demo.we，那么你就敲 weex demo.we 就可以了，執行完后回自動的打開瀏覽器，自動的打開剛才這個頁面。

這里還需要介紹一條命令是：weex demo.we --output demo.js

這條命令和上面那條差不多，只不過多了一步，執行輸出相應的js，一般來說，相應的js文件會是在：C:\Users\userName\.weex_tmp\

 

至此，環境的搭建和Helloworld已經跑成功了，下面來看看怎么把Weex集成到Android。

Weex集成到Android

先奉上官網鏈接、集成到android上有兩種不同的方式，SDK依賴和源碼依賴，這里只講SDK的依賴，源碼依賴的方式先放下。

1、創建Android項目，這個和我們平時創建的時候一樣，沒什么差別。

2、添加依賴，和我們平時一樣，在gradle里面直接添加就好了。需要的依賴包如下：

compile 'com.android.support:recyclerview-v7:23.1.1'
compile 'com.android.support:support-v4:23.1.1'
compile 'com.android.support:appcompat-v7:23.1.1'
compile 'com.alibaba:fastjson:1.1.46.android'
compile 'com.taobao.android:weex_sdk:0.5.1@aar'

3、這些准備工作都做好了，就對着官網抄就可以了。

package com.weex.sample;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import com.taobao.weex.IWXRenderListener;
import com.taobao.weex.WXSDKInstance;
import com.taobao.weex.common.WXRenderStrategy;
import com.taobao.weex.utils.WXFileUtils;
public class MainActivity extends AppCompatActivity implements IWXRenderListener {
  WXSDKInstance mWXSDKInstance;
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    mWXSDKInstance = new WXSDKInstance(this);
    mWXSDKInstance.registerRenderListener(this);
    /**
     * WXSample 可以替換成自定義的字符串，針對埋點有效。
     * template 是.we transform 后的 js文件。
     * option 可以為空，或者通過option傳入 js需要的參數。例如bundle js的地址等。
     * jsonInitData 可以為空。
     * width 為-1 默認全屏，可以自己定制。
     * height =-1 默認全屏，可以自己定制。
     */
    mWXSDKInstance.render("WXSample", WXFileUtils.loadFileContent("hello.js", this), null, null, -1, -1, WXRenderStrategy.APPEND_ASYNC);
  }
  @Override
  public void onViewCreated(WXSDKInstance instance, View view) {
    setContentView(view);
  }
  @Override
  public void onRenderSuccess(WXSDKInstance instance, int width, int height) {
  }
  @Override
  public void onRefreshSuccess(WXSDKInstance instance, int width, int height) {
  }
  @Override
  public void onException(WXSDKInstance instance, String errCode, String msg) {
  }
  @Override
  protected void onResume() {
    super.onResume();
    if(mWXSDKInstance!=null){
      mWXSDKInstance.onActivityResume();
    }
  }
  @Override
  protected void onPause() {
    super.onPause();
    if(mWXSDKInstance!=null){
      mWXSDKInstance.onActivityPause();
    }
  }
  @Override
  protected void onStop() {
    super.onStop();
    if(mWXSDKInstance!=null){
      mWXSDKInstance.onActivityStop();
    }
  }
  @Override
  protected void onDestroy() {
    super.onDestroy();
    if(mWXSDKInstance!=null){
      mWXSDKInstance.onActivityDestroy();
    }
  }
}

　　這個是MainActivity的代碼，自己補齊相應的代碼吧。這個不多說了，都很簡單。需要說明的是，代碼里面的 hello.js  這個js文件是在我們android項目的assets目錄下的。如果在子目錄下，那么相應的 fiilefloder/filename.js 就可以。

　　最后 我hello.js從哪里來呢？我們前面跑helloworld的時候，最后不是跑自己的文件么，對對對，當你使用weex xx.we --output xx.js 的時候，就會生成js文件了，去相應的目錄下拷貝過來就可以了。

　　上面這種是加載本地的，還有一種方式，是夾在網絡上的一段js，其實都一樣，使用如下方式即可：

        //Sample 2:load js from internet
        Map<String, Object> options = new HashMap<>();
        options.put(WXSDKInstance.BUNDLE_URL, JS_URL);
        mWXSDKInstance.renderByUrl("WXSample", JS_URL, options, null, -1, -1, WXRenderStrategy.APPEND_ONCE);

　　溫馨提示，不要忘了在android上加 internet 的權限。

 

自此，到此結束，從環境的搭建，helloworld，和集成到android都可以了。

但是，你發現沒，如果你的項目里面有圖片。是不成功的。對對對，沒錯，就是這樣，這個屬於擴展功能，圖片屬於adapter擴展，是weex擴展方式中3種的其中一種。下面就來看看adapter的實現。

實現也很簡單，直接新建一個ImageAdapter類，代碼如下。

public class ImageAdapter implements IWXImgLoaderAdapter {
    @Override
    public void setImage(final String url, final ImageView view, WXImageQuality quality, WXImageStrategy strategy) {
        WXSDKManager.getInstance().postOnUiThread(new Runnable() {
            @Override
            public void run() {
                if(view==null||view.getLayoutParams()==null){
                    return;
                }
                if (TextUtils.isEmpty(url)) {
                    view.setImageBitmap(null);
                    return;
                }
                String temp = url;
                if (url.startsWith("//")) {
                    temp = "http:" + url;
                }
                if (view.getLayoutParams().width <= 0 || view.getLayoutParams().height <= 0) {
                    return;
                }
                Picasso.with(WXEnvironment.getApplication())
                        .load(temp)
                        .into(view);
            }
        },0);
    }
}

　　下面打開你的Application，如果沒有，就新建一個，新建的時候，要在Manifest.xml里面注冊，指定name為這個Application。

InitConfig config=new InitConfig.Builder().setImgAdapter(new ImageAdapter()).build();
WXSDKEngine.initialize(this,config);

　　在自定義的Application中添加上面兩行代碼即可，上面兩行代碼的意思無非就是注冊一個Adapter。

附上github上的sample和Weexmarket。

 

 OK，大功告成。就此記錄，，，2017-4-18 深圳