如何在浏览器中预览weex代码 #43

Open
blue0125 opened this Issue Jul 11, 2016 · 6 comments

Projects

None yet

7 participants

@blue0125
blue0125 commented Jul 11, 2016 edited

查看原文

weex-toolkit

我们强烈建议你使用weex-toolkit在浏览器中预览weex代码。这个工具基于NodeJS,所以你需要先安装Node。请从https://nodejs.org/en/download/stable/网站下载安装最新稳定版本的Node。
接下来你就可以通过npm安装weex-toolkit

npm install -g weex-toolkit

通过在终端中输入weex检查是否可以运行,通常你应该看到如下的帮助文字:

Options:
  --qr     display QR code for native runtime, 
  -o,--output  transform weex we file to JS Bundle, output path (single JS bundle file or dir)
  -s,--server  start a http file server, weex .we file will be transforme to JS bundle on the server , specify local root path using the option  
  ......
  --help  Show help

假如一切运行正常,终端导航到你想预览的xxx.we所在目录,输入命令:

weex xxx.we

浏览器窗口将会自动打开显示你想预览的页面:
preview page

@hugojing

Well done!

@lvscar
lvscar commented Jul 18, 2016

thx! 已经部署到Weex官方文档站 http://alibaba.github.io/weex/doc/how-to/preview-in-browser.html
以后的翻译修改完成后可以直接通过给Weex主仓库 doc分枝 提交PR 。
再次感谢.

@xu17
xu17 commented Sep 18, 2016

可是为什么我显示的是源代码
而不是上图???好郁闷啊啊啊啊啊

@cryzzchen

@xu17 你应该是看到了webpack编译过的代码,看一下路径

@1903514970

@blue0125 你好,我的浏览器显示没有标尺,只有界面,是需要设置什么吗?

@DoranYun
DoranYun commented Jan 4, 2017

@1903514970 截图是旧版 Chrome。新版 Chrome 默认不显示标尺,需要在 Devtools -> settings 勾选 show rules

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment