每周三集前端免费视频
每年帮助超100万前端爱好者学习

WEEX免费视频教程-从入门到放肆 (共17集)

第01节:课程介绍

WEEX是什么?

WEEX的出现让我们可以使用Vue来进行移动端原生应用开发,是前端小伙伴们必备技能。

与 Web App、HTML5 App 或 hybrid App 不同,您可以使用 Weex 构建一个真正的原生应用。更贴心的是你的代码只需使用 HTML、CSS、JavaScript 可以构建原生应用,上手非常简单。但实际上,应用的底层是 Objective-C 或 Java, 同时,Weex 提供很多 native 组件或模块供开发人员使用。也就是说,你会前端知识,想作真正的app,那你学习WEEX就对了。

那些公司在用

阿里系的公司基本都在用,包括天猫、淘宝、钉钉(具体可以看下边的图片)。现在尤大神担当的WEEX的顾问。所以说我们有必要系统的学习一下WEEX。虽然WEEX已经捐赠给了Apache公司,但是阿里的人员一直做着贡献。有人说React Native要比WEEX的组件多百倍,我不否认,毕竟WEEX才刚刚开始,就像VUE刚刚开始一样,很多人鄙视瞧不起,但是现在也被接受,并开始大规模使用一样。

需要的前置知识:

  1. Vue的基础知识,这也算一个最高的门槛了,但是幸运的是在这里你都可以免费学到。
  2. 会安装Node和使用NPM进行包管理。
  3. 会基本的CSS和JavaScript的知识。

学前先知:

  • 这门课程的坑是比较多,难度要比其他课程要大,所以做好思想准备。
  • 如果你有Vue的基础,上手会简单一些。
  • 这不再是网页,而是原生应用,所以有很多和网页不一样的地方,你需要适应。

课程难点:

  • 国内的网络会给你带来很多麻烦,所以你需要一些科学上网的本领。
  • 环境的搭建,环境搭建你可以能需要8小时-2天时间,不要放弃,多尝试。
  • 适应原声开发的一些规范,如果你已经是个前端开发高手,你需要多一些适应。

PS:看WEEX的文档坑会比较多,所以建议你学完视频再去看文档进行填坑操作。如果你有坑过不去了,也可以参与到我们的众筹活动中来,技术胖会在群里进行解答。

课程分三个章节:

大约18-20节课,每周更新三节。

  1. 开发环境的搭建
  2. 组件和模块的使用
  3. 学习中问题答疑处理。

第02节:开发环境安装(1)

开发环境的搭建是这门课程的重点和难点,因为国内网络环境的原因,你可能会安装好几遍才能安装成功,也会由于错误,你可能要重新安装系统,但是请不要放弃,因为只要踏过这道坎我们讲师一马平川,顺风顺水。我在完全熟悉的安装下也安装了8个小时左右,所以你最好是一边工作以边安装,或者拿出一个周六,看着电影安装着,这样会消除一些你的不安情绪。

首先是系统建议,如果你用windows系统,我建议你升级到win10,因为在win7下安装由于权限的原因,你有可能会安装失败。经过几次尝试,发现win10安装还是比较顺利的。

安装node:

在系统安装好后,你需要先安装Node。这个过程和安装QQ的过程一样,所以没什么讲的。

下载地址:https://nodejs.org/en/download/

请使用LTS版本,因为Node维护着两条发布流程:奇数版本每年10月份发布,偶数版本第二年4月份发布。当一个奇数版本发布后,最近的一个偶数版本会立即进入LTS维护计划,一直持续18个月,再之后会有12个月的延长维护期。当一个偶数版本发布时,奇数版本只有2个月的维护期,以后只能升级。

当然也不建议使用CURRENT版本,也就是我们说的最新版,虽然官方说是可以使用的,但是我个人还是比较保守的,我怕一些未发现的BUG,影响我们的安装,所以我们使用LTS,长期维护版本。

安装完成后查看版本:

node安装完成后我们最好在命令行工具中检测一下版本。

node检测

npm检测

安装Java的环境

因为我们最终开发的是android原生程序,所以需要安装java的环境。因为国内网络环境的问题,这个安装可能会很慢。

下载地址:http://www.java.com/zh_CN/

这个现在的文件很小,这并不是完整的离线安装包,它的作用是检测你系统并给你提供正确下载包的一个小软件。所以它需要联网继续下载安装,如果你的网络不好,你会遇到你学WEEX的第一坑,这个坑需要科学上网,否则你会等到天荒地老。请大家有点耐心,当显示下图时说明你迈过了第一个坑。

如果你真的在这个坑无法跳出,你可以下载脱机文件,虽然也会很慢,但是会有个进度,你就会比较安心。(具体方法可以看视频教程….)

git的安装

windows带的命令行工具不是很友好,而且我们在学习WEEX时会用到Git的命令,所以这里需要安装一下Git。这个对于已经工作的小伙伴一定再熟悉不过了,每天都要进行使用。

Git的下载地址:https://git-scm.com

这个大概有37M大小,下载还算顺利,然后一路下一步,下一步就可以安装成功。桌面出现Git Bash图标,说明安装成功。

安装weex-toolkit

安装weex-toolkit需要使用npm进行安装。

填:在安装weex-toolkit的时候,尽量不要使用cnpm,因为我有过两次使用cnpm安装失败的经历,还有一次再次用npm安装也不行,最后没办法重新作系统。需要提醒的是这个包的安装也是比较耗时的。安装完成后会报几个WARN,这先不用管。安装完成后,你可以使用-v的命令检测是否安装成功,弹出版本号,说明安装成功了。

安装全局webpack

使用npm安装webpack,如果你安装很慢,这个是可以使用cnpm来进行安装的。

安装好后使用-v进行查看版本。

安装android-studio:

其实到上一步骤,已经可以使用了,但是没有原生开发的感觉。那为了这个Feel我们需要再安装android-studio。

在安装过程中,你需要记录一下SDK的安装位置,安装好后,我们要配置环境变量。

填坑:安装时你最好关闭杀毒软件或者360卫士这样的软件,因为他会组织android-studio一些关键位置的写入,导致安装后出现未知错误。

配置环境变量:

打开环境变量路径:控制面板->系统和安全->系统->高级系统设置->环境变量。

新建:ANDROID_HOME 并把我们刚才赋值的sdk路径作为值插入。

添加platform-tools和tools到path下(这个看视频吧,每个人的路径不一样,结果也不一样)。

AndroidStudio配置:

