Weex从入门到放弃

最新推荐文章于 2024-04-19 09:46:45 发布
最新推荐文章于 2024-04-19 09:46:45 发布
阅读量642 收藏 2
点赞数
原文链接：https://my.oschina.net/deepSprings/blog/3035992
版权

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

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 features
  0.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 syntax
  stage-1
  stage-2
  stage-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，所以有此选项：

? 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 NPM
  Yes, use Yarn
  No, 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视频：

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

转载于:https://my.oschina.net/deepSprings/blog/3035992

weixin_34082854
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【weex】从入门到放弃
hytfly的专栏
07-20 2880
对weex做了一小段时间的尝试，还是发现了一些问题，暂时放弃了在比较大的app里做尝试，不过做做小的app，或者在app中内嵌一些动态变化多的模块还是不错的。 不谈性能，weex是号称write once run everywhere，经历了几次变动，阿里巴巴开源之后，将代码托管给了阿帕奇，然后又请了尤大神过去做vue的兼容，希望全面支持vue。（当然目前又支持了RAX，没有使用过这个，就不做评...
Uni-app 之 Weex项目的重构问题
weixin_54063993的博客
01-13 1445
现在Weex的现状可以说是已经被无情的淘汰了，别说官网不维护了，就连像样的社区都没有，对于Weex 的开发者来说，真是及其痛苦，更何况，手机系统的版本不断升级，Weex 的底层也不在维护，只能靠原生支持，本想降低成本，没想到，成本反而很高，所以决定重构，而且是必须重构。 为了更好更快的重构框架，最后经过商讨，换成Uni-app来进行替代，因为Uni-app有了weex的引擎，并且进行升级和优化，更友好的是Uni-app对Weex的开发者创建了和react Native 相似的 native vue（简
weex 开发 (已放弃了)
weixin_30808575的博客
08-03 984
关于weex 开发 本菜已放弃使用了，当初选择使用weex 是为了同时支持h5 和 android / ios 三端；想法很不错，深入之后 突然发现，开发起来并没有很轻松，因为weex 中有些方法，如果你要兼容三端，可能需要你去写三套代码去实现；深感不爽，决定弃坑了！ weex 开发布局方式 在weex 开发中不支持 rem/em/pt 布局方式, 目前只支持flexBox, 和以px...
（笔记）weex开发（已放弃）
qq_42076140的博客
07-17 1321
官网： https://weex.apache.org/zh/guide/introduction.html 第三方库推荐EEUI https://eeui.app/ 开发我选用的eeui，weex官方不知道还管不管项目,EEUI封装的常用模块、组件都很nice，尤其是封装的页面跳转（https://eeui.app/module/newPage.html），js和原生的桥接（https://eeui.app/guide/variable.html#requiremodule），eeui还一直保持更
探索Weex框架：高效跨平台移动应用开发的新选择
最新发布
gitblog_00084的博客
04-19 329
探索Weex框架：高效跨平台移动应用开发的新选择 项目地址:https://gitcode.com/walid1992/weex-frame 项目简介 Weex 是一个由阿里巴巴开源的移动端开发框架，它允许开发者使用一套代码进行iOS、Android和Web应用的开发。其核心目标是提升开发效率，减少维护成本，实现真正的“Write Once, Run Everywhere”。 技术分析 基于Vu...
创建app端demo
liuerchong的博客
07-03 508
项目依赖环境（需提前安装好）： Nodejs已安装 Cnpm、Nrm、Webpack Weex Toolkit WebStorm Weex Playground AndroidStudio Vue-cli 创建工程 进入项目存放路径 输入weex create webpack leadnews-app命令 选择设置项目信息 出现此信息说明项目创建成功。 导入项目，设置编码utf-8 安装less 输入命令cnpm -i --save-dev les...
weex 入门Demo 前端
01-10
本篇将详细讲解Weex入门Demo的前端知识，帮助你快速掌握Weex开发的基础。 一、Weex简介 Weex的出现主要是为了解决Web和原生应用之间的鸿沟，它提供了一种统一的开发方式，使得开发者可以使用一套代码库来实现多平台...
Weex入门这一篇就够了
02-24
npminstallwebpack-g（3）安装vue-cli脚手架：npminstallvue-cli-g（1）vueinitwebpackvue-hello(vue-hello为项目名称)（2）cdvue-hello（3）npminstall（4）npmrundev或npmstart（1）全局安装weex-toolkit：...
WEEX环境搭建与入门详解
10-16
主要介绍了WEEX环境搭建与入门详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
weex 入门Demo
01-10
【Weex入门Demo详解】 Weex是由阿里巴巴开源的一款高性能、跨平台的移动开发框架，它允许开发者使用...随着对Weex的深入理解和熟练运用，开发者将能够享受到它带来的高效开发体验，以及在多平台间无缝切换的便利性。
weex 入门文档
01-29
weex 入门文档weex 入门文档weex 入门文档weex 入门文档weex 入门文档weex 入门文档weex 入门文档weex 入门文档weex 入门文档
weex-droplet-ui:水滴UI一个轻量级weex UI组件库，包含表单元素，tabbar，picker城市三级联动选择，actionsheet，switch等一系列常用组件
05-07
水滴UI install npm i weex-droplet-ui -S playground扫一扫查看demo演示 HTML5 demo演示 关于文档 联系我们 如您在使用我们的“水滴UI”，有任何问题可以添加微信号springalsky，或者给我们提issue。 配置 因未编译成ES5发布到npm，所以webpack.config.js需要配置排除node_modules下包含weex的文件。 { test: /\.js$/, use: [{ loader: 'babel-loader', }], exclude: /node_modules(?!\/.*(weex).*)/ } UI组件代码按需加载 npm i babel-preset-stage-0 babel-plugin-component -D .babelrc配置如下 {
webpack-UI组件使用
08-10
webpack前端开发 .. webpack前端开发 .. webpack前端开发 ..
Weex页面的编写——Weex的学习之路（六）
weitao_666的博客
05-29 931
通过前几博客我们把weex的内置组件都学习完了，组件的单独使用想必都可以了。那么，这次我们来做weex实际页面的编写，见证一下，一套代码在Android、Ios和H5上使用。在weex官网推荐我们使用Weex Studio作为编译器，其实这款编译器也不是新出来的，它就是vscode再包装了一下添加脚手架，实际使用和vscode是一样的，只是比vscode多了一个预览界面。接下来我们就进行代码的编写...
大前端技术的群雄乱舞
热门推荐
xiaobao2110的博客
02-01 5万+
引言 不知道什么时候起，在技术圈里出现了大前端这个词，web前端和移动客户端开始有了合一的现象。曾经号称统一天下的h5，并未封皇，原生IOS和Android依旧活跃，非但如此，小程序，RN，weex,flutter这些新生势力不断冒起，问这前端天下，谁主成浮！！！ 纷争始于H5和原生 IOS和ANDRIOD 随着移动互联网的浪潮到来，ios和Android这2门移动原生语言开始活跃起来，对底层设备硬件功能的完美支持，流畅丝滑般的UI体验， 各大公司为之趋之若鹜，相关ios和Android人才一度供不应求，
关于Weex你需要知道的一切
alibaichuan的博客
04-23 1816
QCon第一天，GMTC全球移动技术大会联席主席、手淘技术老大庄卓然（花名南天）在Keynote上宣布跨平台开发框架Weex开始内测，并将于6月份开源，同时他们也放出官网：http://alibaba.github.io/weex ，可以在上面申请内测资格，以及下载Android版Demo把玩。 在大会后我对庄卓然做了一个采访，对一些大家关心的问题得到官方的回复，整理在这里。所有
weex从入门到放弃。。
Android&前端
07-30 987
工作之余学习weex开发，记录下一些坑。。 附下weex的版本信息 问题一.版本不对应 报错如下： E:\WeexProject\weext>weex debug tech_list.we ./tech_list.we Module build failed: Error: Vue packages version mismatch: - vue@2.5.21 (C:\Use...
webpack中的process.env.NODE_ENV
轻风细雨_林木木
04-14 3763
1.什么是process? process是node的全局变量，这个变量有一个env属性。创建一个js文件index.js，打印process变量console.log(process)，使用node环境运行： node index.js 可以看到 2.process.env.NODE_ENV 是什么？ 1.这个变量不是process.env本来就有的，是通过设置得到的； 2.通过这个变量可以判断我们环境是开发环境还是生成环境。 3.配置process.env.NODE_ENV （1）webpack4
理解webpack中的process.env.NODE_ENV
小柒的前端之旅
01-17 7436
什么是process? process是node的全局变量，这个变量有一个env属性。任意创建一个js文件（index.js） ,打印process变量（console.log(process)),使用node环境运行： node index.js 可以看到process的内容： process.env.NODE_ENV的作用 这个变量不是process.env本来就有的，是通过设置得到的。...
Weex 架构简介和性能优化实战.pptx
12-07
Weex 架构简介和性能优化实战

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值