WEEX入门指南

背景

由于公司项目需要,需求变化频繁,计划总改不上变化,由于app更新版本周期长,不能很好应对这种变化,正在此前提下热修复和热更新技术也有了发展的空间,不管热修复还是热更新,都是对app内容或者逻辑的变化作出像web网页更新类似的体验。weex阿里推出的热更新框架,已再内部应用在多款app上如淘宝,天猫和闲鱼等,典型的电商型app非常适合用weex来构造,weex已在6月份开放开源,假如你的app是应用类,服务类如天气、电商和服务类,恭喜你非常适合用weex来构建,假如你的app是工具类,管家类涉及调用硬件层面多点,那我建议,还是用原生来开发更具价值。为此我们选用weex了框架来构造。

开始

开发环境配置:

  • 下载node.js:https://nodejs.org/en/  weex基于后端服务node.js框架构建,所以先安装node.js 推荐安装第一个,我把它安装在 C:\toolkits\nodejs

  • 配置环境参数:

  NODE_HOME:%toolkit_home%\nodejs

 NODE_PATH:%node_home%\node_modules

打通路径以访问工具链:toolkit_home=C:\toolkits

配置好重启机器打开命令窗口检查工作情况,输入node -v 如果现实版本号则成功

安装weex工具链

  npm是nodejs一个非常流行的管理工具,可以安装基于nodejs开发的任何模块包,-g表示把weex-toolkit安装到全局模块中,成功后我们可以在nodejs\node_modules下面找到weex-toolkit这个包;命令:npm install weex-toolkit -g

  注意:node_modules这个针对nodejs本身和基于nodejs开发项目都会存在,所以存在全局局部之分,不带-g参数则表示在当前项目的node_modules目录中添加模块包,这个后面会说到。安装成功后我们输入在命令行weex如果看到如下提示则表示成功

再输入webpack,验证打包工具

项目建立

1、新建一文件夹如weexdemo;

2、在文件夹下执行weex init,参数全部默认即可;

3、成功后文件夹下产生了一些文件:

weexdemo

|-.gitignore

|-index.html h5展示页面

|-src/main.we 默认入口we源文件

|-package.json 包配置

|-webpack.config.js webpack打包配置文件

|-README.md 打包脚本说明

4、执行npm install 安装项目依赖包

发现多了node_modules表示安装成功

4、运行demo

执行自带的we文件 weex src/main.we 根据提示发现weex开了http服务和websocket服务,这里的websocket服务主要是起了热刷新作用,修改页面后页面自动刷新

此时浏览器便成功运行weex默认main页面

我们用编辑器修改一下main.we源文件

保存后我们发现网页端的内容就自动刷新了,这样一个简单的demo就运行成功!

手机端运行

1、我们先下载weex自带的playground app

http://alibaba.github.io/weex/download.html

2、编译js build文件,我们查看README.md,

发现:npm run dev这个命令,意思是监听文件改动编译生成js文件,如我们改动src/main.we后,自动编译到dist/main.js

它主要关联package.json文件下面的scripts段:以及默认webpack.config.js 去控制输出结果(这个文件控制输入文件和输出,以及如何处理等)

成功后发现dist目录和main.js文件生成

然后我们可以根据readme提示开一个http服务来支持js bundle文件

npm run serve

在浏览器输入http://localhost:8080/,我们同样得到了web端的渲染结果,但是我们需要手机展示

此时我们需要2个条件

1、服务端必须给定ip地址;

2、手机端必须根据服务端ip能访问服务端;

假设你的开发机的ip是192.168.2.102;

我们改一下地址

http://192.168.2.102:8080/dist/main.js 便可以访问 js bundle文件内容;

我们用二维码工具转换一下得到二维码,再用playground app右上的扫一扫便能访问到此页面内容;

这样便成功运行在手机端,当内容改变时候我们按一下右上角的刷新按钮就能看到变化;

需要注意:在安卓或者苹果看到的不是一个web的网页,而是经过js转换的native的原生界面;

可以看到,weex界面布局和业务逻辑转换为JS文件,由客户端去解析,从而实现了app的内容热更新;

我们对weex有了初步的认识,尽管现在阶段还存在一些问题,相信在开源力量下,该项目会越做越好;

参考资料:

node.js:https://nodejs.org/en/

weex主页:http://alibaba.github.io/weex/

有问题欢迎留言,写信([email protected])或者关注我的微信公众号:

时间: 2024-10-11 20:58:08

WEEX入门指南的相关文章

weex入门指南--华岭

背景: 由于公司项目需要,需求变化频繁,计划总改不上变化,由于app更新版本周期长,不能很好应对这种变化,正在此前提下热修复和热更新技术也有了发展的空间,不管热修复还是热更新,都是对app内容或者逻辑的变化作出像web网页更新类似的体验. weex阿里推出的热更新框架,已再内部应用在多款app上如淘宝,天猫和闲鱼等,典型的电商型app非常适合用weex来构造,weex已在6月份开放开源, 假如你的app是应用类,服务类如天气.电商和服务类,恭喜你非常适合用weex来构建,假如你的app是工具类,

