Vue简单示例——weex

2023-10-29

weex的生命周期:

因为我们的Weex和Vue是绑定在一起的,所以我们讨论关于生命周期时,说的实际上是在Weex中可以使用的Vuex的生命周期,也就是Weex对于Vue生命周期的支持,好消息,Weex支持大部分的Vue中的生命周期钩子函数:

Vue生命周期钩子函数 支持

beforeCreate

支持
Create 支持
beforeMounted 支持
mounted 支持
beforeUpdate 支持
update 支持
beforeDestroy 支持
destroy 支持
errorCaptured(捕获到错误时) 不支持(你不支持这个,难道你有自己的短路系统?)

 这里有必要说明一下最后这个不支持的钩子函数时什么意思,这个钩子函数的意思是当子组件发生错误的时候,父组件可以及时捕获这个错误并阻止这个错误,主要在于这个阻止,也就是说这是一个不一定会发生的错误,这个钩子函数的用处就是当这个错误真的发生的时候用来阻止这个错误让程序可以保持正常的运行,相当于是一个短路系统。

Vue在weex中的差异性:

虽然我们的Weex是和Vue配合使用的,但是这个配合并不是完美的配合,在纯粹的Vue中可以使用的一些东西在Weex中就不能正常的使用了。

比如:

语法差异:

1.目前,Weex支持大部分的组件,这些组件可以当作标签使用,但是有些组件并不是完全一样,并且一些复杂功能的标签只能通过基础标签进行组合来实现效果

2.在Weex中没有DOM,也就是文档对象模型,因为weex主要是面向移动应用,而DOM是针对Web端界面引用来说的,所以weex并不支持DOM。

3.有限的事件。Weex支持在标签上绑定事件,但是有些事件的触发和Web端的条件不太一样,而且触发后的属性和行为也不尽相同

4.没有BOM,这个和没有DOM的原因一样

在Weex中,调用API时使用的方法时注册、调用模块,也就是围绕模块编码

样式差异:

 我还是喜欢找官网上的图来贴贴~

基本意思就是说因为平台的差异,所以有一些组件的渲染效果并不相同。

Weex的基本概念:

在weex的开发中,我们抛弃了常说的标签和对象,而是使用一个新的概念,叫做组件和模块,其实都是一样的,组件就当标签用,模块就当对象来用。除了weex内置的组件和模块之外,weex还可以自定义组件和模块

组件:

在官方文档中,组件就是和标签一样用,只不过,这里的标签并不全等于HTML中的标签,还是有一些区别的,目前weex内置的组件如下:

 

 但是这么一看,其实一些基本组件已经够用了,而且weex还支持自定义,对于开发来说应该是足够了,我们在后面详细介绍的时候会拿几个常用的来说明,其他的使用方法也基本相同

模块:

模块就相当于我们的JS对象,可以调用方法实现不同的功能,而且使用非常简单,只需要使用一个weex的自带的属性来调用就可以了,非常简单~ 

简单案例:在简单介绍之后,我们就找一个现成的案例来把理论编程代码

首先测试内置组件:

我们就先测试test和image这两个标签吧

test代码实现:

<template>
    <div>
        <text>
            在weex中没有p标签,如果想要放文字,需要使用text组件,但是和标签的使用是一样的
        </text>
        <text>
            而且不仅可以放普通的文字,还能访问JS中的变量
            {{msg}}
        </text>
    </div>
</template>

<script>
    // 这个语法是JS的暴露语法,就是将内容暴露出去一个可以供外界发现和使用的接口
    module.exports = {
        data(){
            return{
                msg:'你好Weex'
            }
        }    
    }
</script>

test运行效果:

image代码实现:

<template>
    <div>
        <image style="width:500px;height:500px" :src=src ></image>
    </div>
</template>

<script>
    // 这个语法是JS的暴露语法,就是将内容暴露出去一个可以供外界发现和使用的接口
    module.exports = {
        data(){
            return{
                src:'https://vuejs.org/images/logo.png'
            }
        }    
    }
</script>

image运行效果:

 

如果觉得组件的概念无法理解,就可以简单理解为HTML里面的标签,反正这两个的使用方式是一样的 

测试内置模块:

对于模块的演示说明,我们也用两个比较经典的模块进行演示说明,一个是过段时间就自动消失的模块和一个选择对话框的模块:

 其实这个API的使用在官网上有详细的参数介绍和使用方法,我们只需要根据官网给的示例进行修改就好:

toast代码实现:

<template>

</template>

<script>
    const modal = weex.requireModule('modal')
    modal.toast({
        message:'我马上就要消失喽~',
        duration:3
    })
</script>

toast实现效果:

 

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Vue简单示例——weex 的相关文章

  • 浏览器安全错误:“由于安全违规,此页面无法显示”[关闭]

    Closed 这个问题是无法重现或由拼写错误引起 help closed questions 目前不接受答案 我在一家网络开发公司工作 我为我们的一些营销人员设计了一个页面 以便将自定义页脚添加到我们应用程序中的各个页面 在部署我们的产品供
  • 如何将大数据传递给网络工作者

    我正在研究网络工作人员 并将大量数据传递给网络工作人员 这需要很多时间 我想知道发送数据的有效方式 我尝试过以下代码 var worker new Worker js2 js worker postMessage buffer buffer
  • 如何在 Angular 中按 ID 显示博客详细信息

    我想在 Angular 中通过 ID 显示博客详细信息 为此 当您单击博客主页上的按钮时 应用程序会将您带到博客详细信息页面 即 pagina component html 文件 我实现了在此处显示所有博客 但我真正想要的是显示一个独特的博
  • Angular 2 TypeError:无法读取 null 的属性“animate”

    我正在使用 Chrome 51 和 Angular 2 rc4 并在加载我的 Angular 应用程序时在控制台中弹出以下错误 TypeError Cannot read property animate of null at e supp
  • 如何在 js.erb 中使用 Ruby 代码?

    我可以使用以下方式在模态中渲染部分内容escape javascript在js erb文件代码中 body append my modal modal show 但是 我似乎无法获得以下结果 console log ERB 将输出一个纯字符
  • 如何在 Jasmine JS 中重用 beforeEach/afterEach?

    当使用 JasmineJS 编写测试时 我有许多具有类似 beforeEach afterEach 代码的测试 有没有办法使用 JasmineJS 测试套件实现继承模型 我可以将所有测试分组为一个describe但在这种情况下 我将以包含所
  • 计算两列中两个总和的平均值,并将其显示在 JQGrid 的下一列中

    I m using Jqgrid with summery row at grouping level Now I want to know one thing that Is it possible to show average cal
  • 如何在 Bootstrap 中将单选按钮设置为“选中”? [复制]

    这个问题在这里已经有答案了 我使用 Bootstrap 按钮作为单选按钮 http getbootstrap com javascript buttons http getbootstrap com javascript buttons 这
  • 获取访客的 Optimizely A/B 测试和变化

    当我在网站上运行实验时 我希望能够找出当前访问者看到的测试和变体 我无法找到如何做到这一点优化Javascript API https www optimizely com docs api 您可以获得第一个正在运行的实验的 ID 假设您有
  • jQuery:“$(this).next().next()”有效,但“$(this).next('.div')”无效

    好吧 我正在尝试将这组信息单独隐藏 这有效 arrow click function this next next slideToggle img class arrow src https via placeholder com 40 h
  • 有效 JSON 上的 Firefox JSON“格式不正确”错误

    我在 Firefox 中收到以下错误消息 Error not well formed Source File http school courses booking add php 1287657494723 Line 1 Column 1
  • Javascript CORS 图像/画布操作

    我正在尝试从另一个已配置为允许 CORS 的域检索图像 并操纵像素 然后我想显示结果并能够操纵结果 我可以在我请求的图像上使用 getImageData 和 toDataURL 所以我知道服务器部分可以工作 但是 当我尝试将图像的 src
  • 自动将新帖子添加到侧边栏

    我在用着VuePress https vuepress vuejs org and NetlifyCMS https www netlifycms org 作为内容管理 我有 3 个收藏 design 前端 and back end 其中包
  • 发送带有图像的嵌套 JSON

    我一直在尝试研究一种能够通过 Ajax 将嵌套 JSON 请求发送回服务器的方法 根据我的理解 我们主要用于向服务器发送图像或文件的 formdata 在这种情况下不起作用 因为 FormData 似乎不处理嵌套对象 这就是我需要发送的有效
  • jQuery onclick 隐藏其父元素[关闭]

    很难说出这里问的是什么 这个问题是含糊的 模糊的 不完整的 过于宽泛的或修辞性的 无法以目前的形式得到合理的回答 如需帮助澄清此问题以便重新打开 访问帮助中心 help reopen questions 我想隐藏 li tag on a 使
  • 如何使用javascript将数据存储在xml文件中?

    我是 javascript 新手 并在我的项目中使用它 因为我需要读取 xml 文件 然后在操作后我想将更新后的值存储回 xml 文件中 我成功从 xml 文件获取值 但无法存储值返回到 xml 文件 这是我尝试过的代码
  • execCommand 的替代品

    我希望创建一个所见即所得编辑器 使用 jQuery 作为框架 我可以使用不同的方法来简化生产 我现在确实有一个正在工作的编辑 而且运作良好 我使用 iFrame 并将其设计模式设置为打开并从那里开始 然而 有一些事情困扰着我 以更改所选文本
  • Javascript - HTML Canvas 上的 Gecko 边框半径自适应(CSS border-radius)

    我试图弄清楚如何将 border radius css 属性的行为重现到 HTML 画布中 所以我已经在 J avascript 中做了一些事情 以便使用特定的半径 对于每个角 来计算给定形状的正确边界 如果需要的话 这是上一个问题 Gec
  • JavaScript 模板文字稍后替换变量(在知道值之前)

    是否可以在已知值之前以某种方式使用模板文字 JS 模板文字的每个演示都如下所示 var name John var s Hello name 但在现实世界中 模板是在我们知道变量值之前定义的 某处定义了模板 在页面加载时 var s Hel
  • 多个引导模式的滚动问题

    我有一个带有大量信息的模态页面 因此您需要滚动 该模式包含指向第二个模式的链接 When I 打开模态 1 单击链接打开模式 2 模式 1 保持在后台 然后关闭模式 2 以便我回到模式 1 modal 1 失去滚动 仍然有一个滚动条 但它不

