关于weex 开发 本菜已放弃使用了,当初选择使用weex 是为了同时支持h5 和 android / ios 三端;想法很不错,深入之后 突然发现,开发起来并没有很轻松,因为weex 中有些方法,如果你要兼容三端,可能需要你去写三套代码去实现;深感不爽,决定弃坑了!
weex 开发布局方式
在weex 开发中不支持 rem/em/pt 布局方式, 目前只支持flexBox, 和以px为单位的布局方式;
另外 Android 开发是不支持百分比形式的布局方式;并且weex不支持float浮动属性,默认就是flex;
weex 是以750px 的宽度为基准,当屏幕宽度小于或大于750px时;weex 会自动进行适应,所以在开发中设计图最好是以750px 的尺寸为标准;
在weex 完全支持 flexBox 的布局方式,并且给予了每个元素 display: flex 的属性,所以在开发中,在使用flex 布局时,无需重复再次写 display: flex ;
禁止引入html自带的一些标签,并且不要用html5自带的标签(header,footer等)weex不识别
不要使用 html自带标签和html5 中的语义化标签, weex是不予以支持的,应使用 div 进行替换;
建议在编写组件的时候,每一个组件都包裹一个顶层的div,并且顶层div不写样式,这样能够避免出现一些莫名奇妙的bug;
text 标签
text 标签在html 中是不存在的,在weex 中是用来包含文本的,weex 中规定凡是文字的你都必须要用text 标签包裹,
如:
<text class=‘txt‘>Hello World!</text>
text 还有一个特殊的属性:
lines {number}: 指定文本行数。默认值是 0 代表不限制行数。
功能类似于 overflow:hidden 当文本超出 lines 行数时,超出部分不予显示!
另外, 在给text 包裹的文本添加样式的时候,不要直接以标签名的,添加属性,最好以类的形式进行添加,因为浏览器中,weex 会把text 标签渲染成 p 标签;有时会出现样式加不上的奇怪情况;
谨记:
1. weex不支持border复合写法。所以,我们要分开写
2. 盒模型是border-box,而不是常规浏览器下的content-box
3. 不支持float:left/right 用 flex代替
4. 安卓的dpi是一倍,苹果设备目前都是两倍的http://www.cnblogs.com/yaozhongxiao/archive/2014/07/14/3842908.html
5. weex不支持rem em ,不支持百分比,但是放心使用,其实内部已经适配好了,不同手机看到的大小肯定不是固定的
### 以上介绍的weex 的通用特性,下面我们介绍weex 组件的使用特性
input 组件
input不支持click事件, 因为input点击事件,安卓系统就会调用输入法,可能会造成冲突
input标签最后一定要写斜杠或者闭合标签,否则只能在网页加载出来,在虚拟机中是加载不出来的。
官方写法:
<input ref="input" class="input" type="text" @input="oninput" @change="onchange" @focus="onfocus" @blur="onblur"></input>
类html的写法:
<input ref="input" class="input" type="text" @input="oninput" @change="onchange" @focus="onfocus" @blur="onblur"/>
image 组件
<image> 用于在界面中显示单个图片。
注意:在HTML中通常使用的 <img> 标签在 Weex 中不支持,你应该使用<image>, 在使用image 标签的时,必须指定样式中的宽度和高度,否则无法正常显示。
属性:
1. placeholder 类似于懒加载的功能,在src 路径加载完成之前要展示的路径。
2. resize resize 与三个值
1) contain 缩放图片,保证图片宽高最长的部分完全展示在容器中
1) cover 缩放图片,以保证图片宽高最短的部分完全展示在容器中,有可能展示不完全
1) stretch 默认值. 按照<image>区域的宽高比例缩放图片。
3. src 要展示的图片的 url
list 组件
list 组件支持更多高级功能,由以下子组件提供
<cell>
内部使用cell 标签进行填充, 用于定义列表中的子列表项, HTML 中的 ul 之于 li;
Weex 会对 <cell> 进行高效的内存回收以达到更好的性能。
<header>
当 <header> 到达屏幕顶部时,吸附在屏幕顶部。
<refresh>
用于给列表添加下拉刷新的功能。
<loading>
<loading> 用法与特性和 <refresh> 类似,用于给列表添加上拉加载更多的功能。
注意:
<list> 的子组件只能包括以上四种组件或是 fix 定位的组件,其他形式的组件将不能被正确的渲染。
weex 内置模块
modal
modal 模块提供了以下展示消息框的 API:toast、alert、confirm 和 prompt。
我们在调用 weex 内置模块时:
const modal = weex.requireModule(‘modal‘)
export default {
methods: {
oninput (event) {
console.log(‘oninput:‘, event.value)
modal.toast({
message: `oninput: ${event.value}`,
duration: 0.8
})
},
onchange (event) {
console.log(‘onchange:‘, event.value)
modal.toast({
message: `onchange: ${event.value}`,
duration: 0.8
})
},
onfocus (event) {
console.log(‘onfocus:‘, event.value)
modal.toast({
message: `onfocus: ${event.value}`,
duration: 0.8
})
},
onblur (event) {
console.log(‘onblur:‘, event.value)
modal.toast({
message: `input blur: ${event.value}`,
duration: 0.8
})
}
}
}
当触发不同的事件,就会弹出不同的框,可以输入啊等等。
附上最近看到的一篇博客:
https://blog.csdn.net/Jupiterxx/article/details/80026909
原文地址:https://www.cnblogs.com/zccblog/p/9413209.html