Weex入门与进阶指南

原文地址:https://yq.aliyun.com/articles/57554 前言 相比较于React Native的"Learn once, write anywhere",Weex的口号是"Write once, run everywhere".考虑到React Native比较任性的向下兼容性,我们也引入了Weex做一番了解. 本文主要分为以下几个部分: 构建Hello World程序: 集成到现有的iOS工程中: 使用Weex的高级特性: 如何为Wee

Quartz.NET简介及入门指南

Quartz.NET简介 Quartz.NET是一个功能完备的开源调度系统,从最小的应用到大规模的企业系统皆可适用. Quartz.NET是一个纯净的用C#语言编写的.NET类库,是对非常流行的JAVA开源调度框架 Quartz 的移植. 入门指南 本入门指南包括以下内容: 下载 Quartz.NET 安装 Quartz.NET 根据你的特定项目配置 Quartz 启动一个样例程序 下载和安装 你可以下载 zip 文件或使用 Nuget 程序包.Nuget 程序包只包含 Quartz.NET 运

Java程序员的Golang入门指南(上)

Java程序员的Golang入门指南 1.序言 Golang作为一门出身名门望族的编程语言新星,像豆瓣的Redis平台Codis.类Evernote的云笔记leanote等. 1.1 为什么要学习 如果有人说X语言比Y语言好,两方的支持者经常会激烈地争吵.如果你是某种语言老手,你就是那门语言的"传道者",下意识地会保护它.无论承认与否,你都已被困在一个隧道里,你看到的完全是局限的.<肖申克的救赎>对此有很好的注脚: [Red] These walls are funny.

【翻译Autofac的帮助文档】1.入门指南

[写在前面]尝试做完一件工作之外自我觉得有意义的一件事,那就从翻译Autofac的帮助文档吧. 入门指南 将Autofac集成你的应用程序的步骤通常很简单,一般是: 时刻以IOC(控制反转)的思想来规划你的应用程序 在你的Porject中添加Autofac引用 按照如下步骤设计应用程序的启动环节 创建一个ContainerBuilder 向ContainerBuilder注册组件 通过ContainerBuilder的Build()方法获得Container(后续需用到) 在应用程序运行环节时,

Markdown——入门指南

导语: Markdown 是一种轻量级的「标记语言」,它的优点很多,目前也被越来越多的写作爱好者,撰稿者广泛使用.看到这里请不要被「标记」.「语言」所迷惑,Markdown 的语法十分简单.常用的标记符号也不超过十个,这种相对于更为复杂的 HTML 标记语言来说,Markdown 可谓是十分轻量的,学习成本也不需要太多,且一旦熟悉这种语法规则,会有一劳永逸的效果. Ulysses for Mac 一,认识 Markdown 在刚才的导语里提到,Markdown 是一种用来写作的轻量级「标记语言」

Win32编程API 基础篇 -- 1.入门指南 根据英文教程翻译

入门指南 本教程是关于什么的 本教程的目的是向你介绍使用win32 API编写程序的基础知识(和通用的写法).使用的语言是C,但大多数C++编译器也能成功编译,事实上,教程中的绝大多数内容都适用于任何可以连接API的语言,包括Java.Assembly和Visual Basic:我不会向你呈现任何跟这些语言相关的代码,这需要你在本教程的指导下自己去完成,有一些人在本API的基础上使用其他语言进行编程取得了相当的成功. 本教程不会教你C语言,也不会告诉你怎样去运行你特定的编译器(Borland C

[转载]TFS入门指南

[原文发表地址] Tutorial: Getting Started with TFS in VS2010 [原文发表时间] Wednesday, October 21, 2009 1:00 PM 本月初,我们发布了TFS新基础配置.该配置为建立支持源码管理,工作项和生成(builds)的TFS版本提供了便利. 这是一个好机会将你在VSS(Visual Source Safe)上的资源迁移到TFS,并且还可以选用一些新的特性.现在VS2010 Beta2的正式版已经发布了,下面是该系统的入门指南

编程入门指南

前言 如今编程成为了一个越来越重要的「技能」:作为设计师,懂一些编程可能会帮你更好地理解自己的工作内容:作为创业者,技术创始人的身份则会让你的很多工作显得更容易.而作为刚想入门的新手,面对眼前海量的信息,或许根本不知道从哪里开始:入门轻松度过初级材料的学习后,发现学习越来越困难,陡峭的学习曲线又让你望而却步:你知道如何在页面上打印输出一些文本行,但是你不知道何时该进行一个真正的有用的项目:你不清楚自己还有哪些不知道的东西,你甚至搞不清下一步该学什么. 这篇文章的内容对此不仅会有一些方向性的建议,