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

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

  1. WCF 遇到 由于线程退出或应用程序请求,已放弃 I/O 操作 ListenerContextInputStream

    异常类型:IOException 异常消息:An exception has been thrown when reading the stream. 异常信息: at System.ServiceM ...

  2. Weex开发之路(1):开发环境搭建

    一.Weex介绍 Weex是阿里巴巴在2016年6月份对外开源的一款移动端跨平台的移动开发工具,Weex的出现让我们的应用既有了Native的性能和H5的动态性,只要通过前端JS语法就能写出同时兼容i ...

  3. linux 已放弃(吐核) (core dumped) 问题分析

    在运行自己写的 C 多线程程序是,出现:已放弃(吐核)  问题. 出现这种问题一般是下面这几种情况: 1.内存越界 2.使用的非线程安全的函数 3.全局数据未加锁保护 4.非法指针 5.堆栈溢出 也就 ...

  4. 阿里巴巴开源Weex 开发教程

    Weex 是什么 Weex是阿里发布的一款用WEB方式开发原生app的开源产品 Weex能够完美兼顾性能与动态性,让移动开发者通过简捷的前端语法写出Native级别的性能体验,并支持iOS.安卓.Yu ...

  5. Weex 开发入门

    去年也听说过 React Native 技术,现在好像很多大公司都在这套技术中踩坑,在开发自己的UI.工作中涉及不到,一直没有学习相关的知识. 并且听说阿里的 vue native,一直很期待.前段时 ...

  6. 用Weex开发的V2EX三端app,附探坑总结

    项目地址 git传送门(内附项目预览) Weex环境配置 npm install -g weex npm install -g weexpack # weex客户端的cli npm install - ...

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

    开发android的时候,尽管手机已经root但是DDMS中还是没有data/data路径怎么办? 可以用cmd命令提示符为逐个文件夹设置权限: 打开cmd,输入 adb shell  回车—> ...

  8. Weex开发中的应用小笔记

    内容: 获取输入或其他操作使得值一直改变并在一段不改变的时间后执行下一步操作(输入搜索关键字并执行搜索) https://vuejs.org/v2/guide/computed.html?spm=a2 ...

  9. weex 开发踩坑日记--环境配置、安卓运行、adb、开发

    环境配置方面 1.需要安装java和android环境,java的话一定要下载jdk而不是jre. 在"系统变量"新建一个变量名为JAVA_HOME的变量,变量值为你本地java的 ...

随机推荐

  1. caffe安装中opencv的各种库问题

    提示有些库 high**** opencv的问题,好像是这几个库版本冲突,不要用anaconda里的lib库,用系统的库就行了,删掉或者从新链接过去.

  2. element-UI动态的循环生成Popover弹出框的方法

    父组件:<div class="itemLi" :class="{gray: (salse.flashsaleStatus==3 || salse.flashsal ...

  3. SpringBoot学习10:springboot整合mybatis

    需求:通过使用 SpringBoot+SpringMVC+MyBatis 整合实现一个对数据库中的 t_user 表的 CRUD 的操作 1.创建maven项目,添加项目所需依赖 <!--spr ...

  4. 【读书笔记】你不知道的JavaScript(上卷)--作用域是什么

    第一章 作用域 1.理解作用域 几个名词的介绍 引擎:从头到尾负责整个JavaScript程序的编译及执行过程 编译器:负责语法分析及代码生成器等脏活累活 作用域:负责收集并维护由所有声明的标识符(变 ...

  5. P3366 最小生成树【模板+Kruscal讲解】

    此题数组大小非常重要 算法过程: 现将全部边按照权值(由小到大)排序. 按顺序(同上)考虑每条边,只要这条边和之前已选择的边不构成圈,就保留这条边,否则放弃这条边. 具体算法 成功选择(n-1)条边后 ...

  6. expect配合shell 实现自动分发秘钥文件

    expect使用场景 有时候需要批量地执行一些操作,或者执行自动化的操作的时候,有些指令需要交互式地进行这就会有很多麻烦,linux下有一个程序交expect,它可以模拟键盘输入文本,省去人工干预交互 ...

  7. ES6对象的扩展及新增方法

    1.属性的简洁表示法 ES6允许直接写入变量和函数,作为对象的属性和方法.这样的书写更加简洁. const foo = 'bar'; const baz = {foo}; baz//{foo:'bar ...

  8. 【CSS】多行溢出显示省略号

    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;//超出三行隐藏 overflow: hidden; ...

  9. OLAP和OLTP

    OLTP与OLAP的介绍 数据处理分为两种技术架构系统:OLTP与OLAP OLTP(联机事务处理过程) OLTP是传统的关系型数据库的主要应用,主要是基本的,日常的事务处理,例如银行的交易     ...

  10. STM8S PWM输出停止后 IO口电平输出

    STM8S有许多定时器支持PWM输出,但在停止定时器后,IO口电平到底是多少呢?或高或低. 因此,为了确定PWM停止输出电平后其对应的值是多少,我们在停止PWM输出时需要对CCMR1寄存器进行设置. ...