在AndroidStudio的欢迎界面,你需要点击右下方的Configure进行老版本的SDK tool配置,

步骤:Configure->SDKManager->SDK Tools->勾选show Package Details ->勾选23.0.2

然后进入安装。

 

总结:这节课虽然不难,但是比较耗时。大家一定要熬过这个过程,剩下就没这么耗时了。

第03节:开发环境安装(2)

通过上节课艰难的安装,凭着自己的耐心和毅力已经顺利安装完了。那我们这节课继续进行开发环境的搭建,但是这节课不会像上节课坑那么多。

建立weex项目目录

上节课我们安装了weex-toolkit,这个安装成功了,我们就可以在命令行使用weex命令了,我们先来看一下版本的查询。

有了这个就可以生成我们的项目目录了,类似于vue-cli。创建命令如下:

输入完这条命令时,如果你没有安装weexpack,他会提醒你进行安装,这个weexpack也可以自己单独安装。

如果你没有安装weexpack这个过程会慢一点,请耐心等待。等出现Creating a new weex project.说明项目构建完成了,我们可以到项目目录中去看一下。

你会发现已经给我建立了项目所需要的基本结构和文件,这时候我们就可以cd到项目目录下,然后使用npm install安装依赖包了。

如果你感觉慢的话,你也可以使用cnpm install  ,但是要说的是cnpm 有时候会安装错误,这也算一个小坑吧。如果你用npm进行安装时间会很长,并且在安装完成后会有一些WARN警告,你可以暂时忽略这些警告。

添加Android应用支持

我们建立好了项目的基本目录,这时候我们还要添加平台的支持,这里我们添加Android的支持。

如果你要支持IOS平台的话,你还要添加IOS应用,但是抱歉的是我没有苹果电脑,所以这里就不演示苹果的添加了。这个安装过程并不算长,安装好后可以去项目根目录的platforms下看到android文件夹,说明应用支持添加成功。

发布成Android应用

想在写完一段代码时进行预览效果,这时候就要使用run命令了。

这里是有一个坑,在命令执行完,它会报一个错误,错误是找不到安装设备。No android devices found.如果你自学这个坑会够你添一会的了。那这里我们安装的android-studio就排上用途了。

在Android Studio里运行weex

这里是坑的重灾区,希望大家专心迈坑。在上节课我们已经安装好了Android Studio,我们点击图标重新启动。这时候出现上节课的界面,选择第二项。

然后选择你用weex创建的项目下的platforms/android目录,打开项目。这时候坑就来了,会报好多错误,但是你不要惊慌,双击安装就好。

这个过程时间长短会根据你网络状况和机器配置有关,如果网络不好,可能要安装1-2个小时,所以耐心等待。等待loading条的消失,然后你就可以配置AVD了。(此过程最好收看视频,文字不太好表达。)

AVD虚拟机的安装

等待错误和loading条消失以后,就可以配置虚拟机了,选择菜单栏里的Tools->Android->AVD Manager 进行配置。

到达这个页面,然后点击Create Virtual Device 按钮创建视频。这时候要根据自己的电脑配置,选择屏幕的大小,这个虚拟机很吃内存,所以尽量选择小屏幕分辨率的。然后点击Next,之后进入虚拟机的安装过程,这个也是比较慢的,只要设计到google产品的都不会快。

安装好后点击三角按钮开始运行虚拟机,然后稍等一会,不用作任何操作就会出现weex程序的默认界面。看到下面的界面恭喜你,这节课你已经大功告成了。

第04节:weex常用命令和热更新

 

我相信上节课由于Gradle访问慢的原因已经把小伙伴折腾的筋疲力尽了,其实到上节课位置,我们开发软件和项目的建设已经基本完成了。但是作为一个资深前端是要追求工匠精神的,那这节课我们就把我们的项目变的更好。

作为一个前端没有预览热更新就会感觉很low,所以我们花点时间进行配置一下。但是在学习前,先了解一下weex中常用的npm命令。这些npm xxx的命令,其实都是在package.json里设置的。在代码第6行的位置,你可以看到如下的代码.

在代码中你会看到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。

这时候你修改代码后,只要刷新浏览器就可以实现更新了,已经不用再次输入webpack命令了。

自动热更新

学到这步就可以实现自动热更新了,如果你了解webpack的话,一定知道webpack-dev-server模式,只要在地址栏上加上这个,就可以实现热更新了。如果你还不了解webpack可以先看看我以前的课程。

现在可以关掉npm run dev 这个窗口了,我们只通过npm run buildnpm run serve就可以实现开发热更新预览了。

第05节:Android Studio 开发设置

经过上节可的学习,已经学会了热更新预览,但是这个热更新并不是最终我们想看的结果,它只能满足我们开发时简单的预览,这时候需要android端最终效果的预览。

android端预览

我们先打开我们的Android Studio,启动AVD。把我们在工程项目里的dist/index.js文件内容,复制到Android Studio下的app/assets/dist/index.js中。

保存后,点击工具栏上的⚡(闪电)符号进行更新。就可以预览到原生的真实效果了。

如何修改图标

现在你看到的app图标还是weex自带的图标,修改这个图片很简单。他存放在Android Studio 工程目录下的app/res/mipmap/ic_launcher.png文件夹中。可以根据这些图片的大小更换需要的图片。

打包成Apk

打包操作很简单,只要点击菜单栏中的Build/build Apk 就可以了。打包完成后在Android Studio右下角会有提示,并可以点击查看我们打包成功的Apk。打包好后,可以拷贝到andorid手机上进行安装了。

用weex init 命令搭建开发环境

我们之前都是使用weex create 来进行项目的创建,但是weex还听过init的创建方法,现在就学习一下。这个在开发时也是比较方便的,所以建议大家用这种方式进行开发,写代码。

输入完命令后,会提示你要起一个项目名称,可以随便起一个名字,我这里起名为weexWork。

安装好后,进入到项目目录,运行npm install  (这个过程有点慢)。install完成后,可以打开package.json查看有那些命令。

有了前几节课的经验,这里就不难理解了,只要运行npm run server 和 npm  run dev 就可以了,然后打开127.0.0.1:8080进行预览。这时候会出现坑,我们用网页浏览会出现一个error错误:http://127.0.0.1:8080/node_modules/weex-vue-render/index.js   找不到这个js。这个原因的产生主要是weex版本升级造成的。

解决方法

找到项目根目录下的:weex.html文件,找到15行左右的引入代码。

改为

然后刷新页面,就可以看到我们的制作效果了。这个要比我们之前学习的预览真实一点,但是仍然不是原生效果,但我们开发时预览已经足够了。

