就试试weex好不好用吧,学习成本也是很低的。 直接把cli的项目移植过来真的是想多了…
一。hellow world!
这个例子在屏幕正中间渲染了一个单词 “Yo”。 如果你想在移动设备上预览渲染结果,你只需要安装Weex playground app 或将 Weex SDK 集成到您自己的应用程序中,然后使用扫描网页右侧的二维码。 https://weex.apache.org/cn/tools/playground.html
算了 我直接跳过了,直接写自己所遇到的坑吧。
二。wtf?? node版本不兼容?
1 | WARN node unsupported "node@v8.10.0" is incompatible with weex-previewer@1.5.1 › dns@0.2.2 › tomahawk@0.1.6, expected node@>= 0.8.0 < 0.11.0 |
解决方法,升级npm: 注意: 在weex-toolkit1.0.8版本后添加了npm5规范的npm-shrinkwrap.json用于锁定包依赖,故npm版本<5的用户需要通过npm i="" npm@latest="" -g更新一下npm的版本,使用前请确认版本是否正确。<="" p="">
不对哇... 这明明是node版本的问题,又不是npm问题
1
2
3
4
5
6
7
8
9C:\Users\user\AppData\Roaming\npm\node_modules
删除weex-toolkit
然后npm i weex-toolkit -g
出错的原因我分析出是:
cnpm的问题,还有缓存问题,我一直以为npm cache clean --force 是用来删除那些没有安装成功的东西
其实不是的 npm install或npm update命令,从 registry 下载压缩包之后,都存放在本地的缓存目录。
可以去ruanf那看看 http://www.ruanyifeng.com/blog/2016/01/npm-install.html
在改使用npm之后,我是发现no access mission to ......什么什么的。意思就是!他写入不了!所以诞生出一个想法:
那么我们把原来的东西删除。
三。weex debug安装weex debugger的时候报错
1 | ERROR: Failed to download Chromium r588429! Set "PUPPETEER_SKIP_CHROMIUM_DOWNLOAD" env variable to skip download. |
意思是你安装不了Chromium,你可以通过 set PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=1 来跳过
现在开启debug模式1 | You may not have installed chromium properly, you can find solution here https://github.com/weexteam/weex-toolkit/issues/275. |
四。css
ERROR: Selector `a` is not supported. Weex only support single-classname selector weex只支持类选择器,因此标签a不能够使用。
ERROR: property value `all` is not supported for `transition-property` (only css property is valid) 就是transition的那个动画 你需要all的话,只能一个个写用逗号间隔
以下是warning 他会帮你自动修改。(但是不一定符号你的意思)
property value `.5s` is autofixed to `500` 不支持transition: opacity .5s的写法 应该按照ms的写法 代替为500
unit `%` is not supported and property value `100%` is autofixed to `100` 不支持百分号%,他将帮你自动更改为100,这相当于px了。推荐使用vw vh
WARNING: `background` is not a standard property name (may not be supported), suggest `background-color` background 不标准,继续使用有概率不支持,应该使用background-color代替,
property value `#fff` is autofixed to `#ffffff` 应该使用标准写法fff
5的用户需要通过npm>这是不能使用的:
list-style-type(消除·) word-wrap float display box-sizing border-bottom -webkit-line-clamp
-webkit-box-orient rem em flex-wrap relativepink
is autofixed to#FFC0CB
property valueinitial
is not supported forline-height
(only number and pixel values are supported)