零基础使用weex，weex+android

Android Weex工程搭建

https://weex.incubator.apache.org/guide/index.html

真的是入门就想放弃，文档少的可怜，翻“墙”找资料，看看墙里面资料，安心一丢丢.
本设备mac

第一部分

注意：⚠️这部分是weex，创建一个weex项目，在web平台渲染结果，并且可以将结果显示在模拟器上面

1.安装 Node.js，https://nodejs.org/en/
2.随着Node.js的安装，安装weex-toolkit全球CLI。
npm install weex-toolkit -g
【安装失败，图所示】

➜  ~ npm install weex-toolkit -g
npm WARN checkPermissions Missing write access to /usr/local/lib/node_modules
npm ERR! path /usr/local/lib/node_modules
npm ERR! code EACCES
npm ERR! errno -13
npm ERR! syscall access
npm ERR! Error: EACCES: permission denied, access '/usr/local/lib/node_modules'
npm ERR!  { [Error: EACCES: permission denied, access '/usr/local/lib/node_modules']
npm ERR!   stack:
npm ERR!    'Error: EACCES: permission denied, access \'/usr/local/lib/node_modules\'',
npm ERR!   errno: -13,
npm ERR!   code: 'EACCES',
npm ERR!   syscall: 'access',
npm ERR!   path: '/usr/local/lib/node_modules' }
npm ERR!
npm ERR! The operation was rejected by your operating system.
npm ERR! It is likely you do not have the permissions to access this file as the current user
npm ERR!
npm ERR! If you believe this might be a permissions issue, please double-check the
npm ERR! permissions of the file and its containing directories, or try running
npm ERR! the command again as root/Administrator (though this is not recommended).

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/xj.deng/.npm/_logs/2018-12-27T06_47_24_957Z-debug.log
➜  ~ sudo npm install webpack -g

用这个命令装： sudo npm install -g weex-toolkit@latest ：全局安装

输入weex，下图表示安装成功

➜  ~ weex

Usage:

  $ weex <command>

Commands:

  debug         Start weex debugger
  config        Configure the global configuration file
  compile       Compile we/vue file
  create        Create a weex project
  preview       Preview a weex page
  platform      Add/remove/update ios/android platform
  plugin        Add/remove/create weex plugin
  run           Build your ios/android app and run
  update        Update weex package version
  remove        Remove a package from weex-toolkit
  xbind         Binding a thrid-part tool

  weex <command> --help      help on <command>

3.回到官网http://weex.apache.org/cn/guide/index.html初始化位置继续，很详细了！
懒得看的直接敲命令：

这条命令会向你命令行环境中注册一个 weex 命令。你可以用 weex create 命令来创建一个空的模板项目：

weex create awesome-app

命令执行完以后，在当前目录的 awesome-app 文件夹里就有了一个空的 Weex + Vue.js 项目。

下一步就是进入刚刚创建的文件夹，并且安装依赖，然后执行 npm start：

cd awesome-app
npm install
npm start

第二部分

注意：⚠️，这是Weex集成到Android项目中
官网：http://weex.apache.org/cn/guide/integrate-to-your-app.htmly
链接已经很详细了，附上自己写过的源码：
https://github.com/DeckeDeng/Weex-WXSample

实现图片下载接口，注意⚠️，该接口需要自己实现图片下载，第二部分完成，已经可以demo看到效果了

package com.weex.sample;

import android.widget.ImageView;

import com.taobao.weex.adapter.IWXImgLoaderAdapter;
import com.taobao.weex.common.WXImageStrategy;
import com.taobao.weex.dom.WXImageQuality;

/**
 * Created by lixinke on 16/6/1.
 */
public class ImageAdapter implements IWXImgLoaderAdapter {


  @Override
  public void setImage(String url, ImageView view, WXImageQuality quality, WXImageStrategy strategy) {
    //实现你自己的图片下载，否则图片无法显示。
  }
}

/**
 * 注意要在Manifest中设置android:name=".WXApplication"
 * 要实现ImageAdapter 否则图片不能下载
 * 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.45'
 */
public class MyApplication extends Application {

