搞了几个月的Vuejs,也是时候开始搞搞基于Vuejs语法的Weex App了。

这里做个广告,最近用vuejs开发了一个小系统(前后端分离),架构有参考Oracle EBS,功能/职责随便配置。有兴趣的兄台可以了解一下:https://github.com/samt007/jebms-ui

来正题,什么是Weex App?
这里有简介:

Weex App
阿里巴巴开发团队在RN的成功案例上,重新设计出的一套开发模式,站在了巨人肩膀上并有淘宝团队项目做养料,广受关注,2016年4月正式开源,并在v2.0版本官方支持Vue.js,与RN分庭抗礼。

优点:单页开发模式效率极高,热更新发包体积小,并且跨平台性更强
缺点:刚刚起步,文档欠缺;社区没有RN活跃,功能尚不健全,暂不适合完全使用Weex开发App
举个栗子:淘宝、天猫、阿里云、优酷、闲鱼、饿了么等

推荐看的文章:https://segmentfault.com/a/1190000011154120
Weex淘宝官方主页:https://weex-project.io/cn/

好了,现在开始搭建开发环境吧!

这个是用笔记本新安装一个环境(这个环境基本是空白的,只是有安装nodejs而已),系统版本:Win10。大概步骤:

  1. 安装Java开发环境,Android Studio工具等。
    首先安装好java的开发环境JDK。我用1.8版本,接着必须要全部配置好环境变量。反正最后用cmd输入java –version和javac能识别就OK。有一点要说明的,修改了系统的环境变量,要生效的一个简单办法就是重启电脑。。。当然也有别的办法,但是貌似都比较折腾,还是重启简单直接!
    然后就是下载Android Studio工具。这个碰到一个小插曲,Win10直接安装百度搜索的1.8G的版本会报错(报错是安装软件的完整性检测有问题)。后来换一个版本下载就OK,建议在这里下载:http://www.android-studio.org/
    上面的安装教程可以参考这个网址:https://www.cnblogs.com/jliangqiu2016/p/5656676.html
    安装AS工具时间是最长的,确实麻烦,而且要下载的东西也很多,特别是Android SDK。必须要注意磁盘空间要足够啊。
    另外,安装好之后,还要配置一下ANDROID_HOME等的环境变量哦。

  2. 接着就是安装Weex。
    基本按照官网的步骤安装就行。因为我之前安装了nodejs,这里只需要升级一下npm版本就OK啦。命令:npm i npm@latest -g
    接着就是安装weex toolkit。安装要注意:要先执行安装命令,再执行更新的命令(官网都有对应命令)。
    执行更新命令的时候碰到一个问题:没python运行环境。所以,又马不停蹄地下载了一个python(安装之后还要配置好系统环境变量path哦。。。)
    但是更新weex toolkit还是报错,网上百度了一下,原来我还是少安装了这个东西:Windows Studio。所以,又安装了一个Windows Studio 2013版本。(下面所说的碰到的主要问题也有提及到)。其实我有记得公司电脑是有安装的,记忆比较深刻,当时搞的React Native运行环境,估计也是一样的原因。

  3. 碰到的主要问题:
    首先,要用这个办法开发手机app(就是js驱动原生界面),如果是Windows环境,必须得安装python,而安装python必须得安装Windows Studio,我安装是2013版本的,否则例如升级weex update weex-devtool@latest,会报错。

电脑环境变量截图:
这里写图片描述
这里写图片描述

weex的项目,直接用Android Studio IDE打开:
Weex代码

运行效果

没问题的话,随便在AS工具里面打包apk,就可以安装使用啦!

安装总结:有问题基本的解决思路是,根据错误信息问度娘,一般都可以有解决办法。你要相信,一般来说,你不会是第一个碰到该问题的人!

Logo

开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!

更多推荐