weex的坑,以后也记录在这里了

就试试weex好不好用吧,学习成本也是很低的。 直接把cli的项目移植过来真的是想多了…

一。hellow world!

这个例子在屏幕正中间渲染了一个单词 “Yo”。 如果你想在移动设备上预览渲染结果,你只需要安装Weex playground app 或将 Weex SDK 集成到您自己的应用程序中,然后使用扫描网页右侧的二维码。 https://weex.apache.org/cn/tools/playground.html

算了 我直接跳过了,直接写自己所遇到的坑吧。

二。wtf?? node版本不兼容?

1
2
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
9
C:\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
2
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
2
You may not have installed chromium properly, you can find solution here https://github.com/weexteam/weex-toolkit/issues/275.

chromium装不装都没影响。

四。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

这是不能使用的:
list-style-type(消除·) word-wrap float display box-sizing border-bottom -webkit-line-clamp
-webkit-box-orient rem em flex-wrap relative pink is autofixed to #FFC0CB
property value initial is not supported for line-height (only number and pixel values are supported)

文章目录
|