    @Override
    public void onCreate() {
        super.onCreate();
        InitConfig config = new InitConfig.Builder().setImgAdapter(new ImageAdapter()).build();
        WXSDKEngine.initialize(this,config);
    }
}

application配置到manifest.xml中，并且添加权限

MainActivity.class

class MainActivity : AppCompatActivity(){

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        btn_local.setOnClickListener {
            startActivity<LocalKotlinActivity>()
        }

        btn_netWork.setOnClickListener {
           toast("等待")
        }

    }

}

layout

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
        android:orientation="vertical"
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">

    <Button
            android:layout_weight="1"
            android:text="本地加载JS"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/btn_local"/>
    <Button
            android:layout_weight="1"
            android:text="从网络加载"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/btn_netWork"/>

</LinearLayout>

LocalKotlinActivity

package auction.taobao.com.weexdemoproject

import android.support.v7.app.AppCompatActivity
import android.os.Bundle
import android.view.View
import android.widget.Button
import com.taobao.weex.IWXRenderListener
import com.taobao.weex.common.WXRenderStrategy
import com.taobao.weex.WXSDKInstance
import com.taobao.weex.utils.WXFileUtils
import org.jetbrains.anko.startActivity
import java.util.HashMap


class LocalKotlinActivity : AppCompatActivity(), IWXRenderListener {
    override fun onRefreshSuccess(instance: WXSDKInstance?, width: Int, height: Int) {
    }

    override fun onException(instance: WXSDKInstance?, errCode: String?, msg: String?) {
    }

    override fun onViewCreated(instance: WXSDKInstance?, view: View?) {
        setContentView(view)
    }

    override fun onRenderSuccess(instance: WXSDKInstance?, width: Int, height: Int) {
    }

    val mWXSDKInstance by lazy {
        WXSDKInstance(this)
    }

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        mWXSDKInstance.registerRenderListener(this)


        /**
         * WXSample 可以替换成自定义的字符串，针对埋点有效。
         * template 是.we transform 后的 js文件。
         * option 可以为空，或者通过option传入 js需要的参数。例如bundle js的地址等。
         * jsonInitData 可以为空。
         * width 为-1 默认全屏，可以自己定制。
         * height =-1 默认全屏，可以自己定制。
         */
        mWXSDKInstance.render(
            "WXSample",
            WXFileUtils.loadAsset("home-live.js", this),
            null, null, -1, -1, WXRenderStrategy.APPEND_ASYNC
        );

//        mWXSDKInstance.render(
//            "WXSample",
//            WXFileUtils.loadAsset("home.js", this),
//            null,
//            null,
//            WXRenderStrategy.APPEND_ASYNC
//        )


    }

    override fun onResume() {
        super.onResume()
        if (mWXSDKInstance != null) {
            mWXSDKInstance.onActivityResume()
        }
    }

    override fun onPause() {
        super.onPause()
        if (mWXSDKInstance != null) {
            mWXSDKInstance.onActivityPause()
        }
    }

    override fun onStop() {
        super.onStop()
        if (mWXSDKInstance != null) {
            mWXSDKInstance.onActivityStop()
        }
    }

    override fun onDestroy() {
        super.onDestroy()
        if (mWXSDKInstance != null) {
            mWXSDKInstance.onActivityDestroy()
        }
    }

}

main文件下面创建文件夹，放置js文件：

hello.js