这节课我们能跳出这个页面,并会利用Android Studio 进行打包就可以了。下节课开始我们进入到课程的第二部部分,正式开始学习如何使用weex里的组件,用Vue开发原生应用。

第06节:weex和vue的爱恨情仇

从这节开始学习weex中的组件,在学习之前,你先要对自己大声说三遍:”我现在开发的是原生App”。接触前端较长的成手,在学习weex时很难转变这个坑,比如我学的时候在布局上就很喜欢用浮动布局,但是weex不支持。所以大家一定先在脑海里转变思想。

这节就对照Vue,我们看看有哪些基本的不同。

weex组件:

weex组件是我们用Vue的语言和weex特定的语法编写,通过编译最后生产的是APP原生的组件。这和我们学习Vue的组件有些不同,Vue组件主要是要进行复用和封装的,而这里是为了编译生产原生组件。

PS:讲组件时,我并不会面面俱到的讲,因为大家都是有一定的html基础和CSS基础,我只讲差异和重点。视频可以保证你们会用,至于开发时你们需要可以具体查API。

启动上节的项目

上节课我们用weex init 进行了构建weex项目,那每次启动项目你都需要输入2条命令,才能进行开发。

  1. npm run serve:打开服务
  2. npm run dev:进行打包

之后我们在浏览器中输入http://127.0.0.1:8080就可以了。

布局的不同

flex布局:

在html或者Vue中我们可以使用浮动布局,但是weex并不支持,所以请不要使用。weex提倡使用Flex进行布局。如果你对Flex布局还不熟悉的话,那可能这里需要几个小时自学一下。

不支持百分数:

html中布局,经常使用百分比进行布局,这种布局可以适应不同屏幕,但是你用weex布局时百分比是不支持的。有的小伙伴肯定会不信这个邪,非要试一下,结果发现还真的好使,但是这只是假象。你放到虚拟机中进行测试就明白了。(具体效果请看视频中,如果使用百分比在模拟器中会乱掉)

border设置请分开写

在html中我们写边框样式,经常使用border:1px solid #ccc;这样的形式,但是weex同样不支持,它要求你必须分开写,并且和html中不同。

  • border:设定边框,border 目前不支持类似这样 border: 1 solid #ff0000; 的组合写法。可有如下写法:
    • border-style:设定边框样式,值类型为 string,可选值为 solid | dashed | dotted,默认值 solid可有如下写法:
      • border-left-style {string}:可选值为 solid | dashed | dotted,默认值 solid
      • border-top-style {string}:可选值为 solid | dashed | dotted,默认值 solid
      • border-right-style {string}:可选值为 solid | dashed | dotted,默认值 solid
      • border-bottom-style {string}:可选值为 solid | dashed | dotted,默认值 solid
    • border-width {length}:设定边框宽度,非负值, 默认值 0可有如下写法:
      • border-left-width {length}:,非负值, 默认值 0
      • border-top-width {length}:,非负值, 默认值 0
      • border-right-width {length}:,非负值, 默认值 0
      • border-bottom-width {length}:,非负值, 默认值 0
    • border-color {color}:设定边框颜色,默认值 #000000可有如下写法:
      • border-left-color {color}:,默认值 #000000
      • border-top-color {color}:,默认值 #000000
      • border-right-color {color}:,默认值 #000000
      • border-bottom-color {color}:,默认值 #000000
    • border-radius {length}:设定圆角,默认值 0可有如下写法:
      • border-bottom-left-radius {length}:,非负值, 默认值 0
      • border-bottom-right-radius {length}:,非负值, 默认值 0
      • border-top-left-radius {length}:,非负值, 默认值 0
      • border-top-right-radius {length}:,非负值, 默认值 0

 

有了这个经验,在开发中写CSS,尽量分开写,不要合并起来写。

长度单位只支持px

是不是觉的这个有点奇葩,其实如果你了解原生应用的dpi单位,那这里的px是和dpi单位相对应的。所以你也不用纠结。使用就可以了,需要注意的是请不要再使用我们的rem,em,pt进行布局了。
如果你想了解一下dpi的知识,我推荐一篇文章:http://blog.csdn.net/yuzhouxiang/article/details/7283931

如果你还不了解,最好看一下。PS:这里要说明一下,这里的ps单位和我们html中的ps不一样,他也相当于rem的,它会根据屏幕的不同展现出良好的兼容适应性。所以你不用担心,屏幕不同带给我们的困扰。

 

第07节:自定义组件和Text组件

这节课我们来讲一下自定义组件和Text组件,如果学过Vue,自定义组件和Vue的自定义组件几乎一样。但是有些细节还是不一样的。

自定义组件

先写一个自定义组件,然后再看有什么不同。我们定义一个app头部的组件,主要看一下结构特点。

注意点一:

模版里(template)最外层标签只能用<div>标签来表示,其他标签都会报错,这是weex里的一个小坑,需要你注意。

注意点二:

在写Css样式时,必须使用类名或者ID进行设置,其他选择器不起作用。这个坑也比较深,我研究了很久。

引入方式和Vue的引入方式完全一样,我在这里就不码字重复了(具体方法视频中有体现)。

Text组件

text组件是weex内置的组件,他是用来放至文本的容器。在weex中使用文本,必须用text组件,而不是原来我们直接放到任意标签中就可以的。

1.超出显示省略号

text组件提供一个lines的样式,直接把这个样式写在css里就可以生效了,并且带了省略号。这里的坑就是不要写在标签的属性上,而是要写在样式里。

2.css属性有那些

这个可以直接去官方网站查看文档,这些都很简单,我就不在这里讲解了。有什么可以在群里或文章下方提问。

http://weex.apache.org/cn/references/components/text.html

总结:这几节课程都会学习组件,难度并不大,但是你一定要动手敲一下代码,这样才能学会,听一遍什么都学不会。其实我这个人是比较笨的,所以我以写博客的方式驱动学习。这样同样一个知识点,我最少要重复3遍以上,学习一遍,备课一遍,讲课一遍,三遍以后我会对这个知识记得比较牢固。

第08节:Input组件和初识内建模块

无论是什么开发,文本框的操作都是有必须的。这节课我们就先来看看weex中的Input组件。

Input组件

Weex内置的<input>组件用来创建接收用户输入字符组件。input和我们html中的input很像,也是通过type来控制input的类型的。下面我们试着写一个input组件来看一下,也说一下里边的坑。

 

注意点一:

我们在weex中<input>标签必须写成闭合形式,例如<input/>。如果不闭合在手机或者模拟器中是渲染不出来的,会一直显示加载。

注意点二:

在开发中你使用网页预览时,由于是模拟的客户端,所以会出现很多奇怪的错误,建议在网页端预览后到虚拟机进行预览。

  1. 在网页端预览时是不能进入输入框的,但是不要紧,在浏览器中就可以识别了。
  2. 输入过长时,会出现布局错乱,这也是假象,不要在意。

内建模块

内建组件很好理解,就是weex给我们写好的组件,除了组件,weex还提有个内建模块的概念。内建模是一些不能用标签来表达的其他移动端特有的功能,这节课我们只作初步了解,只学个最简单的Toast。

要使用内建模块,必须先要引入。

这里引入了modal模块,它的主要作用是一些提示。这里我们在页面初始化时,进行一个提示,然后3秒后消失。

这是调用的原生方法,这节课我们只是简单接触一下,要明白的是必须用weex.requireModule(‘xxx’)。

第09节:Image和video组件

weex内置的组件中只有image组件是可以操作图像的,div组件和text组件都不支持背景图片。video组件可以播放视频和音频,让我们的应用更加丰富。

Image组件:

先来做一个最简单的图片应用,我们在代码中插入一个图片,这里的图片采用了图床的方式,如果你的图片的动态加载的,我也建议你使用图床的方式进行。

先来看一下标签的写法:

这里需要注意的是,这是一个双标签组件,但是在两个<image> 中间不能放入其它任何东西。还需要注意的是你必须和html中的<img>标签区分,对比学习其实也是不错的学习方式。

还需要注意的是必须给<image>组件设置样式宽高,否则无法显示。

resize属性

resize属性是控制图片的拉伸方式的,它有三种拉伸方式。

  1. stretch:默认值,指定图片按照容器拉伸,有可能使图片产生形变。
  2. cover:指定图片可以被调整到容器,以使图片完全覆盖背景区域,图片有可能被剪裁。
  3. contain:指定可以不用考虑容器的大小,把图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。

详细效果可以在视频中进行查看。

布局兼容性:

有的小伙伴还是不太明白这个以像素为单位的狂傲如何兼容.如果你会flex布局的话,weex的兼容是没有任何问题的,但是对px这个单位如何控制的更好那,其实它和百分比是可以换算的。

宽:720px=100%         高:1250px =100%

知道了这个公式,是不是布局起来就非常方便了那。现在我们可以把图片进行一个全屏显示了。

video组件

有了图像,我们肯定会想了解视频,weex也提供了video组件解决原生视频的问题。但是这种解决方案在实际开发中并不好,工作中还是需要其他一些技术来完成视频的播放,但是一个简单的展示页,用video组件是足够的。

需要注意的是,我们在预览时查看的是HTML5的播放器,而在App中调用的是原生的播放器。

第10节:一起作个列表出来

weex的组件我们已经学了几节课,这节课一起整理和学习制作一个可以上拉加载下拉刷新的列表组件出来。这节课的视频可能会长一些,大家可以准备好水,先上个厕所,然后开始学习。

<list>内置组件

说到列表,我们第一个想到的单词就是list,weex也很体贴的使用了list关键词作为列表组件。我们先来作一个列子。只是一个最简单的列表。

我们在script的data里加入了lists数组,并用循环的方式展现了数组,这里你会发现两个并不熟悉的标签<list>和<cell>。

  • <list>就相当于我们在html中的<ul>标签。
  • <cell>就相当于我们在html中的<li>标签。

需要注意的是并不需要给<list>和<cell>增加额外的css样式,而是把样式都写在<div>中,还有就是在网页中预览的时候会出现一些样式错误,但是你在模拟器中预览就比较好。

上拉加载

在移动端中上拉加载是经常使用的一个功能,weex中要实现这个功能需要使用一个loadmore属性,从英文单词中可以看出,就是加载更多的意思。我们在<list>中加入loadmore属性,并绑定一个fetch方法。

然后在script中的methods中加入fetch方法。

有经验的小伙伴已经发现,这里只是一个简单的模仿,在实际开发中我们会用stream模块从后台取得数据。虽然已经实现了这个功能,但weex还提供了另一种下拉加载的组件<loading>。

<loading>组件

要使用<loading>组件你需要先去<list>组件上的loadmore和loadmoreoffset属性,并在代码中加入<loading>组件。看下面代码的写法:

加入<loading>组件的模版写法。

在代码中可以看到,绑定了onloading方法,这时候我们在methods中再写一个onloading方法就可以了。

现在更像在实际开发中遇到的加载效果了,接下来作上拉刷新效果。

<refresh>组件

实际开发中还需要刷新页面,weex在列表中也为我们想好了,提供了 <refresh>组件,它的作用就是在上拉时进行刷新页面。

我们现在模板中加入<refresh>标签。

可以看到refresh和我们loading组件很像,接着我们要两个方法供组件调用。

  • refresh:下拉刷新时触发,
  • pullingdown:精准下拉,可以获得下拉高度,前后两次滑动距离等详细参数。

总结:这节课我们学的内容比较多,而且在实际开发中经常使用,所以这节课一定要熟练掌握,能多敲几遍代码就多敲几遍。

第11节:从后端服务器上获取数据

上节课学习了列表,小伙伴就开始在群里问我,如何从远端服务器上获取数据,并显示了。其实这涉及到了内置模块stream。这节课我们就专门学一下stream的知识。,它的作用就是从服务器端获得数据,类似我们使用的ajax或者axios。

stream的引入

要想使用stream,必须使用weex来进行引入。

引入成功后,就可以使用了。

案例操作

我在我的博客服务器上放置了一串数据,并且是支持远程调用的。

数据地址:http://www.jspang.com/DemoApi/newsApi.php

你直接使用这个地址就可以作案例了。

这里我们直接上代码了。具体的内容在视频中进行讲解。

最后的实现结果如下:

这节课的内容不用多说了,虽然简单,但是练习和扩展是必须的。毕竟工作中天天都会用到。

第12节:作轮播图片效果

现在已经逐渐熟悉了Weex的编程方式,也了解它的基本特性。今天继续学习weex的内置组件<slider>。

<slider>组件说明

<slider>组件是用于在一个页面展示多个图片时使用的,在前端我们把这种效果叫做轮播图。

先来看一个最简单的写法:

现在可以实现图片的轮播了,但是和我们平时见的还不太一样,没有类似书签的效果。如果需要加这种书签的效果,可以使用<slider>组件的<indicator>组件。

