Weex入门，前端应用快速搭建

Posted 2021-04-29 Java猫说

阅读本文约“2分钟”

Weex介绍

        - weex是2016年4月阿里巴巴在Qcon大会上宣布开源的一套跨平台移动开发工具。

        - 对于移动开发者来说，weex主要解决了频繁发版和多端研发的两大痛点，同时解决了前端语言性能差和显示效果受限的问题。

        - 开发者只需要在自己的app中嵌入weex的sdk，就可以通过撰写html/css/javascript来开发native级别的weex界面，weex界面的生成码其实就是一段很小的js，可以像发布网页一样轻松部署在服务端，然后再app中请求执行。

Weex的优势

        - 支持ES6规范

        - 性能优异，开发简洁标准，体积小巧

        - 跨平台

搭建Weex开发环境

        - 安装依赖 node.js

        - npm install -g weex-toolkit

        - Weex init project , npm install

        - npm run serve

        - npm run dev

Weex样式介绍

    Weex通用样式和文本样式

        - Weex支持的通用样式

        - Weex中的文本样式

    - 适配和缩略

        1、Weex对于长度值目前只支持像素值，不支持相对单位（em、rem）；适配以750px标准

        2、设定边框，border目前不支持类似这样border：1px solid #ff0000;的组合写法

        3、设定背景色，background目前不支持类似这样background：red的写法，需要修改为具体的background-color：red

    - 定位

        1、weex支持position定位，relative | absolute | fixed | sticky，默认值为relative。

        2、weex目前不支持z-index设置元素层级关系，但靠后的元素层级更高，因此，对于层级高的元素，可将其排列在后面

        3、如果定位元素超过容器边界，在android下，超出部分将不可见，原因在于Android端元素overflow默认值为hidden

    - 其余需要注意的地方

        1、weex支持线性渐变linear-gradient不支持radial-gradient径向渐变

        2、weex中box-shadow仅仅支持ios

        3、目前<image>组件无法定义一个或几个角的border-radius，只对iOS有效，对Android无效（实测有效）

        4、weex中，flexbox是默认并且唯一的布局模型，每个元素都默认拥有了display：flex属性（真机不是）

    - 文本样式的属性

        color；font-size；font-weight；font-style；font-family；text-decoration；text-aline；text-overflow（内容超长时的省略样式）；lines（指定文本行数）

weex内建组件

    <a>组件

        2、组件中无法添加文本，需要在其中加上text组件才能添加文本

        3、此组件支持除了自己外的所有Weex组件作为子组件

        4、支持所有通用样式

        5、请不要为<a>组件添加click事件

    <web>组件

        2、不支持任何子组件

        3、pagestart，<web>组件开始加载时执行

        4、pagefinsh，<web>组件完成加载时执行

        5、error，<web>组件加载错误时执行

    <webview>模块

        1、一系列<web>组件的操作接口，可以通过调用this.$refs.el来获取元素的引用

    API

        3、reload（webElement），刷新当前页面

    <list>组件

        1、<list>组件是垂直列表功能的核心组件

        2、<cell>组件，列表中的子项，类似于html中的ul和li的关系

        3、<header>到达屏幕顶部时，吸附在屏幕顶部

        4、<refresh>给列表添加下拉刷新的功能

        5、loadmore事件，loadmoreoffset{number}触发事件所需距离

        6、scroll事件列表滚动时触发的该事件

        7、offset-accuracy{number}控制scroll事件发生的频率。（默认为10px）

    <refresh>组件

        1、用于提供下拉加载功能。<scroller>和<list>的子组件，只有被这两个组件包含时才能正常展示

        2、refresh事件，当list组件和scroller组件被下拉时触发

        3、pullingdown，当list组件和scroller组件被下拉时触发，可以从事件的参数对象中获取dy,pullingDistance,viewHeight,type

    <vue-router>介绍

        1、针对vue.js开发的一个前端路由工具，可以方便快捷的开发单页应用。

        2、vue-router是以vue.js插件的形式存在的，我们在使用vue-router之前需要先引入vue文件，因为vue是weex内置的前端框架，所以不需要再引入一次了，只需要引入vue-router并注册就可以了。

        3、我们需要在tenplate模板中添加<router-view>的方式定义路由的出口，路由匹配到了对应的vue文件就会替换这个标签。

        4、在我们向应用中注册router之前，需要先创建一个路由实例，并且配置对应的路由规则。

        5、在应用中注入路由功能，我们还需要给入口组件添加router属性，使应用和路由建立联系。

接下来我们看看基本版的运行效果，大家的手机也可以安装Weex playground app 分IOS和安卓两个版 我是用安卓的真机调试也是很方便的。

▼

更多精彩推荐，请关注我们

▼

编程分享