/******/ (function(modules) { // webpackBootstrap
/******/ 	// The module cache
/******/ 	var installedModules = {};

/******/ 	// The require function
/******/ 	function __webpack_require__(moduleId) {

/******/ 		// Check if module is in cache
/******/ 		if(installedModules[moduleId])
/******/ 			return installedModules[moduleId].exports;

/******/ 		// Create a new module (and put it into the cache)
/******/ 		var module = installedModules[moduleId] = {
/******/ 			exports: {},
/******/ 			id: moduleId,
/******/ 			loaded: false
/******/ 		};

/******/ 		// Execute the module function
/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);

/******/ 		// Flag the module as loaded
/******/ 		module.loaded = true;

/******/ 		// Return the exports of the module
/******/ 		return module.exports;
/******/ 	}


/******/ 	// expose the modules object (__webpack_modules__)
/******/ 	__webpack_require__.m = modules;

/******/ 	// expose the module cache
/******/ 	__webpack_require__.c = installedModules;

/******/ 	// __webpack_public_path__
/******/ 	__webpack_require__.p = "";

/******/ 	// Load entry module and return exports
/******/ 	return __webpack_require__(0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ function(module, exports, __webpack_require__) {

	var __weex_template__ = __webpack_require__(1)

	__weex_define__('@weex-component/63d2da657953c1add8d6eab5fae4f3f0', [], function(__weex_require__, __weex_exports__, __weex_module__) {

	    __weex_module__.exports.template = __weex_template__

	})

	__weex_bootstrap__('@weex-component/63d2da657953c1add8d6eab5fae4f3f0',undefined,undefined)

/***/ },
/* 1 */
/***/ function(module, exports) {

	module.exports = {
	  "type": "div",
	  "children": [
	    {
	      "type": "text",
	      "style": {
	        "fontSize": 100
	      },
	      "attr": {
	        "value": "Hello World // this is Hello.js."
	      }
	    }
	  ]
	}

/***/ }
/******/ ]);

第三部分

完善ImageAdapter，加载图片，基本源码里面都有，weex项目下载下来看一看就知道了
附上地址：https://github.com/apache/incubator-weex/blob/master/android/commons/src/main/java/com/alibaba/weex/commons/adapter/ImageAdapter.java

不想下载的看下图，有部分过滤，抽出需要的部分：

ImageAdapter

package auction.taobao.com.weexdemoproject.adapter;

import android.net.Uri;
import android.text.TextUtils;
import android.widget.ImageView;
import com.squareup.picasso.Callback;
import com.squareup.picasso.Picasso;
import com.taobao.weex.WXEnvironment;
import com.taobao.weex.WXSDKManager;
import com.taobao.weex.adapter.IWXImgLoaderAdapter;
import com.taobao.weex.common.WXImageStrategy;
import com.taobao.weex.dom.WXImageQuality;

/**
 * Created by lixinke on 16/6/1.
 */
public class ImageAdapter implements IWXImgLoaderAdapter {


    @Override
    public void setImage(final String url, final ImageView view, WXImageQuality quality, final 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;
                }


                if (!TextUtils.isEmpty(strategy.placeHolder)) {
                    Picasso.Builder builder = new Picasso.Builder(WXEnvironment.getApplication());
                    Picasso picasso = builder.build();
                    picasso.load(Uri.parse(strategy.placeHolder)).into(view);

                    view.setTag(strategy.placeHolder.hashCode(), picasso);
                }

                Picasso.with(WXEnvironment.getApplication())
                        .load(temp)
                        .transform(new BlurTransformation(strategy.blurRadius))
                        .into(view, new Callback() {
                            @Override
                            public void onSuccess() {
                                if (strategy.getImageListener() != null) {
                                    strategy.getImageListener().onImageFinish(url, view, true, null);
                                }

                                if (!TextUtils.isEmpty(strategy.placeHolder)) {
                                    ((Picasso) view.getTag(strategy.placeHolder.hashCode())).cancelRequest(view);
                                }
                            }

                            @Override
                            public void onError() {
                                if (strategy.getImageListener() != null) {
                                    strategy.getImageListener().onImageFinish(url, view, false, null);
                                }
                            }
                        });
            }
        }, 0);
    }
}

BlurTool

https://github.com/apache/incubator-weex/blob/master/android/commons/src/main/java/com/alibaba/weex/commons/adapter/BlurTool.java

BlurTransformation

https://github.com/apache/incubator-weex/blob/master/android/commons/src/main/java/com/alibaba/weex/commons/adapter/BlurTransformation.java

第四部分

扩展 Android 的功能

官网链接：http://weex.apache.org/cn/guide/extend-android.html
总结就是：
module: 完成以一个操作的集合，类似package，weex sdk中内置了部分module，app客户端也可以注册module，供js调用
Component: 扩展 实现特别功能的 Native 控件。例如：RichTextview，RefreshListview 等。
component可被自定义，通过设置@ WXComponentProp提供组件属性配置，通过@JSMethod暴露方法给js调用。