随机推荐

  • python skimage图像处理(一)

    本文转自 python数字图像处理 基于python脚本语言开发的数字图片处理包 比如PIL Pillow opencv scikit image等 PIL和Pillow只提供最基础的数字图像处理 功能有限 opencv实际上是一个c 库
  • mipi dsi接口_Camera MIPI接口详解2

    简介 上一篇文章中 我们简单的介绍了camera接口的类型 有串口和并口和LVDS接口 以及MIPI接口一些电气特性的一些简单的技术探讨 那么我们现在常用的都是mipi接口 需要深入一点去理解MIPI接口的电气特性 有助于我们接下来理解MI
  • 类脑导航的机理、算法、实现与展望

    类脑导航 CBN 是一种新型的导航方式 其机理基于对大脑和动物行为的理解 与传统导航系统不同的是 CBN借鉴了大脑神经元与突触的工作原理 通过人工神经网络学习和模拟动物的行为 使导航过程更加具有灵活性和适应性 CBN涉及到的算法主要是基于机
  • 区分接口继承和实现继承——条款34

    表面上直截了当的public继承概念 经过严密的检查之后 发现它由两部分组成 函数接口 function interfaces 继承和函数实现 function implementations 继承 这两种继承的差异 很像本书导读所讨论的函
  • 【贪心算法】哈夫曼编码问题

    问题描述 哈夫曼编码是广泛地用于数据文件压缩的十分有效的编码方法 其压缩率通常在20 90 之间 哈夫曼编码算法用字符在文件中出现的频率表来建立一个用0 1串表示各字符的最优表示方式 一个包含100 000个字符的文件 各字符出现频率不同
  • [ Note]python字符串的json 格式化美化输出

    通过爬虫获取到的json文件是字符串 vscode的prettify json失效 参考 json dumps参数之解 python的JSON用法 dumps的各种参数用法 详细 源码 jsonfile json dumps json文件
  • volatile的讲解以及宏定义和立即数

    volatile关键字 是用于表明变量代码无法被优化 比如 int a 0 a 1 a 2 a 3 经过编译器代码优化后 int a 0 a 3 省去重复工作 debug下不会作任何优化 但这样的代码效率一般只用在调试下 release模式
  • 2013小米笔试题--异形数

    题目 一个数组里 除了三个数是唯一出现的 其余的都出现偶数个 找出这三个数中的任一个 比如数组元素为 1 2 4 5 6 4 2 只有1 5 6这三个数字是唯一出现的 我们只需要输出1 5 6中的一个就行 分析 一般这样的题目采用异或的办法
  • nvm安装node ,yarn

    新电脑安装前端环境 1 先安装nvm 它是一个nodejs的版本管理工具 nvm 下载地址是github中的 推荐下载安装版 一键安装 自动配置环境变量 https github com coreybutler nvm windows re
  • HTTP协议系列教材 (二)- 借助FireFox火狐调试工具学习HTTP协议 

    对于HTTP协议的学习 我们将借助火狐浏览器FIREFOX的调试工具来实际观察浏览器和服务器之间传输数据的具体内容 步骤1 下载 FireFox步骤2 打开调试工具步骤3 观察 request response 步骤 1 下载 FireFo
  • 解决Jmeter返回数据中文乱码问题

    步骤1 修改jmeter中的配置文件jmeter properties的配置项sampleresult default encoding 修改为utf 8 解除注释后重启Jmeter 步骤2 添加后置处理器 BeanShell PostPr
  • 跟我学Java设计模式第三天:代理模式、适配器、装饰者等其中模式结构

    5 结构型模式 结构型模式描述如何将类或对象按某种布局组成更大的结构 它分为类结构型模式和对象结构型模式 前者采用继承机制来组织接口和类 后者釆用组合或聚合来组合对象 由于组合关系或聚合关系比继承关系耦合度低 满足 合成复用原则 所以对象结
  • Java实现自定义注解

    前言 1 Java实现自定义注解其实很简单 跟类定义差不多 只是属性的定义可能跟我们平时定义的属性略有不同 这里会给大家详解 先来看代码 Target ElementType FIELD Retention RetentionPolicy
  • C++使用string的大数运算(4)除法

    本次项目目标 使用C 完成对于大数的相关运算 项目要点 1 大数指的是远超long long int的数据 2 将大数用矩阵进行存储 并通过矩阵实现运算 3 本人采用字符串进行存储 应注意char的特点 比如 char a 161 cout
  • OpenErp的权限

    首先引用一篇入门文章 http www oscg cn openerp develop doc 09 可以发现 其实openerp的权限分成了多层次的 菜单 视图 对象 规则 从字面意思就是每层都控制着自己对应的权限 然后我创建了一个新的g
  • HTML5 canvas 计算文字宽度的方法(measureText)

    var c document getElementById myCanvas var ctx c getContext 2d ctx font 30px Arial var txt Hello World ctx fillText widt
  • IEEE 802.3ad 链路聚合与LACP的简单知识&EtherChannel 总结

    IEEE 802 3ad 链路聚合与LACP的简单知识 内容提要 本文主要介绍了链路聚合的概念以及链路聚合与EtherChannel 以太通道 的区别 说明 IEEE 802 3ad 是执行链路聚合的标准方法 从概念上讲 将多个以太网适配器
  • 国内首个行业级燃机智慧运维云平台是如何炼成的?

    在未来的能源结构转型中 燃气发电将发挥重要作用 这似乎颠覆了人们日常认知 众所周知 在碳达峰 碳中和的环保目标下 我国能源结构正迎来根本性变革 传统化石能源占比将逐步下降 绿色低碳的新能源占比将持续提升 为何还要推动燃气发电的发展 这绝非虚
  • android edittext setonkeylistener,Android EditText 键入事件 —setOnKeyListener

    main xml android orientation vertical android layout width fill parent android layout height fill parent gt android layo
  • Vue简单示例——weex

    weex的生命周期 因为我们的Weex和Vue是绑定在一起的 所以我们讨论关于生命周期时 说的实际上是在Weex中可以使用的Vuex的生命周期 也就是Weex对于Vue生命周期的支持 好消息 Weex支持大部分的Vue中的生命周期钩子函数