Vue简单示例——weex跨平台解决方案

news2025/1/13 2:36:03

简单介绍:

Weex的出现主要解决了Web开发的应用频繁发布版本和多端研发两个问题,同时解决了前端语言性能差异和显示效果受限的问题。

什么是weex:

Weex是使用流行的Web开发体验来开发高性能原生应用框架。使开发者可以用JS语言和前端开发经验来开发移动应用。就是让我们能使用前端的东西来开发移动端,实现无缝衔接。(虽然也没有那么的无缝)

weex和框架的关系:

weex需要依赖前端框架来编写,但weex并没有绑定、限制在特定的框架上。目前,Vue和Rax是广泛应用于Weex开发的前端框架。本章我们就使用Vue+weex来演示创建一个基本的weex环境和框架。

我们为什么要使用weex:

之前我们说过,weex的出现就是为了让前端开发人员能比较流畅的过度到移动端的开发,所以weex就是帮助我们开发移动端应用的

创建第一个weex实例:

就像我们创建一个Vue框架一样,weex也需要有前置条件,就是必须安装好node和npm,最好将npm的源配置为淘宝镜像,这样才能开始安装weex

检测node和npm的安装和版本号:

如果版本太低,也可以先升级一下版本:执行npm install -g npm@版本号

在完成了node和npm的安装后,就是开始完成weex环境的安装:

使用npm install weex-toolkit -g命令进行安装:

 中间可能有一些黄色的警告,这些都暂时不用管。

在执行完之后,我们使用weex -v查看weex的版本号:

需要注意的是,在我们第一次运行weex的命令的时候,会弹出一个需要手动选择的选项,这个选项的意思是:”weex-toolkit 可以匿名报告使用情况统计信息以随着时间的推移改进该工具吗?“也就是报告使用中的问题,这个可以Y也可以N,他推荐Y那咱们就Y了

然后就进入下一个选项:

这个选项的意思是配置npm的源,是使用npm自带的源还是使用淘宝的源,为我们的中国用户特意添加了一个网速快的源,非常的贴心,我们就用第一个use taobao就可以了

 在我们选择完成,按下回车之后:

就会出现weex的beta版本号,这个时候我们的weex环境才算配置完成,我们就可以再次输入查看版本号的命令:

 这样就能正常的显示版本号了

接下来我们就开始创建一个weex应用:

Weex 提供了一个命令行工具 weex-cli 来帮助开发者使用 Weex。它可以用来快速创建一个空项目、初始化 iOS 和 Android 开发环境、调试、安装插件等操作。

目前 weex-cli 只支持创建 Vue.js 的项目。创建 Rax 的项目可以使用 rax-cli,参考 Rax 的官方网站 了解其用法。

weex create 应用名

这个应用的名字是可以自定义的,当然最好还是不要包含大写字母和一些主流的框架的名字,在我们写好命令之后,就可以按下回车进行应用的基本配置了:

设置应用的名字:

这里他括号里面的就是我们之前配置好的应用的名字,可以直接按下回车确定,如果想要改一个名字,可以在这里进行修改。

设置应用的类型:

 

这里他推荐我们就是创建一个weex项目,而我们也确实是想创建一个weex项目,所以直接回车就好了

Author表示这个应用的作者,这个作者可以在应用详细信息里可以查到,我们就输入自己的英文名或者自己名字的拼写,不建议使用中文,防止乱码

设置weex的版本:

第一个选项就是一个比较新的版本,适合尝新和体验一些新的特性,但是很显然,这些新的东西都伴随一些不稳定性,所以我们如果是开发中会选择第二个稳定版,后面也说了,推荐给大多数用户,我们就选择这个

 选择Bable模式:

 在前端开发的过程中,一旦涉及到JS的编写就一定绕不开ES6语法,那么Bable就非常的必要了,这里我们就选择stage-0模式就可以,因为他后面的洋文说了:”推荐给大多数用户,支持你所有的ES6语法“,那我们就选择这一个。

是否使用Vue-router来管理页面路由:

这里就是字面意思,但是他告诉我们不推荐使用vue-router,为什么呢,在weex的官网上给出了我们解释:

 也就是说,我们的Vue是单页面应用,所以我们使用了路由来模拟多页面中的页面切换效果,但是weex是可以编写多页应用的,而且weex有一个专门用于页面通信的组件。而且就算你配置了路由的属性,也只能影响单个页面的路由,总的来说,就是路由只适合在单页面中使用,而weex是多页面应用,而且有自己的跨页面通信解决方案,所以他不要推荐我们使用。

