热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

开发笔记:Weex探索系列初识和环境搭建

本文由编程笔记#小编为大家整理,主要介绍了Weex探索系列初识和环境搭建相关的知识,希望对你有一定的参考价值。
本文由编程笔记#小编为大家整理,主要介绍了Weex 探索系列初识和环境搭建相关的知识,希望对你有一定的参考价值。







嗨,亲们,明早我就要乘坐灰机出国旅游啦!忙忙碌碌地写了一年的代码和文章,终于能够在2016年收尾之际放松一下。人生第一次出国,别说还有(显)点(得)小(没)激(出)动(息)呢!不管怎样,我要开始吃喝玩乐的开挂生活啦,尽管只有几天而已!




言归正传,出国这几天就不能继续写文章,给大家推送干货啦。真爱粉们可千万不要走开哈,一定要等我回来继续瞎扯蛋,哦,不,是聊技术!临行前几天,给大家准备了两篇有关「 Weex」系列的文章,聊聊跨平台开发,有这方面兴趣的朋友不妨看看哈。






Weex 探索系列(一)初识和环境搭建


Weex 是阿里巴巴 于今年6月份开源的一种跨平台手机应用开发解决方案,只需要一次开发,即可部署在手机 html5、androidios 三大平台上。可以采取部分或者全部集成的方式嵌入到原生 Android 和 iOS 应用当中,并且达到 Native App 的体验效果。

Weex 可谓是站在 RN(React Native)的肩膀上借鉴了很多跨平台应用的开发经验,但却又与 RN 不同,在各自 DSL(领域特定语言)上,相比基于 框架的 RN ,基于 框架的 Weex ,在编程语言上更接近于常见的 Web 开发方式。更多细节区别,可参考「大头鬼」总结的一篇文章:。


环境搭建

Weex 是使用 Node.js 开发构建的,所以需要我们的电脑上安装有 。然后在终端上运行如下命令,即可安装 :

npm install -g weex-toolkit

安装结束后,可使用 weex --verison 检验安装结果并查看 weex 版本。也可以使用 weex --help 查看 weex 命令的所有用法。


初次体验

新建一个文本文件(位置随意),命名为 hello.we (.we 是 weex 源代码的文件格式),并将如下内容复制到该文件中:

Weex 探索系列(一)初识和环境搭建

打开终端工具,cd 到 hello.we 所在的目录下,执行如下命令,进行源码编译:

weex hello.we

编译结束后,电脑上的默认浏览器会打开一个窗口展示运行结果,如图:

Weex 探索系列(一)初识和环境搭建

同时在当前目录下生成一个 weex_temp 文件夹,里面是 H5 显示所需要的一些源文件。其中,与 hello.we 文件对应的有一个 hello.js,这种 与 .we 文件一一对应的 .js 的文件也是 Android 和 iOS 工程集成 Weex 时所要用到的文件,我们后续写到 Android 集成时再讲具体怎么用。

除了 PC 浏览器,当然还可以在手机端实现实时预览。前提是需要手机下载安装 ,并与 PC 保持在同一个局域网内。退出上面的服务( Mac 下使用 Ctrl + C 快捷键组合),运行命令:

weex hello.we --qr

终端中会显示一个二维码,打开手机上的 「 Playground 」应用,点击右上角的扫描按钮,扫描这个二维码,即可展示 hello.we 的运行结果,如图:

Weex 探索系列(一)初识和环境搭建

此时在 hello.we 文件中的任何修改,保存之后都会立即反映在手机端的显示上,无需重新编译。


语法高亮

由于 weex 源代码的文件格式为 .we 格式,默认在文本编辑器中不支持语法高亮,代码看起来很不舒服。不过可以使用 vue.js 的语法高亮来支持 .we 文件的编辑,分别参考 、、。这里额外介绍 Sublime 的另外一种处理方式。

第一步,制作 Weex 语法高亮脚本:打开 Sublime Text,依次点击 Tools -> Developer -> New Syntax,新建一个语法文件,打开 gist 链接 ,复制内容到刚才新建的语法文件中,并保存,文件名和扩展名为 Plain we.sublime-syntax

第二步,开启 weex 语法高亮支持:依次点击 View -> Syntax,选中 We Component 即可。支持 Weex 文件语法高亮的 Sublime Text 编辑器截图如下,整个看上去清爽多了:

Weex 探索系列(一)初识和环境搭建


学习资源

Weex 毕竟开源不久,除了公开的内测,目前还没有大面积推广开来,不过已经在阿里系诸如手淘、天猫、虾米音乐等应用中逐步使用。由于被外界误解为阿里的又一个KPI项目(后续不再维护),相对 RN,外界使用相对较少。不过,随着时间的推移、阿里技术团队的完善和社会技术圈儿的认可,Weex 将不失为 RN 和 Ionic 之外 跨平台应用的又一种出色的解决方案。

当然,现阶段除了官方文档,网上相关资料零零碎碎,可供系统性参考的系列文章不是很多,学习起来可能会经历各种各样的困难。这里整理一些可供学习的资源,罗列如下:




  • Weex Doc &







