Weex使用特殊几点

清疚 2022-11-09 00:59 138阅读 0赞

# 1. Weex  #

Weex 致力于使开发者能基于通用跨平台的 Web 开发语言和开发经验，来构建 Android、iOS 和 Web 应用。简单来说，在集成了 WeexSDK 之后，你可以使用 JavaScript 语言和前端开发经验来开发移动应用。

# 2. Weex使用差别 #

## 2.1 定位 ##

1. weex支持position定位，relative|absolute|fixed|sticky，默认值是relative

2. weex目前不支持z-index设置元素层级关系，但靠后的元素层级要比前面的层级高，因此层级高的元素可以排在后面

3. 如果定位元素超出了边界，在Android下，超出部分将不可见，因为Android端元素overflow默认值是hidden

4. weex支持线性渐变linear-gradient，不支持 redial-gradient镜像渐变

5. weex中的box-shadow仅仅支持IOS

6. <image>组件无法定义一个或几个角的border-radious,只对IOS有效，对Android无效

7. weex中，flexbox是默认且唯一的布局模型，每个元素都默认拥有了display:flex属性

## 2.2 组件 ##

weex的内建组件共有15个

###     2.2.1 <a>组件 ###

1.  weex中的a组件定义了指向weex页面打包后的一个Js地址

2. a组件内部不能直接添加文本，否则不显示，需要使用text组件添加文本

<a href="../dist/main.js">
        <text>a组件内部的文本</text>
    </a>

3. a组件支持除了自己外的所有weex组件作为子组件

4. 支持所有通用的样式

5. a组件不支持click事件，不能添加click事件

##     2.2.2 web组件 ##

1. <web>组件用于在页面中嵌入一张网页； src指定页面资源的地址。

2. 不支持任何子组件

3. pagestart: web组件开始加载时执行

4. pagefinish: web组件完成时加载执行

5. error：web组件加载错误时执行

<template>
      <div class="content">
        <web class="web" :src="src" v-on:pagestart="start" @pagefinish="finsh" @error="error"></web>
      </div>
    </template>
    <style>
        .content,.web{
            width:700px;
            height:600px;
        }
    </style>
    <script>
        export default{
            data:{
                src:'http://www.imooc.com'
            }
            methods:{
                start:function(){
                },
                finish(){
                },
                error(){
                }
            }
        }
    </script>

2.2.3  <webview>模块

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

goBack(webElement) 加载历史记录里的前一个资源地址；

reload(webElement),刷新当前页面

goForward(webElement)  加载历史记录里的下一个资源

更多详情，见 [https://weex.apache.org/zh/docs/components/text.html][https_weex.apache.org_zh_docs_components_text.html]

[https_weex.apache.org_zh_docs_components_text.html]: https://weex.apache.org/zh/docs/components/text.html