强大的Weex已开源, 截止现在 Star 的数量已经达到了3576, 简直赞到不行呀~~~~
为了方便大家更加便捷的开发 Weex 页面, 小弟写了一款 Intellij 的插件, 目前亲测可用的几款IDE 有 Intellij Idea
, Android Studio
, Web Storm
, 下面简单的为大家介绍一些这款插件的功能以及使用方法
功能介绍:
- 支持自动实时将Weex编译成JavaScript bundle。
- 能够在插件运行时启动本地服务,实时的将修改的内容渲染成HTML5,并显示出来
- 支持编译带自定义组件的 Weex 源码,不过自定义组件和当前组件必须在同一目录
- 支持以二维码的方式显示渲染内容,可用手淘或者WeexPlayground进行扫描查看渲染内容
- 支持Webstorm,Intellij Idea,Android Studio等Intellij旗下产品
使用说明:
- 直接在
Intellij Idea
,Android Studio
,Web Storm
的 Plugin 中心搜索Weex
即可, 如图所示
-
安装重启IDE以后,打开Weex 代码,这时你会看这样的界面
- 这时不出意外是无法看到渲染的界面的, 需要设置从 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
的安装目录了。
- “set up local build path in settings” 是用来设置本地能够运行 “npm run serve” 的路径,也就是从github上clone weex下来的项目路径。 注意:在设置该路径之前,请按照
- 这时不出意外是无法看到渲染的界面的, 需要设置从 github 上 clone Weex 工程的地址, 并且这个路径下需要安装好
- 在编辑界面进行编辑,按下Command + S进行保存时,渲染会自动触发,接着右边的显示界面就会实时显示刚才修改的内容
-
接着来介绍下顶部状态栏左侧的两个按钮
- 这个表示当前本地的服务开启着,如果显示为红色的图标表示本地的服务未开启, 点击这个按钮也可以重启服务.
- 点击这个能够显示当前页面的二维码,用手淘或者Weex Playground 进行扫描即可在移动端显示当前页面的渲染效果。
- 状态栏右侧也有三个按钮,分别是只显示Editor, Editor和Preview都显示,只显示Preview。为了提高性能,当Preview不可见的时候是不进行编译渲染的~
已知bug:
-
Weex
脚本请不要任性的添加死循环函数块。。这样可能造成IDE直接崩掉
更多功能尽请期待,未完待续。。。
如果大家感觉用的还可以,麻烦给个好评~ 谢谢啦~~~ 地址
大家在使用中有任何疑问请 @东煜