Weex从入门到放弃
Weex开发文档
概述
概述
WEEX的出现让我们可以使用Vue来进行移动端原生应用开发,是前端小伙伴们必备技能。 Android也可以学习,增加我们的技术栈。
与 Web App、Html5 App 或 hybrid App 不同,您可以使用 Weex 构建一个真正的原生应用(我都不明白为什么一定强调“原生”)。更贴心的是你的代码只需使用 HTML、CSS、JavaScript 可以构建原生应用,上手非常简单。但实际上,应用的底层是 Objective-C 或 Java, 同时Weex 提供很多 native 组件或模块供开发人员使用。也就是说,你会前端知识,想作真正的app,那你学习Weex就对了。
哪些公司在用
阿里系的公司基本都在用,包括天猫、淘宝、钉钉等。现在尤大神担当的WEEX的顾问,所以说有必要系统的学习一下Weex。虽然Weex目前已经捐赠给了Apache,但是阿里的人员一直做着贡献。
需要的前置知识
- Vue的基础知识,这也算一个最高的门槛了,但是幸运的是可以免费学到。
- 会安装Node和使用npm(cnpm)进行包管理。
- 会基本的CSS和JavaScript的知识。
搭建开发环境
系统要求:
首先是系统建议,如果你用windows系统,我建议你升级到win10,因为在win7下安装由于权限的原因,你有可能会安装失败。经过几次尝试,发现win10安装还是比较顺利的。
安装node:
在系统安装好后,你需要先安装Node。这个过程比较简单,所以没什么讲的。
下载地址:https://nodejs.org/en/download/
推荐使用LTS版本,不建议使用CURRENT版本。
国内做好使用淘宝的npm镜像:
命令:
npm config set registry= https://registry.npm.taobao.org
也可以用cnpm,并使用淘宝的npm镜像:
命令:
npm install -g cnpm --registry=https://registry.npm.taobao.org
安装完成后查看版本:
node安装完成后我们最好在命令行工具中检测一下版本。
node检测:
node -v
npm检测:
npm -v
安装Java环境
这里不在细讲,略过。
git的安装
windows带的命令行工具不是很友好,而且我们在学习WEEX时会用到Git的命令,所以这里需要安装一下Git。需要把git路径加入环境变量path路径中。
Git的下载地址:https://git-scm.com
安装weex-toolkit
安装weex-toolkit需要使用npm进行安装。
命令:
npm install weex-toolkit -g
在安装weex时,可能出现权限问题,所以以管理员的身份来安装。(有人说安装weex-toolkit的时候,尽量不要用cnpm,有失败的经历)完成安装后,你可以使用命令:
weex -v
检测是否安装成功。
安装全局webpack
使用npm 安装webpack,如果安装比较慢,可以使用cnpm来安装。
命令:
npm install webpack -g
安装好后,使用webpack -v
进行版本查看。
安装android-studio以及配置:
这个不再讲解,记录一下sdk路径。
配置环境变量:
打开环境变量路径:控制面板->系统和安全->系统->高级系统设置->环境变量。
新建:ANDROID_HOME
并把我们刚才赋值的sdk路径作为值插入。
添加platform-tools和tools到path下
开发工具:
可以用Weex IDE工具,是官方为weex开发者提供更专业的一站式开发工具。从项目创建到编码、预览、调试,带给你沉浸式的开发体验。基于VSCode开发的,比较省心。
下载地址:https://weex.apache.org/zh/tools/ide.html
使用说明:https://weex.apache.org/emas-studio.html
也可以使用VSCode,通过安装拓展包来开发Weex:
- weex-new-project - 用于在VSCode中创建Weex项目。
- weex-lang - 用于在VSCode中对最新的Weex语法进行支持。
- weex-doctor - 用于检查iOS和Android本地开发环境。
- weex-debugger - 用于在VSCode中启动Weex调试工具。
- weex-run - 用于在热更新模式下启动Android及iOS工程。
你可以通过安装 vscode-weex
拓展来安装上面的所有包。
建立weex项目目录:
创建项目请使用以下命令:
weex create awesome-project
(输入完这条命令时,如果你没有安装weexpack
,他会提醒你进行安装,这个weexpack
也可以自己单独安装npm install weexpack -g
。 )
在命令行(cmd)情况下,步骤如下:
D:\Weex-space>weex create button_demo
? Project name (button_demo)
此步是项目的名称,输入为输入的名称,不输入则为括号内的名称;
? Project description (A weex project)
此步是为项目添加描述,输入为输入的描述,不输入则为括号内的内容;
? Author (deepSprings)
此步是为项目添加作者,输入为输入的内容,不输入则为括号内的内容;
? Select weex web render (Use arrow keys)
> 1.0.17 Current: latest features0.12.17 LTS: recommended for most users
此步为项目选择weex web的渲染器,推荐选择第二项;
? Babel compiler (https://babeljs.io/docs/plugins/#stage-x-experimental-presets) (Use arrow keys)
> stage-0: recommended for most users, support you to use all es6 syntaxstage-1stage-2stage-3
此步为选择Babel compiler(js编译器)?选项有4个,按推荐选择第一个“stage-0”,支持所有es6语法;
? Use vue-router to manage your view router? (not recommended) (y/N)
此步为是否使用vue路由来管理界面路由,我这里没按推荐选择,vue-router是官方路由,个人推荐使用;
? Use ESLint to lint your code? (Y/n)
此步为是否使用ESLint管理代码,ESLint是个代码风格管理工具,是用来统一代码风格的,并不会影响整体的运行,这也是为了多人协作,新手就不用了,一般项目中都会使用;
? Pick an ESLint preset (Use arrow keys)
> Standard (https://github.com/standard/standard)Airbnb (https://github.com/airbnb/javascript)none (configure it yourself)
此步为选择一个ESLint预设,编写vue项目时的代码风格,因为选择了使用ESLint,所以有此选项:
- Standard (https://github.com/feross/standard) 是js的标准风格
- AirBNB (https://github.com/airbnb/javascript) 一种最合理的JavaScript方法
- none (configure it yourself) 这个是自定义风格
? Set up unit tests (Y/n)
此步为是否安装单元测试;
? Should we run `npm install` for you after the project has been created? (recommended) (Use arrow keys)
> Yes, use NPMYes, use YarnNo, I will handle that myself
此步为项目创建后是否要为你运行“npm install”?
这里选择包管理工具
- yes,use npm(使用npm)
- yes,use yarn(使用yarn)
- no,I will handle that myself(自己操作);
推荐选择no,结束后用cpnpm install
,否则用npm install
是真的慢;
如果你没有安装weexpack这个过程会慢一点,请耐心等待。等出现Creating a new weex project.
说明项目构建完成了,我们可以到项目目录中去看一下。
你会发现已经给我建立了项目所需要的基本结构和文件,这时候我们就可以cd到项目目录下,然后使用npm install
安装依赖包了。
如果你感觉慢的话,你也可以使用cnpm install
,但是要说的是cnpm 有时候会安装错误,这也算一个小坑吧。如果你用npm进行安装时间会很长,并且在安装完成后会有一些WARN警告,你可以暂时忽略这些警告。
添加Android应用支持:
我们建立好了项目的基本目录,这时候我们还要添加平台的支持,这里我们添加Android的支持。
weex platform add android
这个安装过程并不算长,安装好后可以去项目根目录的platforms下看到android文件夹,说明应用支持添加成功。
发布Android应用:
想在写完一段代码时进行预览效果,这时候就要使用run命令了。
weex run android
这里是有一个坑,在命令执行完,它会报一个错误,错误是找不到安装设备。No android devices found。如果你自学这个坑会够你添一会的了,那这里我们安装的android-studio就排上用途了。
在Android Studio里运行weex:
选择你用weex创建的项目下的platforms/android目录,打开项目。这时候坑就来了,会报好多错误,但是你不要惊慌,双击安装就好。
这个过程时间长短会根据你网络状况和机器配置有关,如果网络不好,可能要安装1-2个小时,所以耐心等待。
Weex常用命令:
了解一下weex中常用的npm
命令。这些npm xxx
的命令,其实都是在package.json里设置的。你可以看到如下代码:
"scripts": {"start": "npm run serve","build": "webpack --env.NODE_ENV=common","build:prod": "webpack --env.NODE_ENV=production","build:prod:web": "webpack --env.NODE_ENV=release","build:plugin": "webpack --env.NODE_ENV=plugin","clean:web": "rimraf ./release/web","clean:ios": "rimraf ./release/ios","clean:android": "rimraf ./release/android","dev": "webpack --env.NODE_ENV=common --progress --watch","unit": "karma start test/unit/karma.conf.js --single-run","test": "npm run unit","lint": "eslint --ext .js,.vue src test/unit --fix","serve": "webpack-dev-server --env.NODE_ENV=development --progress","ios": "weex run ios","web": "npm run serve","android": "weex run android","pack:ios": "npm run clean:ios && weex build ios","pack:android": "npm run clean:android && weex build android","pack:web": "npm run clean:web && npm run build:prod:web"}
在代码中你会看到build、build_plugin、dev、serve这些属性,这些就是我们常用的npm
命令。
npm run dev
我们在开始项目编写时,第一个要在命令行输入的命令就是这个,这个命令输入后,会给我们进行实时的压缩混淆操作(也叫编译操作),生成dist目录下的index.js文件和index.web.js文件。
命令开启后,我们每次修改src下的文件会自动给我们编译。所以我们在开发时需要最先开启下面的命令。
npm run server
虽然可以用Android Studio进行看效果,但是我们还是需要一个web端来支持我们开发预览的,这时候我们可以启用npm run server
来解决问题,他会给我们在浏览器中打开我们的vue页面。
修改的时候,没有热更新预览;刷新也是没有任何效果的,必须再次在命令行中输入webpack才能预览到我们想要的结果。
npm run build
在运行webpack时,发现npm run build
里的命令执行的就是webpack命令,那我们改造一下,我们在代码中加上--watch
。
"scripts": {"start": "npm run serve","build": "webpack --env.NODE_ENV=common --watch","build:prod": "webpack --env.NODE_ENV=production","build:prod:web": "webpack --env.NODE_ENV=release","build:plugin": "webpack --env.NODE_ENV=plugin","clean:web": "rimraf ./release/web","clean:ios": "rimraf ./release/ios","clean:android": "rimraf ./release/android","dev": "webpack --env.NODE_ENV=common --progress --watch","unit": "karma start test/unit/karma.conf.js --single-run","test": "npm run unit","lint": "eslint --ext .js,.vue src test/unit --fix","serve": "webpack-dev-server --env.NODE_ENV=development --progress","ios": "weex run ios","web": "npm run serve","android": "weex run android","pack:ios": "npm run clean:ios && weex build ios","pack:android": "npm run clean:android && weex build android","pack:web": "npm run clean:web && npm run build:prod:web"}
这时候你修改代码后,只要刷新浏览器就可以实现更新了,已经不用再次输入webpack命令了。
自动热更新
如果你了解webpack的话,一定知道webpack-dev-server模式,只要在地址栏上加上这个,就可以实现热更新了。如果你还不了解webpack可以先看看我以前的课程。
现在可以关掉npm run dev 这个窗口了,我们只通过npm run build和 npm run serve就可以实现开发热更新预览了。
Android端预览
我们先打开我们的Android Studio,启动AVD。把我们在工程项目里的dist/index.js文件内容,复制到Android Studio下的app/assets/dist/index.js中。
保存后,点击工具栏上的⚡(闪电)符号进行更新。就可以预览到原生的真实效果了。没有像浏览器那样自动热更新。
至此,weex的环境和Android开发的环境都已搭建完成,并且第一个项目也已经完成,也能够在Android设备上运行。
Weex和Vue的区别
weex组件:
weex组件是我们用Vue的语言和weex特定的语法编写,通过编译最后生产的是APP原生的组件。这和我们学习Vue的组件有些不同,Vue组件主要是要进行复用和封装的,而这里是为了编译生产原生组件。
布局的不同 flex布局:
在html或者Vue中我们可以使用浮动布局,但是weex并不支持,所以请不要使用。weex提倡使用Flex进行布局。
不支持百分数:
html中布局,经常使用百分比进行布局,这种布局可以适应不同屏幕,但是你用weex布局时百分比是不支持的。
border设置请分开写:
在html中我们写边框样式,经常使用border:1px solid #ccc;这样的形式,但是weex同样不支持,它要求你必须分开写,并且和html中不同。
有了这个经验,在开发中写CSS,尽量分开写,不要合并起来写。
长度单位只支持px:
是不是觉的这个有点奇葩,其实如果你了解原生应用的dpi单位,那这里的px是和dpi单位相对应的。所以你也不用纠结。使用就可以了,需要注意的是请不要再使用我们的rem,em,pt进行布局了。 如果你想了解一下dpi的知识,我推荐一篇文章:http://blog.csdn.net/yuzhouxiang/article/details/7283931
学习资料
在线开发使用使用: Weex Online Editor
官方文档:指南、文档、工具
weex视频:WEEX免费视频教程-从入门到放肆 (共17集)
Vue视频:
- 【第一季】Vue2.0视频教程-内部指令(共8集)
- 【第二季】Vue2.0视频教程-全局API(共9集)
- 【第三季】Vue2.0视频教程-选项(共6集)
- 【第四季】Vue2.0视频教程-实例和内置组件(共4集)
- 技术胖的Vue-cli 视频教程
- 技术胖的Vue-router视频教程
Weex Ui(一个基于 Weex 的富交互、轻量级、高性能的 UI 组件库):
https://alibaba.github.io/weex-ui/#/cn/
BUI-weex (一套专门为 Weex 前端开发者打造的一套高质量UI框架):
http://dev.bingocc.com/buiweex/
水滴-ui (一个轻量级weex UI组件库,包含表单元素,tabbar,picker城市三级联动选择,actionsheet,switch等一系列常用组件):
https://github.com/hbteam/weex-droplet-ui
Weex从入门到放弃相关推荐
- 【微信小程序】从入门到放弃
前言 关于微信小程序是什么,能做什么的问题,草民在此不在罗列了,随着小程序的天天刷屏,想必您也是来吃一些干货,本篇博文和大家走进微信小程序的从入门到放弃~ 微信小程序开放功能 草民看过很多的文档,微信 ...
- AI从入门到放弃2:CNN的导火索,用MLP做图像分类识别?
来源 | 腾讯知乎专栏 作者 | AIoys(腾讯员工,后台工程师) 项目文档和代码在此:github项目地址: https://github.com/zsysuper/AI_Notes ▌一.前言 ...
- AOP埋点从入门到放弃(二)
其实人最大悲哀莫过于知道自己想要什么,却不知道怎么坚持!最近迷恋上了死侍 其实和我平时的状态差不多,以一个混子的心态去做任何事情,往往成功的概率会更大!!! 一张图片镇楼!!! 上文说到了Aspect ...
- 入门到放弃node系列之网络模块(二)
为什么80%的码农都做不了架构师?>>> 前言 本文首发[一名打字员] 上一节我们刚刚介绍完node的HTTP和HTTPS模块,相信我们也对nodejs有了更深层次的理解,接下 ...
- webpack - vue Component 从入门到放弃(三)
离上一篇已经一个星期了,人的拖延症是没法救的,今晚趁着蒙蒙春雨,来抒发抒发情感. 上一篇简单介绍了webpack的配置,这里稍微再做一一下延伸 插件 插件可以完成更多 loader 不能完成的功能.插 ...
- CYQ.Data 从入门到放弃ORM系列:开篇:自动化框架编程思维
前言: 随着CYQ.Data 开始回归免费使用之后,发现用户的情绪越来越激动,为了保持这持续的激动性,让我有了开源的念头. 同时,由于框架经过这5-6年来的不断演进,以前发的早期教程已经太落后了,包括 ...
- python ** 运算符_Python从入门到放弃运算符(2)
摘要:上一篇Python从入门到放弃-运算符(1),讲了Python的运算符中的算术运算符.赋值运算符.比较(关系)运算符,这篇继续讲Python的运算符. 逻辑运算符 逻辑运算符是对真和假两种布尔值 ...
- python从入门到放弃系列恶搞短片-太惨!学Python方法用错,直接从入门到放弃!...
原标题:太惨!学Python方法用错,直接从入门到放弃! 从你开始学习编程的那一刻起,就注定了以后所要走的路-从编程学习者开始,依次经历实习生.程序员.软件工程师.架构师.CTO等职位的磨砺:当你站在 ...
- 为什么叫python编程-月薪上万的Python编程,为什么你还没入门就放弃了?
"大家都是怎么学Python 的?我学了一个月,感觉自己怎么学都学不进去啊,还是一脸懵--学习前我有做过规划,现在连入门都不算,我应该怎么办啊!!!求大神给一个学习思路!求大神讲解入门要重点 ...
最新文章
- 自编网页是处理url时服务器出错,【上海校区】自编教材《web标准网页制作实例教程》连载...
- printf的使用和test的使用
- 【iVX 初级工程师培训教程 10篇文拿证】04 画布及我和 iVX 合照
- 分布式锁之Redis6+Lua脚本实现原生分布式锁
- HDU5971【瞎搞】
- 【NOIP2013模拟】七夕祭
- azure云数据库_如何使用SQL Data Sync同步Azure SQL数据库和本地数据库
- @value 静态变量_C语言基本知识:变量
- 张口就问“CCIE”月薪多少
- linux命令、vi编辑器常用命令
- linux 控制音量大小,linux 控制音量大小
- 计算机二级教程48讲视频,天津大学 《线性代数》视频教程48讲 真人手写精品
- 10个超实用的微信小程序 | 值得推荐的微信小程序
- 外贸术语 交货条件(zt)
- Instant类[java]
- Joplin实现样式更改
- html中设置表格标题的代码,设置表格标题的html代码是什么_WEB前端开发
- 个人微信低成本引流实战教程方法
- 数据库设计 - 01外卖配送系统
- 【Android】Studio 依赖 ButterKnife 黄油刀 时出现 空指针异常