<indicator>组件

<indicator>:组件用于显示轮播图指示器效果,必须充当 <slider> 组件的子组件使用。

它有三个新的CSS样式:

  • item-color {color}:设置项的颜色,可以是颜色的名称,例如 red;也可以是 16 进制的颜色,例如 #RRGGBB。
  • item-selected-color {color}:被选中时的颜色,可以是颜色的名称,red;也可以是 16 进制的颜色,例如 #RRGGBB。
  • item-size {number}:指示器的大小。

明白了这几个元素,我们给现在的轮播图加上指示器。

CSS样式也加上:

这里需要注意的是top,left都是以图的中心点算起的,所以设置便宜的时候要小心。还需要注意的是<indicator>是<slider>的子组件,所以层级关系要正确。

最终效果图:

第13节:<a>组件和<web>组件

其实这个组件的使用是比较简单的,但是里边也是有几个坑容易跌进去跳出不来的,所以单独拿出一节课讲一下。

<a>组件讲解

使用<a>组件时需要和我们html中的<a>标签区分,html中的<a>标签是用来链接html页面的,而weex中的<a>组件是用来链接weex格式的js文件的。

什么是weex格式的js文件?就是我们平时npm run build后生成的app.weex.js文件一样。那我们先利用我们的text标签生成一个app.weex.js文件。现在把上节课作的轮播图效果的app.weex.js文件,另存到项目根目录下,起个名字叫slider.js。保存后要尝试这个文件是在地址栏里输入地址可以打开的。

然后回到foo.vue页面,写一个<a>组件的页面。这里注意的是href链接的是js文件。

因为script里不需要什么代码,所以我们留空了。现在就可以在模拟器中预览了,这里有个小坑,你在电脑浏览器中浏览是出不来效果的,所以你必须到模拟器中进行预览。

<web>组件

使用<web>组件可以在weex中嵌入一张网页内容。你可以使用webview module 模块来控制web的前进、后台和重装。

src属性:此属性指定嵌入的web页面url。

需要注意的是这个组件你必须要设置width和height两个属性。如果不设置会显示0px,所以你看不到效果。

三个钩子函数:

  1. pagestart:<web>组件开始加载时此事件触发。
  2. pagefinish:<web>组件完成加载时此事件触发。
  3. error:如果<web>组件出现错误,会发送此事件消息。

我们jspang.com这个网站加载为例,作一个<web>组件的程序。

这个组件基本没什么坑,所以快速的给大家过一遍。在实际开发中,我们经常用这种形式来加入我们的SPA程序。如果需要原生的,我们再调用原生的。

第14节:通用事件和动画

在作前端的时候,事件我们并不陌生,什么click事件,什么onChange事件。但是在原生开发中有三个通用的事情和我们以前的web开发有所不同,今天就在这里学习一下。

通用事件:

所谓的通用事件就是大部分组件都可以使用的事件和web开发一样的click事件就不作介绍了。我们对三个web中没有的事情作一下介绍。

  • longpress(长按事件):如果一个组件被绑定了 longpress 事件,那么当用户长按这个组件时,该事件将会被触发。

  • Appear(屏幕内事件):如果一个位于某个可滚动区域内的组件被绑定了 appear 事件,那么当这个组件的状态变为在屏幕上可见时,该事件将被触发。

  • Disappear(屏幕外事件):如果一个位于某个可滚动区域内的组件被绑定了 disappear 事件,那么当这个组件被滑出屏幕变为不可见状态时,该事件将被触发。

简单的讲解过后,从这篇文章开始,我们将更多的去关注官方文档,因为weex还是一个新生儿,在不断的变化。所以我讲的课程也许会很快就过时或者情况不一样了。所以从这节开始我也带着大家试着读一下文档。这里有一个例子,大家可以拷贝下来看一下,都很简单,我就不带着大家敲了。

animation动画模块

动画的运用会为我们的移动开发增光不少,weex为我们提供了animation组件。我们一边敲程序,一边讲解animation的用法。然后敲出来后,我再带着你看一遍官方文档。如果你对web 的animation动画比较了解,那学习起来就会比较容易。

模块的掌握是要有良好的js基础的,如果你学这个还感觉有些困难,那证明你需要加强javascript的基础了。

第15节:教会你自学weex

通过14节课的讲解,我相信大家一定都已经入门了。对于一个知识的学习,并不是一套视频可以让你成为真正的高手的,视频只能领你入门,特别是对于一个还不成熟的技术,变化相当快,所以有自己看文档和自学的能力非常重要。

这节课就教你如何查看文档,并自学几个常用的模块。(所以这节课视频很重要,文章的内容会很少。)

自学通道

官方文档:weex.apache.org

学习一个新技术的最重要途径就是看官方网站和文档,所以你必须要经常性的查看官方网站和文档。我们就用自学的方式看一下picker模块。

picker模块:

picker是weex调用原生的时间选项功能,感觉很重要,但是在实际开发中我们很少用,因为这个事件选项实在是太丑了,在这个看脸的时代,这种模块是没办法使用的,所以这只能算一个鸡肋模块。但是为了知识的完整性,我们还是简单的看一下。

学习步骤:

  1. 复制实例代码,如果你时间充裕,可以对照着手敲,这样能更好的理解代码。
  2. 根据API进行修改代码,尽量把所有API知识都用到。
  3. 想一个跟知识有关的小例子,撸一下代码。这样才能遇到问题解决问题。

我们就用这个方法,开学习一下picker模块。

clipboard模块

这个模块主要操作的是剪贴板,如果你觉的剪贴板不好理解,你可以简单认为是控制复制和粘贴功能的。这个功能经常用在分享上,比如我们的腾讯视频就有这样的分享功能。那这个模块我再带着大家学习一下。

总结:这节课的内容是你以后学习的关键,我相信weex以后会有很好的发展,并快速更新。你学会这节课的方法后,剩下的内容都可以进行简单的自学。也给大家留个小作业,就是把剩下的模块自学一下,有什么问题可以在微信群里向我提问。

第16节:Navigator和webview模块

通过上节课的学习,你一定对自学有了一点认识。那这节课我们再继续讲解两个重要点的模块Navigator模块和webview模块。

Navigator模块

这个就是原生系统上的前进和后退,里边的方法也很简单。只有两个方法。

  • push:把一个weex页面URL压入导航堆栈中,可指定在页面跳转时是否需要动画,以及操作完成后需要执行的回调函数
  • pop:把一个 Weex 页面 URL 弹出导航堆栈中,可指定在页面弹出时是否需要动画,以及操作完成后需要执行的回调函数。

