weex 开发 (已放弃了)

Posted 2020-12-27 zccblog

关于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