Weex 探索系列(一)初识和环境搭建






热门推文
















Weex 探索系列(一)初识和环境搭建




阅读原文 See【YiFeng ' Zone】


推荐阅读
  • 本文介绍了如何使用php限制数据库插入的条数并显示每次插入数据库之间的数据数目,以及避免重复提交的方法。同时还介绍了如何限制某一个数据库用户的并发连接数,以及设置数据库的连接数和连接超时时间的方法。最后提供了一些关于浏览器在线用户数和数据库连接数量比例的参考值。 ... [详细]
  • 本文介绍了在Windows环境下如何配置php+apache环境,包括下载php7和apache2.4、安装vc2015运行时环境、启动php7和apache2.4等步骤。希望对需要搭建php7环境的读者有一定的参考价值。摘要长度为169字。 ... [详细]
  • React 小白初入门
    推荐学习:React官方文档:https:react.docschina.orgReact菜鸟教程:https:www.runoob.c ... [详细]
  • 搭建Windows Server 2012 R2 IIS8.5+PHP(FastCGI)+MySQL环境的详细步骤
    本文详细介绍了搭建Windows Server 2012 R2 IIS8.5+PHP(FastCGI)+MySQL环境的步骤,包括环境说明、相关软件下载的地址以及所需的插件下载地址。 ... [详细]
  • Java序列化对象传给PHP的方法及原理解析
    本文介绍了Java序列化对象传给PHP的方法及原理,包括Java对象传递的方式、序列化的方式、PHP中的序列化用法介绍、Java是否能反序列化PHP的数据、Java序列化的原理以及解决Java序列化中的问题。同时还解释了序列化的概念和作用,以及代码执行序列化所需要的权限。最后指出,序列化会将对象实例的所有字段都进行序列化,使得数据能够被表示为实例的序列化数据,但只有能够解释该格式的代码才能够确定数据的内容。 ... [详细]
  • 本文详细介绍了MysqlDump和mysqldump进行全库备份的相关知识,包括备份命令的使用方法、my.cnf配置文件的设置、binlog日志的位置指定、增量恢复的方式以及适用于innodb引擎和myisam引擎的备份方法。对于需要进行数据库备份的用户来说,本文提供了一些有价值的参考内容。 ... [详细]
  • 本文介绍了Web学习历程记录中关于Tomcat的基本概念和配置。首先解释了Web静态Web资源和动态Web资源的概念,以及C/S架构和B/S架构的区别。然后介绍了常见的Web服务器,包括Weblogic、WebSphere和Tomcat。接着详细讲解了Tomcat的虚拟主机、web应用和虚拟路径映射的概念和配置过程。最后简要介绍了http协议的作用。本文内容详实,适合初学者了解Tomcat的基础知识。 ... [详细]
  • 本文介绍了在mac环境下使用nginx配置nodejs代理服务器的步骤,包括安装nginx、创建目录和文件、配置代理的域名和日志记录等。 ... [详细]
  • 本文介绍了如何使用C#制作Java+Mysql+Tomcat环境安装程序,实现一键式安装。通过将JDK、Mysql、Tomcat三者制作成一个安装包,解决了客户在安装软件时的复杂配置和繁琐问题,便于管理软件版本和系统集成。具体步骤包括配置JDK环境变量和安装Mysql服务,其中使用了MySQL Server 5.5社区版和my.ini文件。安装方法为通过命令行将目录转到mysql的bin目录下,执行mysqld --install MySQL5命令。 ... [详细]
  • 本文介绍了RxJava在Android开发中的广泛应用以及其在事件总线(Event Bus)实现中的使用方法。RxJava是一种基于观察者模式的异步java库,可以提高开发效率、降低维护成本。通过RxJava,开发者可以实现事件的异步处理和链式操作。对于已经具备RxJava基础的开发者来说,本文将详细介绍如何利用RxJava实现事件总线,并提供了使用建议。 ... [详细]
  • 从零基础到精通的前台学习路线
    随着互联网的发展,前台开发工程师成为市场上非常抢手的人才。本文介绍了从零基础到精通前台开发的学习路线,包括学习HTML、CSS、JavaScript等基础知识和常用工具的使用。通过循序渐进的学习,可以掌握前台开发的基本技能,并有能力找到一份月薪8000以上的工作。 ... [详细]
  • 程序员_阿里Antd藏圣诞节彩蛋 程序员被离职
    篇首语:本文由编程笔记#小编为大家整理,主要介绍了阿里Antd藏圣诞节彩蛋程序员被离职相关的知识,希望对你有一定的参考价值。 ... [详细]
  • ReactJSUIAnt设计空组件原文:https://w ... [详细]
  • 这篇文章给大家讲解如何利用dhtmlxGantt在服务器端集成数据。脚本数据保存如果您已初始化dataProcessor,则用户或以编程方式所做的任何更改都将自动 ... [详细]
  • JavaScript和Python是用于构建各种应用程序的两种有影响力的编程语言。尽管JavaScript多年来一直是占主导地位的编程语言,但Python的迅猛发展有 ... [详细]
author-avatar
牵绊2502897683
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有