那么这里我们按下Y选择使用vue-router,别问,问就是天生反骨

选择是否使用Eslint检查你的代码:

Eslint是一个对新手来说非常恶心的东西,因为这个东西会非常细致的帮我们做代码语法规范检查,这个就看个人选择了,作为新手来说建议是不要选,因为有一些非常没有必要的语法检查,咱们这里直接N掉就好了

选择Eslint预设:

 这里我们直接选择第三个,不添加任何的Eslint预设

设置单元测试:

 单元测试在我们进行代码运行前测试的时候还是非常有用的,这里我们选择Y

设置自动下载运行依赖:

 在我们创建完一个weex应用之后,第一次运行会先下载一些帮助运行的依赖,我们可以选择让他在我们创建完成之后自动下载,下面的选项是选择使用什么源,是使用npm源还是yarn源,这里我们选择npm源也就是第一个源

在我们经历了漫长的选来选去之后,我们就可以看到他正在创建并且正在预下载一些基本的依赖:

在这期间会蹦出很多的警告,这些我们都暂时不用管:

 

 在创建完成之后,我们会看到一些命令建议:

基本的意思就是当我们在不同的环境中的运行效果,我们之前说过,weex最重要的意义就是跨平台解决方案,所以这里我们就可以看到有多个不同的运行平台,我们直接选择最下面的两条命令:

 

按下回车,这个框架就开始正常的运行了:

 

片刻之后,浏览器就会自动的打开,并且会自动的在我们的8081端口上开启一个weex服务,我们就可以在浏览器看到这样的画面:

 这就是一个最基本的weex在移动端的显示效果,如果之前有接触过微信小程序开发的对这个界面应该不会陌生。至于官方推荐的这个应用我是没找到,好像说要去下载源码编译,太麻烦了,我就不用了,其实也无伤大雅,如果你用某信去扫这个二维码,显示出来的就是这个网页的源码

完结撒花~~~!一个基本的weex应用就创建完成了,下一章我们就开始介绍weex的开发有关的东西,以及weex框架的基本组成

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

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

相关文章

若依框架解读(微服务版)—— 3.验证码与登录

验证码 查看验证码的请求: 之前已经讲过http://localhost/dev-api/code会在前端重写为http://localhost:8080/code。 请求第一步会进入网关模块 网关相关知识:Gateway基于的WebFlux框架,与我们平时用的WebMVC是不太一样的。网关由Route&#…

PHP的Exception

# 简单解释 Exception是PHP的内置类,用来处理异常的基类 https://www.php.net/manual/zh/class.exception.php php class Exception implements Throwable { /** The error message */ protected $message; /** The error code */ protect…

MVC升级swagger No operations defined in spec!

不要嘲笑农民工种田怎么不香了,要反思为什么别人种田收入高。 以下是农民工即将转行挖野菜之前的种田心得。 1No operations defined in spec! 2Failed to load API definition. Failed to load API definition. 经过多次试验测试&#xff0…

光盘如何重装系统教程

​如果你想用光盘来重装自己的电脑系统,但是不知道怎么操作的话,下面让我们一起来看一下光盘重装系统的步骤吧。 工具/原料: 系统版本:win7 品牌型号:惠普 光盘重装系统: 1.首先我们需要先打开电脑上的光…

VUE 的生命周期

Vue 实例有一个完整的生命周期,也就是从创建之前→创建完成→挂载之前→挂载完成→更新渲染之前→渲染完成→销毁之前→销毁完成等一系列过程,我们称这是 Vue 的生命周期。通俗说就是 Vue 实例从创建到销毁的过程,就是生命周期。每一个组件或…

22.11.20补卡 javaSE多线程学习笔记

自用 并发编程 多个任务同时执行 并发原理: CPU分时间片交替执行, 宏观并行, 微观串行; 由OS调度 进程: OS中并发的一个任务 线程: 在一个进程中,并发的一个顺序执行流程 每当执行新的进程时, 之前的进程都会暂且暂停, 由于cpu的时间片非常短, 人感觉不出来 线程的三个要素: CP…

RemObjects SDK for Delphi

RemObjects SDK for Delphi RemObjects SDK for Delphi是一个高级远程处理框架,它允许您从局域网内或Internet上的客户端远程访问驻留在服务器上的对象。RemObjects SDK for Delphi将允许您构建客户端和服务器应用程序,使用高度优化的Smart Services实现…

Seata AT模式下的源码解析(三)

