第一个weex项目（环境搭建、新建项目、APP集成）

一、手把手教你安装Weex环境

weex是vue的一个分支，是一个前端开发框架，环境配置共包括一下几部分：

• Node安装
• 配置淘宝镜像
• 安装weex-toolkit
• 安装、破解WebStorm
• WebStorm Weex插件支持

附：完全卸载node方法

Mac版：文档链接： blog.csdn.net/tan915730/a…

Windows版：文档链接： www.cnblogs.com/fighxp/p/74…

1、Node安装

a) 安装node，建议官网下载，版本可自己控制，Mac也可以使用Homebrew安装 官网：nodejs.org/zh-cn/

b) Windows版本配置环境变量，mac版本略过

c) 检查node是否安装成功

  node -v

2、配置淘宝镜像

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

npm –v 检查安装成功

3、安装weex-toolkit

cnpm install -g weex-toolkit

weex –v 检查安装成功

4、WebStorm安装（mac版本）

官网下载：www.jetbrains.com/webstorm/

详细激活文档：www.cnblogs.com/shenlaiyaos…

a) 文件安装（官网下载）

b) Host配置

Finder - 前往 前往文件夹 /etc/hosts 找到 hosts 文件，文本打开 在最后添加 0.0.0.0 account.jetbrains.com

c) 激活码激活

激活码获取：idea.lanyus.com/

5、WebStorm安装（windows版本）

同mac版本，只是host配置不同（网上搜索，有很多）

d) WebStorm Weex支持

安装插件：Weex

二、初始化weex项目

a) 使用Weex命令初始化项目：

  weex create  + 文件名

1、select weex web render（选择weex web渲染器）? 

    1.0.17 Current: latest features
  
    0.12.17 LTS: recommended for most users
  
    推荐选择第二项

2、Babel compiler（js编译器）?

    选项有4个，按推荐选择第一个“stage-0”,支持所有es6语法

3、Use vue-router to manage your view router?

    是否使用vue路由来管理界面路由，我这里没按推荐选择，vue-router是官方路由，个人推荐使用。

4、Use ESLint to lint your code?

    是否使用ESLint管理代码，ESLint是个代码风格管理工具，是用来统一代码风格的，并不会影响整体的运行，这也是为了多人协作，新手就不用了，一般项目中都会使用。接下来也是选择题
5、Pick an ESLint preset (Use arrow keys) 
选择一个ESLint预设，编写vue项目时的代码风格

    Standard (https://github.com/feross/standard) ：js的标准风格

    AirBNB (https://github.com/airbnb/javascript)：JavaScript最合理的方法

    none (configure it yourself) ：自己定义风格

6、Set up unit tests (Y/n)？

    是否安装单元测试

7、Should we run ‘npm install’ for you after the project has been created?项目创建后是否要为你运行“npm install”?这里选择包管理工具
   
    yes,use npm(使用npm)
    yes,use yarn(使用yarn)
    no,I will handle that myself(自己操作)

b) WebStorm 打开项目并运行：

Weex优点：可视化

如果初始化项目的时候，没有选择npm install选项，需要手动操作:

Terminal：  npm install

Terminal：  npm start

Commond + C 或 control + C 退出运行

Weex提供简易版预览APP：

三、Weex集成到Android应用

官方文档：weex.apache.org/zh/guide/de…

a）添加依赖：

dependencies {
    implementation 'com.tbruyelle.rxpermissions2:rxpermissions:0.9.4@aar'
    implementation 'com.github.bumptech.glide:glide:3.7.0'
    implementation 'com.journeyapps:zxing-android-embedded:3.5.0'
    implementation 'io.reactivex.rxjava2:rxjava:2.1.3'
    //以下为官方文档需要
    implementation 'com.android.support:appcompat-v7:28.0.0'
    implementation 'com.android.support:support-v4:28.0.0'
    implementation 'com.android.support:recyclerview-v7:28.0.0'
    // weex sdk and fastjson
    implementation 'com.taobao.android:weex_sdk:0.17.0@aar'
    implementation 'com.alibaba:fastjson:1.1.46.android‘
}

b）在AndroidManifest.xml中声明权限

//网络
<uses-permission android:name="android.permission.INTERNET"/>
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>

//sd卡读写
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>

c）初始化sdk

 InitConfig config = new InitConfig.Builder()
			//图片库接口
				.setImgAdapter(new FrescoImageAdapter())
				//网络库接口
				.setHttpAdapter(new InterceptWXHttpAdapter())
				.build();
 WXSDKEngine.initialize(applicationContext,config);

d）创建WXSDKInstance

IWXRenderListener接口实现，weex生命周期设置见文档 打开远端weex：

String bundleUrl = "http://10.253.111.243:8085/dist/index.js?wsport=8086&_wx_tpl=http://10.253.111.243:8085/dist/index.js";
mWXSDKInstance.renderByUrl("WXSample", bundleUrl, null, null, WXRenderStrategy.APPEND_ASYNC);

打开本地weex：

mWXSDKInstance.render("WXSample", WXFileUtils.loadAsset("index.js", MainActivity.this), null, null, -1, -1, WXRenderStrategy.APPEND_ASYNC);

四、不再需要实时Run app

a) 手动刷新

if (null != mWXSDKInstance) {
    mWXSDKInstance.destroy();
    mWXSDKInstance = null;
}
mWXSDKInstance = new WXSDKInstance(MainActivity.this);
mWXSDKInstance.registerRenderListener(this);

（weex加载逻辑）

b) 自动刷新（来自weex官方demo）

public class MainActivity extends AppCompatActivity implements IWXRenderListener, Handler.Callback {
   Handler mWXHandler;
   String bundleUrl =        "http://10.253.101.243:8081/dist/index.js?wsport=8082&_wx_tpl=http://10.253.101.243:8081/dist/index.js";

   @Override
   protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.activity_main);
    
      mUri = Uri.parse(bundleUrl);
      mWXHandler = new Handler(this);
      HotRefreshManager.getInstance().setHandler(mWXHandler);
    }
    /**
     * hot refresh
     */
   private void startHotRefresh() {
      try {
        URL url = new URL(mUri.toString());
        String host = url.getHost();
        String query = url.getQuery();
        String wsport = TextUtils.isEmpty(query)? "8082" : getUrlParam("wsport", query);
        String wsUrl = "ws://" + host + ":" + (wsport.equals("") ? "8082" : wsport) ;
        mWXHandler.obtainMessage(Constants.HOT_REFRESH_CONNECT, 0, 0, wsUrl).sendToTarget();
      } catch (MalformedURLException e) {
        e.printStackTrace();
      }
   }
      private String getUrlParam(String key, String queryString) {
      String regex = "[?|&]?" + key + "=([^&]+)";
      Pattern p = Pattern.compile(regex);
      Matcher matcher = p.matcher(queryString);
      if (matcher.find()) {
          return matcher.group(1);
      } else {
          return "";
      }
  }

  @Override
  public boolean handleMessage(Message msg) {
    switch (msg.what) {
        case Constants.HOT_REFRESH_CONNECT:
            HotRefreshManager.getInstance().connect(msg.obj.toString());
            break;
        case Constants.HOT_REFRESH_DISCONNECT:
            HotRefreshManager.getInstance().disConnect();
            break;
        case Constants.HOT_REFRESH_REFRESH:
            //刷新逻辑
            loadWeex(isLoadUrl);
            break;
        case Constants.HOT_REFRESH_CONNECT_ERROR:
            Toast.makeText(this, "hot refresh connect error!", Toast.LENGTH_SHORT).show();
            break;
        default:
            break;
    }
    return false;
  }

}