Vue简单示例——weex

news2024/12/28 5:22:50

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实现效果:

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/25595.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

基于Vue+ElementUI+MySQL+Express的学生管理系统(3)

3.搭建学生考试信息的前端页面 1.在E:\vue\shiyan9目录下用cmd打开命令窗口。输入命令vue init webpack score-manage&#xff0c;创建一个基于webpack模板的项目。 图15 创建一个新的vue的脚手架的项目 2.执行cd score-manage&#xff0c;进入目录包下。下载依赖包。命令如下…

Pytorch 图像增强 实现翻转裁剪色调等 附代码(全)

目录前言1. 裁剪1.1 中心裁剪1.2 随机裁剪1.3 随机尺寸裁剪2. 翻转2.1 水平翻转2.2 垂直翻转2.3 随机旋转3. 色调3.1 灰度变换3.2 色彩抖动3.3 随机翻转颜色3.4 随机调整锐度3.5 高斯模糊4. 边缘填充5. 仿射变换前言 下文中有使用到plt&#xff0c;不懂的可看我这篇文章&#…

doker中的Jenkins容器配置github

1、在Jenkins插件 管理中下载github plugin和ssh和git插件 2、在Jenkins->系统管理->系统配置->github下配置凭据认证&#xff0c;添加凭证页面类型选择secret text 3、添加凭证页面secret栏输入githu token&#xff0c;其他任意输入 4、github token获取&#xf…

FANUC机器人零点复归的报警原因分析和零点标定相关步骤

FANUC机器人零点复归的报警原因分析和零点标定相关步骤 FANUC机器人零点复归时需要将机器人的机械信息与位置信息同步,来定义机器人的物理位置。 机器人通过闭环伺服系统来控制机器人各运动轴,当用户通过示教器点动机器人时,经过主板分析此命令后,带动电机旋转,电机上的SP…

软件测试入门概念

满足用户期望或正式规定文档&#xff08;合同、标准、规范&#xff09;所具有的条件和权能&#xff0c;包含用户需求和软件需求。 用户需求&#xff1a; 五花八门的用户需求&#xff0c;该需求比较简略。 软件需求&#xff1a; 又叫功能需求&#xff0c;该需求会详细描述开发…

SLAM本质剖析-Boost之Geometry函数大全(二)

4. 点云处理 4.1 add_point 将一个点添加到另一个点 4.2 add_value 将相同的值添加到点的每个坐标 4.3 assign_point 用另一个点指定一个点 4.4 assign_value 为点的每个坐标指定相同的值 4.5 cross_product 计算两个向量的叉积 4.7 divide_point 将一点除以另一点…

Python用27行代码绘制一幅满天星

前言 大家早好、午好、晚好吖 ❤ ~ 每一个孩子都像星空中的一颗星星&#xff0c;散发着自己所特有的光芒照亮着整个夜空。 今天就带大家用27行Python代码绘制一幅满天星吧。 全局设置 在绘制满天星的过程中要运用到turtle工具&#xff0c;它是Python的标准库&#xff0c;也可…

堆排序+TOPK问题

文章目录一.堆排序1.使用向上还是向下调整建堆好&#xff1f;(1)向上调整算法建堆的时间复杂度1. 完整过程(2)向下调整算法建堆的时间复杂度1.完整过程(3)总结2. 排升序(1) 建小堆(2) 建大堆3. 堆排序时间复杂度统计4.完整代码二 、 TOPK问题1. 概念2.两种方法第一种缺陷第二种…

【论文阅读】(2017)The late acceptance Hill-Climbing heuristic

文章目录一、摘要二、Late Acceptance Hill Climbing三、LAHC技术性能的研究3.1 Benchmark problems3.2 Experimental software3.3 Experiments四、LAHC性能评估4.1 评估方法4.2 LAHC不同变体的性能4.3 LAHC与其他技术的比较4.4 LAHC的规模独立性五、Conclusions and future wo…

Salesforce架构师常见问题(上)

Salesforce架构师需要花费大量时间来绘制、讨论、建立和设计稳健的端到端解决方案。架构师角色不仅仅是处理解决方案这么简单&#xff0c;还需要在企业级组织中与多个业务部门打交道。 因此&#xff0c;Salesforce架构师面试需要从以下3个方面准备&#xff1a; Part.1 分享工…

