Vue简单示例——weex跨平台解决方案
简单介绍:
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框架的基本组成
Vue简单示例——weex跨平台解决方案相关推荐
- Vue简单示例——weex
weex的生命周期: 因为我们的Weex和Vue是绑定在一起的,所以我们讨论关于生命周期时,说的实际上是在Weex中可以使用的Vuex的生命周期,也就是Weex对于Vue生命周期的支持,好消息,Wee ...
- TensorFlow Lite:TensorFlow在移动设备与嵌入式设备上的轻量级跨平台解决方案 | Google 开发者大会 2018...
Google 开发者大会 (Google Developer Days,简称 GDD) 是展示 Google 最新开发者产品和平台的全球盛会,旨在帮助你快速开发优质应用,发展和留住活跃用户群,充分利用 ...
- flutter 真机无法调试 sdk报错_Flutter - 不一样的跨平台解决方案
本文主要介绍Flutter相关的东西,包括Fuchsia.Dart.Flutter特性.安装以及整体架构等内容. 简介 Flutter作为谷歌推出的跨平台开发框架,一经推出便吸引了不少注意.关于Flu ...
- python 之CORS,VUE+rest_framework示例
一.跨域 浏览器的同源策略 ----对ajax请求进行阻拦 ----对href属性读不阻拦 xhr=new XML ...
- vue引用electron_前端跨平台桌面开发技术:Electron 快速起步
嗨,我是勾勾.今天要介绍的是 Electron 跨平台桌面应用开发. Electron(https://electronjs.org/)是一个运行平台,它能够让我们通过 HTML + CSS + Ja ...
- 客户端软件GUI开发技术漫谈:原生与跨平台解决方案分析
原生开发应用开发 Microsoft阵营的 Winform WinForm是·Net开发平台中对Windows Form的一种称谓. 如果你想深入的美化UI,需要耗费很大的力气,对于目前主流的CSS样 ...
- Flutter 不一样的跨平台解决方案
本文主要介绍Flutter相关的东西,包括Fuchsia.Dart.Flutter特性.安装以及整体架构等内容. 1. 简介 Flutter作为谷歌最近推出的跨平台开发框架,一经推出便吸引了不少注意. ...
- 第一章 常见跨平台解决方案及Flutter架构
近些年来,不断的有前端跨平台方案涌现出来,比如基于WebView的Cordova,还有渲染成原生控件的Reactive.Weex等,那么,这些跨平台方案有什么通用的实现思路呢,而Flutter的设计思 ...
- php过滤数据库就报错,php过滤掉emoji等无法存入MySQL数据库的字符简单示例
这篇文章主要为大家详细介绍了php过滤掉emoji等无法存入MySQL数据库的字符简单示例,具有一定的参考价值,可以用来参考一下. 对php过滤掉emoji等无法存入MySQL数据库的字符简单示例感兴 ...
最新文章
- 2017浅谈面试(一)
- pycharm 使用教程
- [云炬创业基础笔记]第九章企业的法律形态测试3
- ES6学习笔记(二十二)ArrayBuffer
- 前端学习(2785):实现导航的基本结构
- main的方法是Java_Java中的main()方法
- 解决设置了display:none的元素,会先展示再隐藏
- Python+django网页设计入门(18):自定义模板过滤器
- 批量修改 Netapp NFS Export
- IEEE最新声明:华为员工不能参与审稿,但是还能继续提供赞助
- Zookeeper Client简介
- difference between match and exec
- 人人都是 DBA(II)SQL Server 元数据 (转)
- C语言两个数比较大小和三个数比较大小,代码
- 软件测试学习资料汇总
- 《SAP从入门到精通》——1.3 SAP R/3系统工作原理
- CREO图文教程:三维设计案例之水龙头的螺旋弹簧设计图文教程之详细攻略
- 12张图读懂模电、数电必备的电路基础知识
- Altium Designer禁止联网操作说明
- Use Goldengate Initial Data Load
热门文章
- LibGDX游戏引擎-10-游戏地图(TiledMap)
- LeNet-1998-Yann LeCun
- JointJs 绘制有数据流动效果的link连线
- Educational Codeforces Round 100 (Rated for Div. 2)补题记录
- WebServie学习
- 用python将网上的文章转存为PDF文档,保存电脑上慢慢看
- SU模型叠加实景三维模型 用它就可以实现了
- 农村土地确权之系列文档 —— 新分户分开确权申请书
- 面试必备!TCP协议经典十五连问!
- 2.ffmpeg安装(Ubuntu20.04 )