作个例子演示一下。

webview模块

webview是一系列的操作,必须和web组件配合使用。包括goback,goForward,reload。注意的是webview必须和<web>组件共用。

它有三个方法需要我们掌握:

  1. goBack:相当于浏览器里的后退。
  2. goForward:相当于浏览器里的前进。
  3. reload:刷新页面。

会了这上个方法,我们就可以很简单的使用我们webview模块了,但还是要记得模块必须先引入才能使用。下面是官方的一个例子,我们可以敲一下,加深一下印象。

相信通过自学和这节课的详细学习,你对weex已经了解的差不多了。其实在实际开发中,我们也是利用weex做一些原生的功能开发,主要内容还是放到网页上完整的,原因很多,毕竟weex还不够成熟和强大。

第17节:vue-router的使用

weex中vue-router的使用和我们在vue中的vue-router一模一样。我在这里就简单给大家说说。并讲一些避坑的方法,可以少走一些弯路。

模式的使用有坑:

经过我的测试,路由的三个模式:hash,history,abstract只有我们的abstract是可以使用的,其它使用都会出现问题。

router-link不能再使用

以前在写vue时,我们经常使用<router-link>标签进行连接跳转。

但是在weex当中这种形式是不可以使用的,要使用编程式导航的形式进行跳转。

总结:这节课算是我们的最后一节知识课了,大家通过17节课的入门,可以说对weex 算是一个入门了,如果要想提高成为一个高手,你需要做实例和在实际工作中进行使用。如果你的课程中有什么疑问,你可以在微信群里进行提问,如果回答特别长,我还可以增加2-3节课程,用来答疑。

最后谢谢你能一直看完这篇教程,一直陪着技术胖一起学习进步,我也会更努力的出前端视频,帮助更多的前段小伙伴学习前端知识。祝大家工作顺利,心想事成。

 

 

感谢以下人员在课程录制中捐款了37元。

单人行 东鹏 杨小羊 、(昵称就是点) 罂墓花盗
Rona 淡眼云烟 Kelvin 攻城狮小白 吃火锅的土豆
熊炜จุ๊บ Calidi 不若吃茶去 X_wing 石头
Sunshine 陈梦 ⁰ 小鑫鑫 小熊猫眼 逆流星宇
十月弓虽 金亮亮 哎呦喂 陈小龙 王叶振
blackpink  peach  磐石  Hailey Ling  听见下雨的声音
皇上不纳妾 叶子  辉仔  奥古  了然
简爱  卡卡  亮!  海风  Yuyi_guo
杨石 Jason Zhao  Jason  老黑  麻继钧
张凯zk 晚黎  远远在身边  看热闹不嫌事大  阳光
小☆康†  江矿宝宝.  粽子  Zhaoyong  Carpe dime
风清扬 MC.vep JUN  A+ 韩瑜  Raytimmer
农夫  小☆康†  胖子

 

 

未经允许不得转载:技术胖-胜洪宇关注web前端技术 » WEEX免费视频教程-从入门到放肆
分享到: 更多 (0)