快速理解 JVM 内存模型 对象组成 对象内存分配

快速理解 JVM 内存模型 & 对象组成 & 对象内存分配 JVM 内存模型 JVM 内存模型分为首先在线程纬度可以分为两部分 一部分是 线程共享&#xff1a; 堆、元空间 堆 &#xff1a; 大多数 new 的对象都存在于堆内&#xff0c;也是 GC 主要回收的空间&#xff0c;占据 J…

涨薪跳槽利器,清华大咖总结的 Java 核心突击讲,一应俱全

前言 今天在这里分享一位读者粉丝的经历&#xff1a; 本人双非本科&#xff0c;没拿什么过奖&#xff0c;现在毕业也有三年时间了&#xff0c;大四感觉能力有点不足&#xff0c;进了一家小型的互联网公司实习&#xff1b;期间报名了个线上培训课程&#xff0c;一直在持续学习…

超详细Docker部署SpringBoot+Vue项目(三更博客项目部署)

文章目录1.项目部署规划2.前置工作2.1修改后端配置文件ip2.2修改前端Vue项目运行端口2.3修改前端对应的服务器ip2.4后端项目打包2.4.1解决打包问题2.4.2项目打包&#xff0c;本地运行jar包测试2.5前端项目打包2.6开放端口2.7配置安全组规则3.Docker安装4.拉取镜像5.编写Dockerf…

挂耳式蓝牙耳机哪家的好用,推荐几款实用的挂耳式耳机

时代在进步&#xff0c;而我们也顺势享受着进步过程中所产生的物件&#xff0c;就如骨传导和传统耳机&#xff0c;年轻人更多时候会偏向于骨传导耳机&#xff0c;毕竟骨传导的最大的特点就是佩戴舒适的同时&#xff0c;开放式耳道的设计能够更好的让中耳炎说拜拜。但近期市面上…

Hi,运维,你懂Java吗-No.3:java系统的启动

作为运维&#xff0c;你不一定要会写Java代码&#xff0c;但是一定要懂Java在生产跑起来之后的各种机制。 本文为《Hi&#xff0c;运维&#xff0c;你懂Java吗》系列文章 第三篇&#xff0c;敬请关注后续系列文章 欢迎关注 龙叔运维&#xff08;公众号&#xff09; 持续分享运…

浅谈一下:Java学习中不得不知道的:static (静态)成员

下面笔者&#xff0c;按照之前的Student进行简单的说明&#xff1a; class Student {private String name ;private int age ;private String classRoom ;//上课教室public Student(String name, int age) {this.name name;this.age age;}public void doClass() {System.out…

五、 通信协议

协议&#xff1a;约定&#xff0c;就好比我们来自不同的地方&#xff0c;如果都用各自的家乡话&#xff0c;那么肯定无法沟通&#xff0c;这时我们规定双方都说普通话&#xff0c;这样就可以沟通了&#xff0c;而这个规定就是“协议” 网络通信协议&#xff1a;速率、传输码率…

SpringCloud - 服务注册中心

文章目录1.服务注册中心2.Eureak服务注册中心2.1 Eureka服务注册与发现2.1.1 单机Eurake构建步骤(1) 创建EurekaServer服务注册中心(2) EurekaClient服务注册2.1.2 Eureka集群构建步骤(1) 创建第多个EureakServer注册中心(2) 修改host(模拟)(3) 修改YML配置2.1.3 集群配置Eurek…

搞定企业视频直播:硬件设备、直播网络环境和设备连接说明

阿酷TONY / 2022-11-22 / 原创 / 长沙 / 1.直播硬件设备 电脑硬件推荐配置&#xff1a; 系统&#xff1a;win7系统以上&#xff0c;macOS 10.13.6以上 显卡&#xff1a;独立2G显卡或以上 CPU&#xff1a;i5或以上 内存&#xff1a;4G或以上 选配硬件&#xff1a; …

我有 7种 实现web实时消息推送的方案,7种!

技术交流&#xff0c;公众号&#xff1a;程序员小富 大家好&#xff0c;我是小富&#xff5e; 我有一个朋友&#xff5e; 做了一个小破站&#xff0c;现在要实现一个站内信web消息推送的功能&#xff0c;对&#xff0c;就是下图这个小红点&#xff0c;一个很常用的功能。 不过…