Weexplus开发

       Weexplus是基于weex官方的二次开发版本，weex和react native一样同属第2代跨平台技术，解决了第一代性能低下，体验不好的问题，同时保留了第一代多平台一套代码，基于web技术栈，支持动态发版等所有优点。weex基于vue技术栈决定了它比react native在设计高度上有着跨越式的领先。

WeexPlus开发步骤：

1. 安装NodeJs，已安装的请忽略

最简单的安装方法就是直接安装官网的安装包，至于其它的使用包管理或者源码安装的方法请自行搜索。

1. 安装weex-toolkit，已安装的请忽略

npm install  weex-toolkit -g或 cnpm install  weex-toolkit -g

1. 安装脚手架工具weexplus，已安装的请忽略

npm install weexplus -g 或 cnpm install weexplus -g

1. 创建项目

切换到工作目录，执行(windows下务必确保使用管理员模式打开的cmd)

weexplus create

下载失败，请直接前往 https://github.com/weexplus/boilerplate

1. 下载并安装weexplus开发包

一个apk程序，地址 https://pan.baidu.com/s/16kJfMuyXX-Y_yhm5fHt79Q

注意：手机端weex playground 扫描浏览器上生成二维码时，报" connect timed out"

问题解决：

1.手机和电脑是否在同一局域网

         排查方法：先看手机和电脑连的是不是同一个wifi，然后看下手机和PC上的IP地址是否在同一个网段（电脑和手机连的是同一个wifi，但浏览器上服务端IP和手机端IP不在一个网段， Weex取的是电脑虚拟网卡的IP，禁用虚拟网卡后）。

     2.确认下PC上wifi的连接策略；

      排查方法：点击PC上wifi的属性，看下是公用还是专用。我原先设置的是公用，这个策略限制了同网段机器的网络访问权限，改为专用，然后手机再扫码，渲染正常。

1. 运行创建的项目

cd my_project

npm install

native效果：

1.npm run native

2.新启一个控制台  weexplus start

 web版效果：

1.weexplus start

2.npm run web

Weexplus更新

切换到工作目录

weexplus update

WeeexPlus使用Weex Ui

1. 安装前建议你的node版本是 >= 8.0

node -v

​v8.2.1

​npm --version

​5.3.0

1. 确保weex-toolkit为新版本

npm install
 -g weex-toolkit@latest

或 

cnpm install
 -g weex-toolkit@latest

最新版本:

weex -v

1. 使用 weex-toolkit 创建一个项目

weex create your_project

安装相关依赖

npm i

1. 项目中使用 Weex Ui

安装 weex-ui

npm i weex-ui@latest -S

安装babel-preset-stage-0 和 babel-plugin-component 插件，前者用于babel编译，后者用于优化 weex-ui 包的组件引用

npm i babel-plugin-component babel-preset-stage-0 -D

1. 修改.babelrc如下

{
  "presets": ["es2015", "stage-0"],
  "plugins": [
    [
      "component",
      {
        "libraryName": "weex-ui",
        "libDir": "packages",
        "style": false
      }
    ]
  ]
}

1. 运行

启动web服务器

npm run serve

1. 测试Android 编译和打包

weex platform add android

weex run android