我是三分一把刀。
今天抽了点时间来写一个demo。现在说下自己实现的过程。
最开始没看文档，所以遇到了很多坑呀，还以为自己没错，可能是编译错了。现在我说下我遇到的一些问题。
1，布局方面。
1.1 在写demo页面的时候，布局还是按照之前的浏览器css3的样式写的，而且对某些class还是前面加了限制，比如 .xx-box .xx-title,本意是box内部的title，结果发现浏览器生效，结果打包到安卓上是无效的，因此去找文档，发现是需要单个的给dom写样式，就直接.xx-title。这样就生效了。
1.2 页面布局默认display:flex
由于没有看文档，就一直按照传统的盒子模型去布局，采用的单位也是vw，与vh，在浏览器上跑起来是ok的，打包之后在虚拟机上跑起来结果crash了，由把代码跑到android studio，在logcat里面发现不支持该单位，很无语，这次让我认认真真还是去看文档，weex定义了一些与浏览器不同的dom元素，这点和微信小程序类似，flex布局和浏览器由点点区别，比如：浏览器支持flex-shrink，而weex不支持，浏览器的flex-grow，到了weex就是flex，这里说的是内部元素的一些css，看了官方文档之后，用了几分钟写了个页面，很丑，这点莫怪。
https://weex.apache.org/zh/docs/styles/common-styles.html#%E7%9B%92%E6%A8%A1%E5%9E%8B 【官方文档地址】
二：效果
在之前weex platform add android 等创建好环境之后
运行npm run android，【实际跑的指令为weex run android】
会在platforms/android/app/build/outputs/下生成一个apk文件，没有给apk签名之前app会有一个weex的开机图片，签名之后就不会有了。
okay之后，在浏览器里面和apk在安卓虚拟机里面跑起来。
浏览器效果
安卓虚拟机效果
两个差不多，主要问题在布局上。其余的都okay。
我是三分一把刀。欢迎沟通交流 qq：389836169
网友评论