weex 开发 (已放弃了)

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

时间: 2024-10-15 15:02:03

weex 开发 (已放弃了)的相关文章

C++中单项链表的结点删除问题——为什么我的链表编译能过,但是运行的时候显示:*** Error in `./list&#39;: free(): invalid pointer: 0x08ba20cc *** 已放弃 (核心已转储)

1 #include<iostream> 2 #include<cstring> 3 using namespace std; 4 5 struct student{ 6 int my_id; 7 char name[20]; 8 int my_age; 9 int my_score; 10 student *next = nullptr; 11 student() = default; 12 student(int id,const char *n,int age,int sco

在做weex开发时使用leancloud文件上传

不同于移动端原生开发,当开发者使用weex移动开发时,使用第三方SDK比较棘手.因为第三方的JS SDK是无法直接拿来使用的,环境不同.必须使用原生SDK,下面我介绍一下自己是如何在weex开发时(安卓)使用leancloud的服务的. 首先去leancloud的安卓SDK下载页面,下载SDK,这里我只使用了最基础的SDK包 <img src="/uploads/default/original/2X/5/582ffee695e0192ae085f0bc0e033543b316f673.p

错误:Cannot mix incompatible Qt library (version 0x50601) with this library (version 0x50602) 已放弃

今天在编译完deepin最新的软件包安装器,运行的时候出现Cannot mix incompatible Qt library (version 0x50601) with this library (version 0x50602) 已放弃这个错误,搜索了一下,发现网上的解决方法寥寥无几,但最终还是找到了方法成功解决了. 错误:Cannot mix incompatible Qt library (version 0x50601) with this library (version 0x50

weex开发安卓原生应用

weexjoke是利用weex框架开发的移动原生应用 项目地址:https://github.com/iChenLei

阿里巴巴开源Weex 开发教程

Weex 是什么 Weex是阿里发布的一款用WEB方式开发原生app的开源产品 Weex能够完美兼顾性能与动态性,让移动开发者通过简捷的前端语法写出Native级别的性能体验,并支持iOS.安卓.YunOS及Web等多端部署.对于移动开发者来说,Weex主要解决了频繁发版和多端研发两大痛点,同时解决了前端语言性能差和显示效果受限的问题.  开发者只需要在自己的APP中嵌入Weex的SDK,就可以通过撰写HTML/CSS/JavaScript来开发Native级别的Weex界面.Weex界面的生成

Weex开发笔记

关于weex的环境安装,前面已经介绍了,并且顺利运行android版官方demo,亮点十足,继续关注.本文介绍weex for ios的相关内容,以及遇到的坑. weex仓库:https://github.com/alibaba/weex. 一,运行IOS playground 阿里巴巴官方说明: Prerequisites Install Node.js 4.0+ Under project root npm install, install project ./start Install i

酒后本已放弃抢劫 他却因一句话杀害网约车司机o

2016年,Laox在日本多次赞助体育活动,如全权冠名首届日本华侨华人马拉松接力赛,组织华人球迷迎接并助阵苏宁足球队来日参加亚冠赛等,促进了在日华侨华人团体之间的相互交流,助推了在日侨胞的健康意识及文体活动,也促进了中日体育交流,获得了华人社会的称赞.如果总统一家希望在公共区域.白宫一层或是历史人物的房间(如林肯的卧室)有所改动,他们必须参考白宫维护委员会的意见. 如果西方都接受印度作为一个核国家,并且对印巴搞核竞赛也觉得无所谓,那么中国就没必要非站出来死扛一些原则.而且印度能够得到的一些核便利

Android开发—已root的手机获取data路径

开发android的时候,尽管手机已经root但是DDMS中还是没有data/data路径怎么办? 可以用cmd命令提示符为逐个文件夹设置权限: 打开cmd,输入 adb shell  回车—> su 回车—> chmod 777 /data 回车—> chmod 777 /data/data 回车—> chmod 777 /data/data 回车—> chmod 777 /data/data/你的app包名 回车—> 完成! 如果想要在你的包名中新建一个文件夹,参考

SocketException: 由于线程退出或应用程序请求,已放弃I/O操作&quot; 解决方案

1 1.private static ManualResetEvent posReceiveDone = new ManualResetEvent(false); 2 3 2.posThread = new Thread(delegate() { Pos(); }); posThread.Start(); 4 5 3.public void Pos() 6 7 { 8 9 ……//填写必要代码 10 11 PosSocket.BeginReceive(PosMsgBuffer, 0, 2, 0,