zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    error C4430: missing type specifier int assumed. Note: C++ does not support defaultint 解决方法
    A performance evaluation of local descriptors——局部描述子评估译文(1,2,...)
    global mapper裁剪DEM文件的方法
    直方图学习笔记
    vc++如何将客户区存为bmp【zz】
    处理tiff格式dem数据的方法——输出xyz坐标
    处理tiff格式dem数据的方法——输出txt形式高程信息
    我的社区成立了
    Closed socket connection for client /39.103.162.230:56100 (no session established for client)
    Will not attempt to authenticate using SASL (unknown error) (org.apache.zookeeper.ClientCnxn)
  • 原文地址:https://www.cnblogs.com/zccblog/p/9413209.html
Copyright © 2011-2022 走看看