评论 78

  1. #51

    胖哥怎么加群呀,我打赏了。记得拉我进群

    匿名3周前 (07-02)回复
  2. #50

    modal alert点击ok 怎么拿到点击事件进行跳转页面

    匿名4个月前 (03-24)回复
  3. #49

    我安装java 10m/s 眨了一下眼就安装好了。
    梯子太给力了

    匿名4个月前 (03-16)回复
  4. #48

    胖哥,现在的android studio已经进入3.0了,能不能用一片文章单独讲解在as3.0的版本下搭建weeX的开发环境,as升级之后,有好多的报错

    匿名5个月前 (02-20)回复
  5. #47

    胖哥能出个其他工具打包app的视频不

    匿名5个月前 (02-09)回复
    • 以后会出的,但是目前精力有限。

      技术胖5个月前 (02-09)回复
  6. #46

    胖哥,as虚拟机跑不起来,出现了一下的错误,怎么解决
    Error:Execution failed for task ‘:app:javaPreCompileDebug’.
    > Annotation processors must be explicitly declared now. The following dependencies on the compile classpath are found to contain annotation processor. Please add them to the annotationProcessor configuration.
    – weexplugin-processor-1.3.jar (com.taobao.android:weexplugin-processor:1.3)
    Alternatively, set android.defaultConfig.javaCompileOptions.annotationProcessorOptions.includeCompileClasspath = true to continue with previous behavior. Note that this option is deprecated and will be removed in the future.
    See https://developer.android.com/r/tools/annotation-processor-error-message.html for more details.

    匿名5个月前 (02-05)回复
  7. #45

    执行 weex platform add android 之后,用android studio 打开platform文件下的android文件项目,在android studio 控制台会报这个错:
    Error:(24, 0) Cannot set the value of read-only property ‘outputFile’ for ApkVariantOutputImpl_Decorated{apkData=Main{type=MAIN, fullName=debug, filters=[]}} of type com.android.build.gradle.internal.api.ApkVariantOutputImpl.
    Open File
    上面那个小三角是灰色的,不能运行项目,虚拟机配置好了打开虚拟机中也没有weex 的app,一直卡在这,不上不下的真难受,坑真多

    匿名6个月前 (02-04)回复
  8. #44

    weex项目结构变了,可以出一下weex使用vue-router和vuex的教程吗

    匿名6个月前 (02-02)回复
    • 暂时不会出了。我们公司现在已经放弃使用weex了,我也放弃了研究。

      技术胖5个月前 (02-06)回复
      • 为什么放弃weex,现在用什么产品开发webapp?

        匿名5个月前 (02-13)回复
        • 我们现在用的是Cordova,但是大部分都在用RN来开发。

          技术胖5个月前 (02-13)回复
  9. #43

    第三节时 一直卡在 Android Studio 出现building project name gradle project info 进行不下去了 怎么办啊 好想学后面的 学不到了

    匿名6个月前 (01-29)回复
    • 这个主要是你的开发环境没有安装好,产生这个问题的原因是墙的问题。
      你可以用下载后更新,或者配置科学上网解决。

      技术胖6个月前 (01-30)回复
  10. #42

    初始化的项目在浏览器上打开,没有手机那个模型,其他都正常显示,是因为更新了吗?

    匿名6个月前 (01-20)回复
    • 可能是版本问题,或者包没下载全,需要你自己逐一排查。技术胖祝你学习愉快。

      技术胖6个月前 (01-21)回复
  11. #41

    胖,我在第四节weex常用命令和热更新的时候我用浏览器浏览的时候为什么是空白的?而且我是跟你一样的步骤用命令行建的项目,然后我对比了一下,我建出来的目录结构跟你的不一样,就比如下面有个weex.html的文件我的就没有,这是为什么?

    匿名6个月前 (01-16)回复
  12. #40

    胖哥 用weex做了一个界面,用slide嵌套5个页面.每个页面都包含一个Scroller. Croller支持refresh的下拉更新.发现在前两个页面下拉显示ok,第一第二个 可以实现 refresh ,loading也是一样 的

    匿名6个月前 (01-12)回复
  13. #39

    胖神,你好!视频不错!很感谢能跟着您学习知识! 最近在看有关weex方面的,跟着您的视频学习,遇到点问题,想让您帮忙解答下!使用weex init 创建的项目,npm run dev和 npm run serve后,打开浏览器输入地址后,显示的手机界面是空白。无论怎么该,都不出现界面!不知道是什么地方有问题!希望解疑下!多谢了!

    匿名6个月前 (01-10)回复
  14. #38

    胖哥 问下用weex init 创建项目和 weex create创建的项目都一样了 怎么定时的修改页面后打包就网页端就没升级的框了 要怎么处理呢 !

    匿名7个月前 (01-04)回复
  15. #37

    不是Android Studio 3.0问题是gradle版本问题,不升级即可

    匿名7个月前 (01-03)回复
  16. #36

    新创建的项目,打开首页只出现文字Hello World. 跟正常的首页不一样没有图片啥的,是怎么回事

    匿名7个月前 (01-03)回复
    • 哥们你还好有字,我的啥都没,就是一个白板版。。。。。

      匿名6个月前 (01-16)回复
  17. #35

    Android Studio 3.0之后 会报错

    匿名7个月前 (01-03)回复
  18. #34

    胖哥你好,看了你的教程感觉讲的很好,就自己跟着做了下,我使用 create 创建好环境后在index.vue里面写了一个 div 标签,设置了这个标签的宽度为 750px ,但是预览的时候发现它的宽度并不能根据屏幕的大小来缩放,这个是什么原因呢?

    匿名7个月前 (12-29)回复
    • 请问解决了吗,我也遇到了

      匿名7个月前 (01-05)回复
      • 我现在的做法就是使用 组件 的形式引入到页面当中就可以自适应了

        匿名6个月前 (01-10)回复
  19. #33

    胖哥,我下载的你链接上的Android-studio 没有sdk 也是600多m 这是什么原因 到现在还没有配置环境变量

    匿名7个月前 (12-27)回复
  20. #32

    胖哥 那个Android-studio怎么没有像你下载的没有sdk版的呢 我下载的那个是600多M的

    匿名7个月前 (12-23)回复
    • 你解决了吗?我和你一样 我是今天才下载的 也是600多m 没有sdk 也没有找到带sdk的

      匿名7个月前 (12-27)回复
      • 找一个带sdk的呗

        匿名6个月前 (01-29)回复
    • 都是683MB的无sdk的,自己下载sdk,不知道如何安装的android-studio.

      匿名4个月前 (03-22)回复
  21. #31

    胖哥,请教一下,官网提供的 weexpack build android 无法打包是因为什么原因,一直显示 building?我的电脑安装不了AS,请教一下,如何 使用终端打包,谢谢

    匿名7个月前 (12-19)回复
    • 可以试着使用科学上网,这里不作更多的介绍。

      技术胖7个月前 (12-22)回复
  22. #30

    胖哥,你好,我按你的步骤初始化weex项目,run serve的时候页面可以正常展示,但是报
    [WDS] Errors while compiling. Reload prevented.和
    webpack-dev-server.js:1 index.web.js from UglifyJs
    Unexpected token: name (urlParts) [index.web.js:331,4],
    你知道是什么原因吗?

    匿名7个月前 (12-18)回复
    • 使用npm安装依赖

      匿名7个月前 (12-29)回复
  23. #29

    胖哥哥,android studio 打开安卓项目时总是提示:gradle resolve dependencies ‘:classpath’怎么解决?

    匿名7个月前 (12-13)回复
  24. #28

    胖哥哥,您好!我的是用android stio 打开项目时,总是一直卡在“Gradle:Resolve dependencies’:classpath’”,求指点

    匿名7个月前 (12-13)回复
  25. #27

    gradle:resolve dependencies ‘:classpath’不动了,求解决

    匿名7个月前 (12-13)回复
  26. #26

    胖哥哥,您好!我按照你的教程搭建环境。安装玩虚拟机后并没有出现weex,并且点击右三角形中edit configuration中app上方出现了一个X。这是怎么回事呢?求指点,谢谢

    匿名7个月前 (12-07)回复
  27. #25

    胖哥的很好,谢啦!!☆⌒(*^-゜)

    匿名8个月前 (12-04)回复
    • 你在这里学到东西,真心为你高兴,以后我们一起学习。

      技术胖8个月前 (12-04)回复
  28. #24

    胖哥您好,下载的Android studio里面不含SDK,需要单独下载SDK,然后配置环境变量吗?

    匿名8个月前 (11-30)回复
  29. #23

    现在做的weex界面跳转到H5页面里面,然后再H5点击返回按钮回到weex页面该用那种方式去做跳转?

    dapeng9个月前 (10-31)回复
  30. #22

    胖哥您好,我在创建项目的时候遇到如下错误,网上也找不到,不知道您是否有好的建议?
    E:\Weex Projects>weex create helloWeex
    C:\Users\Administrator\.xtoolkit\node_modules\weexpack\node_modules\q\q.js:126
    throw e;
    ^

    Error: spawn ENAMETOOLONG
    at _errnoException (util.js:1019:11)
    at ChildProcess.spawn (internal/child_process.js:325:11)
    at exports.spawn (child_process.js:494:9)
    at UpdateNotifier.check (C:\Users\Administrator\.xtoolkit\node_modules\weexpack\node_modules\update-notifier\index.js:64:2)
    at module.exports (C:\Users\Administrator\.xtoolkit\node_modules\weexpack\node_modules\update-notifier\index.js:124:17)
    at checkForUpdates (C:\Users\Administrator\.xtoolkit\node_modules\weexpack\build\cli.js:68:20)
    at cli (C:\Users\Administrator\.xtoolkit\node_modules\weexpack\build\cli.js:218:3)
    at C:\Users\Administrator\.xtoolkit\node_modules\weexpack\build\cli.js:111:12
    at _fulfilled (C:\Users\Administrator\.xtoolkit\node_modules\weexpack\node_modules\q\q.js:787:54)
    at self.promiseDispatch.done (C:\Users\Administrator\.xtoolkit\node_modules\weexpack\node_modules\q\q.js:816:30)

    ZXG9个月前 (10-29)回复
  31. #21

    胖哥,我一开始写的页面全部是在index.vue里面的,后面为了方便开发与管理,就把页面全部拆分出去了,通过引入组件的方式完成页面。但是现在集成到安卓模拟器上的时候一片空白,dist文件下的index.js里面也是没有自己写的内容了。是不是页面分离之后,weex项目就不自动打包了?还是需要配置什么东西。

    大鹏9个月前 (10-13)回复
  32. #20

    请问:在第三章 项目建立的时候 使用android studio打开新建的项目时 出现
    Error:Failed to find target with hash string ‘android-23’ in: D:\android-sdk-windows
    Install missing platform(s) and sync project
    错误。

    波波1239个月前 (10-12)回复
  33. #19

    胖胖哥,用webstorm开发也可以吧?

    刘琦9个月前 (10-10)回复
    • 当然是可以的。只是个编辑器而已。

      技术胖9个月前 (10-12)回复
  34. #18

    胖哥,npm run serve的时候报错 ERROR in index.web.js from UglifyJs
    Unexpected token: name (urlParts) [index.web.js:3700,4]
    网上搜了加入babel-preset-es2015插件,还是报错

    10个月前 (09-27)回复
    • 这个问题我也一直在想办法解决,但是没有很好的解决方法,webpack大神给我解释就是开发环境和生产环境冲突造成的。我在下一节课中给了解释。
      希望你继续探索,有了更好的解决方法,即时留言,共同进步。

      技术胖10个月前 (09-27)回复
      • 胖哥,刚开始学习也遇到了同样的问题,就是跑不起来,刚看到第三节的视频,您说在下一节课中给了解释,能告知是哪一节吗?想先看下怎么解决,谢谢~~

        Mandy9个月前 (10-25)回复
    • 使用 npm 来重新安装依赖就可以了,cnpm 安装会报这个错的

      匿名6个月前 (01-10)回复
  35. #17

    胖哥,如果只会前端开发不会安卓开发,能不能上手weex

    Tim10个月前 (09-15)回复
  36. #16

    weex 的weex init 目录更新了,但是文档没有更新,然后modal。toast使用的时候会报错说是toast未定义,这个怎么解决呢?内置模块需要手动下载什么组件吗

    10个月前 (09-15)回复
  37. #15

    页面之间跳转的话数据怎么传递和接收啊

    xl10个月前 (09-14)回复
  38. #14

    请问:weex怎么打包H5, 编译后的js文件,怎么和H5整合?

    cc10个月前 (09-11)回复
  39. #13

    你们好,教程里面Navigator跳转的js bundle怎么生成的,不是新建一个vue文件界面 这个是怎么生成js文件

    yoyo10个月前 (09-08)回复
  40. #12

    weex可以掉用手机的接口么?比如获取通讯录信息,开启摄像头,蓝牙,手机定位等

    夕阳11个月前 (08-27)回复
    • 是有这些接口的,但是需要你有原生的程序编写能力。

      技术胖11个月前 (08-29)回复
  41. #11

    不错,感谢分享,花了两个小时,把文章过了一遍

    Zero11个月前 (08-25)回复
  42. #10

    你好,我在npm install时,node_modules文件夹中只有600多个文件,而你的有1000多个,我想两请问一下,我这是出现什么错误了吗

    11个月前 (08-24)回复
    • 跟着视频作就好,不用太纠结node_modules包的文件数量,因为有些包会不断更新变化。安装时只要关注命令行(控制台),是否出错。
      技术胖祝你学习顺利,谢谢你的支持和留言。

      技术胖11个月前 (08-24)回复
  43. #9

    胖哥.腾讯视频上你的视频怎么没看到上传者.想关注都不行

    纸飞机11个月前 (08-24)回复
    • 来网站看吧,因为这里还有文章。腾讯上没有文章的。

      技术胖11个月前 (08-24)回复
  44. #8

    技术胖:
    问下:我准备用vue2.0+vue-router+vuex+weex来做APP的项目,原生功能用weex可以支持吗?比如拍照,第三方登录,地图定位等,打包和上线的话用什么呢?

    miamin11个月前 (08-23)回复
  45. #7

    weex的话,如果想用到生产环境,最好团队有强力的开发人员,不然最好还是选择其他框架吧,深有体会。

    arron12个月前 (08-08)回复
  46. #6

    请问一下胖哥 我weex run android以后, 打开android studio, 然后run虚拟机, 下面一直提示waitng for target device to come online.
    可以求教一下原因是什么么 以前一直没搞过所以不太懂这一块

    xxl12个月前 (08-06)回复
    • 补充. 在weex run android以后, 没有关闭cmd. 显示的是webpack: success; no andriod devices found.
      但是android studio这边就是显示等待设备加入…..

      xxxl12个月前 (08-06)回复
  47. #5

    建议胖哥出react全家桶视频,还有react native视频,我一定支持。weex不太成熟,用处不大。

    zzx12个月前 (08-02)回复
    • 好的,等出完这个,就出React视频教程。我理解你的心情,但是不要着急,毕竟只是业余时间录制,最近项目紧所以进度慢。

      技术胖12个月前 (08-03)回复
  48. #4

    不是说7月31号之后免费播放吗?为啥还没有?

    aaa12个月前 (08-01)回复
    • 每周更新三集,视频还没有录完,已经更新了两集。看清楚再评论。

      技术胖12个月前 (08-02)回复
  49. #3

    你好,打开console页面上有报错,貌似写到js里面了

    c1年前 (2017-07-24)回复
  50. #2

    做这个开发,,一定要用Android Studio吗,

    小江1年前 (2017-07-20)回复
    • 不一定,我只是要用Android Studio进行调试和打包。可以用真机调试,如果你是Mac也可以自带的模拟器。

      技术胖1年前 (2017-07-20)回复
  51. #1

    问下呢,什么类型的App适合用weex开发

    a1年前 (2017-07-15)回复
    • 由于WEEX还是起步阶段所以可以用的组件比较少,但由于是阿里支持,所以电商组件还是很丰富的,所以作电商平台是比较适合的。性能比Web App高很多。

      技术胖1年前 (2017-07-15)回复