目前已经支持 Windows, 且已经开源
代码地址:https://github.com/weexteam/weex-intellij-plugin
仓库地址:https://plugins.jetbrains.com/plugin/8460-weex
2017年03月20日11:25:42

强大的Weex已开源, 截止现在 Star 的数量已经达到了3576, 简直赞到不行呀~~~~

为了方便大家更加便捷的开发 Weex 页面, 小弟写了一款 Intellij 的插件, 目前亲测可用的几款IDE 有 Intellij Idea, Android Studio, Web Storm, 下面简单的为大家介绍一些这款插件的功能以及使用方法

功能介绍:

  1. 支持自动实时将Weex编译成JavaScript bundle。
  2. 能够在插件运行时启动本地服务,实时的将修改的内容渲染成HTML5,并显示出来
  3. 支持编译带自定义组件的 Weex 源码,不过自定义组件和当前组件必须在同一目录
  4. 支持以二维码的方式显示渲染内容,可用手淘或者WeexPlayground进行扫描查看渲染内容
  5. 支持Webstorm,Intellij Idea,Android Studio等Intellij旗下产品

使用说明:

  1. 直接在Intellij Idea, Android Studio, Web Storm 的 Plugin 中心搜索 Weex 即可, 如图所示

  2. 安装重启IDE以后,打开Weex 代码,这时你会看这样的界面 firstSight
    • 这时不出意外是无法看到渲染的界面的, 需要设置从 github 上 clone Weex 工程的地址, 并且这个路径下需要安装好 Weex 运行环境的, 如何安装如图所示,点击红色箭头指向的方向.
    • 简单介绍一下右侧的两个长条提示
      • “set up local build path in settings” 是用来设置本地能够运行 “npm run serve” 的路径,也就是从github上clone weex下来的项目路径。 注意:在设置该路径之前,请按照 Weex 官方网页的指导完成环境安装 地址.
      • “Set up node installed path” 是用来指定 node 的安装目录,不过一般情况下会有一个默认的路径,如果你最终还是看到这个设定项,还是请手动指定一下 node 的安装目录了。
  3. 在编辑界面进行编辑,按下Command + S进行保存时,渲染会自动触发,接着右边的显示界面就会实时显示刚才修改的内容

  4. 接着来介绍下顶部状态栏左侧的两个按钮
    • I 这个表示当前本地的服务开启着,如果显示为红色的图标表示本地的服务未开启, 点击这个按钮也可以重启服务.
    • I 点击这个能够显示当前页面的二维码,用手淘或者Weex Playground 进行扫描即可在移动端显示当前页面的渲染效果。
  5. 状态栏右侧也有三个按钮,分别是只显示Editor, Editor和Preview都显示,只显示Preview。为了提高性能,当Preview不可见的时候是不进行编译渲染的~

已知bug:

  1. Weex 脚本请不要任性的添加死循环函数块。。这样可能造成IDE直接崩掉

更多功能尽请期待,未完待续。。。

如果大家感觉用的还可以,麻烦给个好评~ 谢谢啦~~~ 地址

大家在使用中有任何疑问请留言

现在已经支持 weex tool kit 如果安装了weex tool kit 就不需要设置任何路径了, 请大家更新使用,谢谢