weex入门指南--华岭

摘要:
Weex Ali推出的热更新框架已在淘宝、天猫和闲鱼等多种应用程序内部应用。典型的电子商务应用程序非常适合用Weex构建。Weex已于6月开源。如果你的应用程序是应用程序类,而你的服务类是天气、电子商务和服务,那么恭喜你。如果你的应用程序是一个工具类,而你的管家类涉及调用更多的硬件,我建议你使用Weex,使用原始的开发更有价值。因此,我们选择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 推荐安装第一个

weex入门指南--华岭第1张

我把它安装在 C: oolkits odejs

  • 配置环境参数:

  NODE_HOME:%toolkit_home% odejs

  weex入门指南--华岭第2张

  NODE_PATH:%node_home% ode_modules

  weex入门指南--华岭第3张

  这里toolkit_home=C: oolkits

  打通路径以访问工具链

      weex入门指南--华岭第4张

  配置好重启机器打开命令窗口检查工作情况

   输入node -v 如果现实版本号则成功

  weex入门指南--华岭第5张

  • 安装weex工具链:

  npm install weex-toolkit -g

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

  nodejs ode_modules下面找到weex-toolkit这个包;

  注意:node_modules这个针对nodejs本身和基于nodejs开发项目都会存在,所以存在全局局部之分,不带-g参数则表示在当前项目的node_modules目录中添加模块包,这个后面会说到。

安装成功后我们输入在命令行weex如果看到如下提示则表示成功

weex入门指南--华岭第6张

再输入webpack,验证打包工具

 weex入门指南--华岭第7张

  • 项目建立:

1、新建一文件夹如weexdemo;

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

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

weex入门指南--华岭第8张

weexdemo

|-.gitignore 

|-index.html h5展示页面

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

|-package.json 包配置

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

|-README.md 打包脚本说明

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

weex入门指南--华岭第9张

发现多了node_modules表示安装成功

weex入门指南--华岭第10张

  • 运行demo

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

weex入门指南--华岭第11张

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

weex入门指南--华岭第12张

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

weex入门指南--华岭第13张

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

weex入门指南--华岭第14张

手机端运行?

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 去控制输出结果(这个文件控制输入文件和输出,以及如何处理等)

weex入门指南--华岭第15张

weex入门指南--华岭第16张

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

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

npm run serve

weex入门指南--华岭第17张

在浏览器输入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/

免责声明:文章转载自《weex入门指南--华岭》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇Nginx文件路径的定义活久见!Jmeter也能实现文件传输和发送邮件啦下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

苹果公司开发者账号注册流程详解

     这段时间在给朋友申请苹果账号,从个人开发者账号、团体账号到公司账号,申请了个遍。这里对申请流程做一下介绍,方便其他朋友,少走弯路,账号早日申请通过。     1.首先介绍下个人开发者账号、团体账号、公司账号之间的区别:   用途 限制 是否需要邓白氏码 费用(元) 申请地址 个人开发者账号 用于个人开发者上传和发布应用,...

小程序开发-小程序页面间传递数据的方式

在小程序开发中,我们小程序的不同页面间经常需要传递一些数据。针对不同的数据要求,有几种不同的传递数据方式。 1. 页面跳转通过url传递数据 在使用wx.navigateTo或者wx.redirectTo的时候,可以将部分数据放在url里面,在新页面onLoad的时候获取且初始化。 //pageA.js // Navigate wx.navigateTo...

CrossApp简介

简介 CrossApp简介     CrossApp是一款完全免费、开源、跨平台的移动app开发引擎。CrossApp以C++作为开发语言,图形渲染基于OpenGL ES 2.0,采用MVC框架模式。使用CrossApp开发的应用程序支持导出到各大主流移动平台,真正实现“一次编码,多处运行”的跨平台开发技术。     CrossApp主要由9miao.c...

Java web开发——文件的上传和下载

一、 功能性需求与非功能性需求 要求操作便利,一次选择多个文件和文件夹进行上传;支持PC端全平台操作系统,Windows,Linux,Mac 支持文件和文件夹的批量下载,断点续传。刷新页面后继续传输。关闭浏览器后保留进度信息。 支持文件夹批量上传下载,服务器端保留文件夹层级结构,服务器端文件夹层级结构与本地相同。 支持大文件批量上传(20G)和下载,同时需...

WINRAR广告和注册弹窗的解决办法

我的软件是直接在软件管理里面下载的,没有去官网下(因为官网我打不开),之后我发现每次解压缩的时候,都会跳出来一个广告,和一个注册界面(我是分两次解决他们的),我上百度找解决的办法,写过文本,删过编译代码,发现没用,还是有广告跳出来(可能是版本的不一样),之后我试着找不一样的方法,真给我找着了(这边再次感谢百度的强大)。 我解决注册弹窗的方法只通过这个网址(...

阿里巴巴技术质量新人手册2-修炼测试基本功

认识软件质量 软件产品质量属性 这一章会从软件质量的基本概念出发,以标准化(ISO/IEC25010)的软件定义,介绍软件产品质量模型和使用质量模型。里面的内容都可以在《GBT25000.10-2016系统与软件工程系统与软件质量要求和评价(SQuaRE)第10部分系统与软件质量模型》中找到详细解释,这里主要列出我们测试工作中常用且必须关注的质量特性以及实...