android weex开发流程,阿里Weex混合app开发工程搭建指南(android为例)
混合app开发顾名思义一个app既有原生app语法(包括ios和android)又有前端html+javascript+css语法。这种混合开发框架甚多,从最早的cordova一统天下的局面到现在最火的React Native,再到兴起的阿里Weex框架。说实话一开始有些概念没理清看Weex官网的教程配置有些懵,东一块西一块后来坑碰的多了,才发现官网的文档确实乱,有些重要的地方没有展开讲,希望后面会更新上。我觉得对于第一次接触Weex的朋友来说可以先用一种方式把工程构建起来,再配合官网资料和其他社区来扩展知识。
Weex官网介绍的两种方式
1、集成Weex到已有的android应用。
对应的场景就是你现在有一个开发中的android app了,想用上Weex。这个可以直接参照官网的教程来,没啥问题。
2、新建Weex项目,由Weex项目构建新的android应用。
对应的场景就是你现在啥都没有,要从头开始做一个Hybrid混合app应用。可以按照下面这个步骤来搭建工程,直至运行起来。
1、肯定是安装NPM和Node.js了,具体这个可以参考网上安装教程,只要最后用node -v命令能正确查看到node版本就说明node环境安装好了可以进行下一步。
image.png
2、全局安装week-toolkits脚手架。随便打开一个CMD命令行窗口输入命令npm install weex-toolkit -g来全局安装week-toolkits脚手架
3、用week-toolkits脚手架创建Weex工程。安装完week-toolkits脚手架之后命令行就能用weex相关命令了,首先找个地方创建一个空文件夹(比如我的是D:\WEEXProject\weexDemo),在此文件夹内打开CMD命令行窗口输入weex create weexdemo,创建过程中会有一系列选项(比如给工程取个名字、是否要引入vue-router、是否要ESLint这些,看情况选择),创建完后可以看到:
image.png
接下去执行一下npm install安装一下依赖,生成node_modules库
4、运行起来。本来到此就能把Weex工程跑起来了,但是还有注意点,npm的版本要升到5以上,所以你先用命令npm -v检查一下npm的版本(新安装node的朋友基本是最新的,一直就在从事前端开发的朋友最好还是检查一下)然后通过npm i npm@latest -g命令把npm更新到最新版。都做完了就可以USB连上安卓手机尝试用weex run android命令把这个Weex工程跑在手机上了。如果期间遇到报错Command failed: call gradlew.bat assembleDebug时先检查自己的jdk版本,jdk至少要升到1.8,安装完jdk1.8后调整环境变量JAVA_HOME,重启后再跑weex run android命令就ok了。成功后是这样的:
weex run android成功.png这里我建议暂时不看官网的各种调试手段,先把这个run android跑通吧。
5、用上android原生API。到现在为止看到的都是前端的东西,混合开发怎么能少了原生的代码呢。这时就需要创建android工程了,Weex提供了创建的方式:用命令weex platform add android添加android工程,成功后,你就能在platforms文件夹下看到android工程了,
image.png
此时,你要用android studio来打开这个android工程(默认生成的是as工程,没有eclipse的)。看到代码后你会发现官网集成Weex到已有应用教程中需要手动添加依赖的工作,这里都已经帮你做好了,对于我们第一次搭建的小伙伴来说,先熟悉一下后面再慢慢学习原理。对于开发来说Weex前端Vue部分和原生android是一种Module机制,如官网就封装了一些Module给前端调用:
image.png
一般来说官网提供的都是基础的Module,我们会根据自己的需求去创建自己的Module,这里打开android代码先注意到有两个文件:WXEventModule和WXApplication
image.png
WXEventModule类继承自WXModule,你可以在这个类里定义module,供Vue前端调用。如我这里写一个printLog方法去实现一个调用安卓Toast的功能:
image.png
然后打开WXApplication看一下,这里已经为我们默认去注册了Module,名称为event:
image.png
最后在Vue页面require对应Module来使用即可,比如我这里直接在index.vue里写上:
image.png
代码保存后执行weex run android在手机上跑效果如下:
QQ图片20180802135436.png
这样就表示我们一个Weex混合APP就调通了。官网介绍的一些调试手段,打包发布的流程后面再慢慢学习折腾吧。
android weex开发流程,阿里Weex混合app开发工程搭建指南(android为例)相关推荐
- 开发时如何使用混合App开发?
混合APP开发(原生+H5) 混合开发(Hybrid App开发),是指在开发一款App产品的时候,为了提高效率.节省成本而利用原生与H5的开发技术的混合应用.通俗点来说,这就是网页的模式,通常由&q ...
- android开发 视图联动_Flutter混合APP开发
混合开发简介 使用Flutter从零开始开发App是一件轻松惬意的事情,但对于某些成熟的产品而言,完全替代弃用App的历史沉淀,全面转向Flutter是不现实的.因此使用Flutter去统一Andro ...
- 混合app开发学习笔记
什么是混合移动App开发[重点] 苹果上的软件是如何开发出来的:使用的是 OC.或者使用Swift这门语言 安卓平台上的软件又是如何开发出来的:使用安卓相关的语言开发的,Java,安卓的控件进行开发 ...
- 开发缺点_成都嗨创科技:原生APP开发与混合APP开发的优缺点对比
原生APP开发 1.开发语言: 安卓APP:Java开发语言: 苹果APP:Objective-C 或Swift 开发语言: 均为官方规定开发语言: 2.优点 1)使用体验较好,能够实现较为复杂的交互 ...
- 混合App开发,HBuilder开发移动App
使用HBuilder开发混合App: Hbuilder:是一个在线打包工具,不需要在本地配置开发环境:直接将做好的网站,通过一些简单的操作,就能在线打包为一个App: 混合APP开发常见技术:Html ...
- html5混合app原理,HTML5混合App开发
内容简介 在竞争激烈的移动互联网环境下,HTML5技术一直备受关注.HTML5混合App开发与原生App开发模式之间也争议不断.相对于原生App来说,HTML5混合App开发的成本更低.周期更短,而且 ...
- “小程序化”,一种创新的混合App开发模式
计算机系统集成行业作为当今比较成熟的服务业,在国内已有三十多年的发展历史. 从80年代最初的增值代理阶段发展到现如今的多平台应用和服务创新阶段,发展较为迅速. 系统集成发展至今,虽然已经取得了很大的进 ...
- Vue + quasar-framework进行Vue混合app开发 ─ 模拟器选择及使用(四)
这里推荐2钟比较常用的模拟器,Genymotion和Android Studio自带的Android Virtual Device,至于喜欢用哪个就用哪个. Genymotion 需要准备下载的软件 ...
- 原生开发什么意思_成都APP开发:原生APP开发与Web APP开发有什么区别呢?
智能手机上的APP应用软件对于人们来说已经成为日常工作生活当中必不可少的工具,无论是工作生活中的聊天交流,购物,饮食,出行,娱乐都会有相应的APP软件.目前常见的APP软件开发模式有两种,一种是原生A ...
- 在线教育培训APP开发,在线教育培训APP开发介绍
在线教育培训APP开发,在线教育培训APP开发介绍 介绍 在线教育一直全是呈持续上升发展趋向,尤其是2020年的肺炎疫情缘故,促使在线教育的销售市场更为宽阔,在线教育app不但能为用户提供线上一对一辅 ...
最新文章
- [TensorRT] ERROR: Network must have at least one output
- XMLHttpRequest
- 进入Linux救援(rescue)模式的四大法门
- 视音频编解码学习工程:FLV封装格式分析器
- 【Java数据结构与算法】第十章 哈希表和二叉树
- 解决postman环境切换,自动获取api签名时间及签名
- ueditor滚动条
- 手机代理上网_ip地址是怎么来的?手机电脑怎么获得IP地址?
- 图案怎么导入ps?Photoshop图案导入教程
- qpsk调制matlab仿真,QPSK调制解调仿真
- windows 下关闭135 139 445等危险端口
- Java学习-Java系统介绍
- java 枚举实例化_Java枚举
- 冻结表格模板html,Excel冻结单元格(锁定单元格)用选项和快捷键,含冻结一个、多个和有公式的单元格及冻结表格格式不能输入...
- 全桥逆变电路MOS管的关断尖峰怎么解决
- JVM--插入式注解处理器
- 镜像站:Github, Wiki, Google
- 华三交换机如何进入配置_H3C交换机恢复出厂和各种基本配置方法
- Pytorch 学习率衰减 之 余弦退火与余弦warmup 自定义学习率衰减scheduler
- 软件体系结构--《Software.architecture.perspectives.on.an.emerging.discipline》