Weex首秀(2)

首先祝各位鸡年大吉,开工大吉!
趁着今天刚开工,工作任务还不多,可以继续学些Weex。

春节在家无聊的时候,继续跟进了一下Weex的学习,主要把“关于我”这个Page进行了一些优化,这里主要是一些体力活,并没有太多可说的,简单总结以下几点:

  1. Weex中所有的文字都要放在这个标签里,在普通的网页开发甚至Vue开发中,我偶尔会直接把文字放在div标签里,但是Weex中并不识别这样的语法。
  2. Weex的页面布局虽然也使用css语法,但是与Vue以及普通页面并不完全相同,我试验了一下,text-align:center必须用在text标签上,才能使文字居中,但是因为HTML并没有这个标签,所以要加载文字所在的父标签上,这个要注意,另外就是建议在Weex中多应用flex布局。
Weex首秀(2)_第1张图片

外部链接问题

在“关于我”这个page中,有一个需求,就是链接到外部网站,因为之前缺少APP开发经验,所以我想当然地认为这个问题非常简单,只需要价格a标签,或者像Vue一样采用Router的方法就可以了,但是后来发现这样并不能正常work。

仔细一看,Demo中所有Router都是链接到项目内部页面的,看地址栏上每个页面其实都是一个经过build的Js文件,这点应该和Vue是类似的,但这个并不符合我的需求,并且外部网站是传统的静态页面,因此还是需要解决。

首先抓包看看访问的URL是否正确:

Weex首秀(2)_第2张图片

由上图看 http://m.feiniu.com/my/order/index.html 这个请求地址应该没有错,所以有可能是兼容问题。

于是尝试捕捉error


 

startload: function(e) {
  modal.toast({ message: 'pagestart' })
},
finishload: function(e) {
  modal.toast({ message: 'finishload' })
},
failload: function(event) {
  modal.toast({ message: event })
}

使用不同的机器进行测试,安卓手机触发到了finishload事件,而IPHONE触发了failload事件,但是两个手机都无法正常显示网页。

最后我在官方文档中查到这个:


Weex首秀(2)_第3张图片

web组件要求的weex版本是v0.5+,但是我的项目中用的是v0.32的,所以说看起来还是得仔细查查手册啊,之前在Vue项目中也碰到过这种组件兼容性问题。


Weex首秀(2)_第4张图片

目前怀疑就是这个问题导致无法正常使用webview(未完待续)。

你可能感兴趣的:(Weex首秀(2))