Weex 实时渲染插件

强大的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 即可, 如图所示

  1. 安装重启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 的安装目录了。
  1. 在编辑界面进行编辑,按下Command + S进行保存时,渲染会自动触发,接着右边的显示界面就会实时显示刚才修改的内容
  2. 接着来介绍下顶部状态栏左侧的两个按钮

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

已知bug:

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

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

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

大家在使用中有任何疑问请 @东煜

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值