7. 网络请求 7.1 TransactionManager 事务管理器,在客户端主要用于发起事务请求、提交事务、回滚事务请求等,用于跟 TC 进行通信的类,其中获取当前接口的实现类是通过 TransactionManagerHolder 进行获取,然后通过 SPI 接口获取…

【没用的小知识又增加了--电机】

一些乱七八糟的笔记.. 怎么计算电流环带宽 https://www.csdn.net/tags/MtTaMgysMTgwMTQwLWJsb2cO0O0O.html 理解电机控制系统中的带宽问题 - 知乎 电机控制电路程序带宽和硬件带宽的关系,应该如何设计相关参数? - 知乎 怎么理解Clarke和park变换&am…

[附源码]java毕业设计西柚网购物系统

项目运行 环境配置: Jdk1.8 Tomcat7.0 Mysql HBuilderX(Webstorm也行) Eclispe(IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持)。 项目技术: SSM mybatis Maven Vue 等等组成,B/S模式 M…

论文阅读【5】Attention Is All You Need

1.概述 1.1 论文相关 题目:注意你所有需要的(Attention Is All You Need)发表时间:2017出版:NIPS原文地址:经典模型了,网上一搜就能搜索到代码: 1.2 动机 因为循环神经网络通常是…

Poison Ink: Robust and Invisible Backdoor Attack 论文笔记

1. 论文信息 论文名称Poison Ink: Robust and Invisible Backdoor Attack作者Jie Zhang(中国科学技术大学)会议/出版社IEEE Transactions on Image Processingpdf📄在线pdf 2. introduction 文章提出了一种新的攻击方式称为“Poison Ink”…

CRF条件随机场

文章目录定义转移概率 & 发射概率损失函数单条路径的求解viterbi解码贪婪算法维特比算法参考解读定义 CRF:condition random field 解决序列预测问题。比如TTS的前端分词,实体命名识别等。 转移概率 & 发射概率 发射分数:将输入预测…

PPT 最后一页写什么结束语既得体又能瞬间提升格调?

谢邀!我只分享一个现下最流行的方法,绝对让尾页逼格满满!罗永浩雷军都在用的「金句法」。 提到这份方法,你可能会觉得很陌生,但你一定见过这样的页面: 这样的页面还有很多,多是以一句话收尾&…

LeetCode刷题(python版)——Topic81. 搜索旋转排序数组 II

一、题设 已知存在一个按非降序排列的整数数组 nums &#xff0c;数组中的值不必互不相同。 在传递给函数之前&#xff0c;nums 在预先未知的某个下标 k&#xff08;0 < k < nums.length&#xff09;上进行了 旋转 &#xff0c;使数组变为 [nums[k], nums[k1], ..., nu…

简单网络管理协议SNMP

SNMP一、 网络管理基本概念网络管理主要构件管理站被管设备网络管理协议SNMP&#xff08;简单网络管理协议&#xff09;协议组成二、管理信息结构SMI功能被管对象的命名被管对象的数据类型编码方法三、管理信息库MIB定义要点四、SNMP基于UDP服务两种基本管理功能机制探询trap五…

期末复习 C语言再学习

作者&#xff1a;小萌新 专栏&#xff1a;期末复习 作者简介&#xff1a; 大二学生 希望能和大家一起进步 本篇博客介绍&#xff1a; 考试周临近 没时间学新知识了 回顾C语言知识 一. 常量和字符串 1. 常量的四种表示方式 字面常量 这个很简单 字面意义上的常量就是了 比如…

跳表和散列表

一、跳表 复杂度&#xff1a;O(logn)&#xff1b; 跳表的更新&#xff1a;插入数据时&#xff0c;可以选择将这个数据插入到部分索引中&#xff0c;可以选择一个随机函数&#xff0c;产生随机数K&#xff0c;边将索引添加到第一到第K级索引中。 Redis为何选择跳表来实现有序集…

冯·诺依曼体系概括总结

文章目录我们常见的计算机&#xff0c;如笔记本。我们不常见的计算机&#xff0c;如服务器&#xff0c;大部分都遵守冯诺依曼体系。 截至目前&#xff0c;我们所认识的计算机&#xff0c;都是由一个个的硬件组件组成 输入单元&#xff1a;包括键盘, 鼠标&#xff0c;扫描仪, …

Java笔记(JUnit、反射、注解)

一、JUnit单元测试 1. JUnit的介绍 JUnit是一个Java语言的单元测试工具。有了它我们在开发阶段就可以对自己编写的功能模块进行单元测试&#xff08;就是一块一块去测试&#xff09;&#xff0c;看看是否达到具体预期&#xff08;这样小Bug我们自己就能解决&#xff09;。 黑盒…