Weex初体验

简介: 今年莫名其妙的被前端炒的特别火,混合式的开发让我们这些只会android native开发的人怎么办哟,要不,我们也学一点,跟着潮流走呗,看着工作室的人写的H5界面用的是bootstrap,咦,感觉很不错的样子,界面排版挺好的,但是感觉玩起来还是个网页,在移动端加载并没有体验特别棒的感觉,然后,就看了下vue.js的mvvm,确实挺强大的数据绑定,不过都是在摸索,之前玩过re

今年莫名其妙的被前端炒的特别火,混合式的开发让我们这些只会android native开发的人怎么办哟,要不,我们也学一点,跟着潮流走呗,看着工作室的人写的H5界面用的是bootstrap,咦,感觉很不错的样子,界面排版挺好的,但是感觉玩起来还是个网页,在移动端加载并没有体验特别棒的感觉,然后,就看了下vue.js的mvvm,确实挺强大的数据绑定,不过都是在摸索,之前玩过react native,把环境搭了一下,示例demo跑起来了,但是这个过程感觉好麻烦啊,然后搁置了一段时间,看见了阿里的weex,豪言要“Write once, run everywhere”,我这惊讶呀,看来我得玩玩你到底是个什么东西:weex首页


那接下来,先把环境搭建一下呗:

  1. 首先,安装个node环境,下图中箭头的版本

    这里写图片描述

  2. 然后下载安装,解压后是这样的

    这里写图片描述

    看到node.exe没,以后学node.js开发的时候可以用到,最近也玩了一点node,感觉还不错,npm看到没,所有关于node模块开发的,都可以用这个npm去下载moudle,将这个路径配置到环境变量中去,以后就可以在任意环境下去node或npm了。

  3. 安装weex环境
    我们在cmd窗口中输入npm install -g weex-toolkit安装weex环境,-g是全局,以后创建weex demo的时候可以在任意环境下面使用weex来创建
    这里写图片描述

  4. 安装完成后,我们来看看安装的是啥东西,你一定找不到安装在哪了是吧,别急,在安装成功的上面会有很多的信息,会提示安装路径,跟着上面找就是了,如果没找到,那就是隐藏文件夹,把他显示出来就行了
    这里写图片描述
    安装的解压目录
    这里写图片描述

  5. 好了,环境起来了,我们看看版本了,weex –version
    这里写图片描述

  6. 接下来,我们来玩demo了,创建个demo,随便找个路径执行weex init
    这里写图片描述
    执行的时候他会让你输入项目的名称prompt: Project Name: ,我输入的是weexDemo,然后等他加载文件,加载完成后就是这样的一个目录文件
    这里写图片描述
    目录结构我还是小白,等会给你们参考资料,大家看看,我们进入src文件里面看看,里面是一个weex-bootstrap.we的文件,这个就是我们要运行的文件,ok,现在基本就是跑demo的时候了

我们在src目录下执行weex weex-bootstrap.we,等待他响应,他会打开你的浏览器显示页面效果
这里写图片描述

下面一大串是服务器的监听,是node这个服务支撑起来的。


好了,浏览器的效果看见了,现在我们想在手机端看效果怎么办呢,这时候,我们需要一个playground,类似于一个手机端的运行环境,这个环境是一个apk,我们在官网上面下载下来安装到手机就好了链接,android和ios版本的都有。
打开app是这样的:
这里写图片描述
下面都是demo示例,我们没事的时候可以看看他能做出什么效果出来,现在我们先不管,我们看看右上角的扫一扫图标,首先我们在控制台这样来运行demo

把原先的代码运行关掉,重心执行命令:weex weex-bootstrap.we –qr

这里写图片描述

他会生成一个二维码,然后用这个扫一扫功能,扫一下这个二维码就可以跑起来了


对了,几个细节要说,你这个手机端网络段必须是和电脑是同一网段,不然你是访问不到的,这个仅局域网可以访问,我是电脑开wifi给手机的。

最后,给大家一些参考资料:

weex的中文文档

weex的几个小视频

weex android环境的playground源码

weex-pack初始化android和ios工程

weex-pack打包android和iso工程

目录
相关文章
|
22天前
|
移动开发 资源调度 IDE
鸿蒙Taro实战:01-搭建开发环境
本文介绍了如何使用 Taro 4.x 框架搭建鸿蒙应用开发环境。主要内容包括:下载并配置 DevEco IDE,创建鸿蒙项目,安装 Taro 4.x,初始化 Taro 项目,配置鸿蒙插件和编译配置,修改 `package.json`,运行 Taro 和鸿蒙项目。通过本文,读者可以快速上手鸿蒙应用开发。
|
6月前
|
Dart 前端开发 开发工具
【Flutter前端技术开发专栏】Flutter入门指南:搭建开发环境与第一个应用
【4月更文挑战第30天】本文介绍了Flutter SDK的安装和配置过程,以及如何创建并运行第一个Flutter应用。首先确保安装了Dart SDK和Flutter SDK,支持macOS、Linux和Windows。安装完成后,设置环境变量,然后通过`flutter doctor`验证安装。接着,使用`flutter create`命令创建新项目,进入项目目录并运行`flutter run`启动应用。在`main.dart`中修改代码以自定义应用。Flutter支持热重载和DevTools调试。本文为Flutter初学者提供了快速入门的指导。
107 0
【Flutter前端技术开发专栏】Flutter入门指南:搭建开发环境与第一个应用
|
6月前
|
传感器 前端开发 Android开发
【Flutter 前端技术开发专栏】Flutter 中的插件开发与集成
【4月更文挑战第30天】本文探讨了Flutter插件开发的关键技术和实践,包括插件作为连接Flutter与原生功能桥梁的角色,开发流程(定义接口、实现原生代码、打包发布),以及集成方法(添加依赖、初始化)。文中提到了多媒体、传感器和文件系统等常见插件类型,并以相机插件为例说明开发步骤。此外,还强调了版本兼容性、性能优化和错误处理的注意事项,推荐了开发工具和资源。随着Flutter的发展,插件开发将更加重要,未来有望形成更丰富的生态系统。
84 0
【Flutter 前端技术开发专栏】Flutter 中的插件开发与集成
|
6月前
|
Dart Java Android开发
Flutter插件开发:开发与使用的技术解析
【4月更文挑战第26天】本文详细介绍了Flutter插件开发,包括创建插件项目、编写原生代码(Android和iOS)、注册与使用插件。通过Flutter命令行工具生成插件,使用MethodChannel进行Dart与原生平台的通信。示例展示了如何获取设备信息并展示在Flutter应用中。文章还提到插件测试与发布,强调了兼容性与性能的重要性,指出Flutter插件是扩展应用功能的关键。
|
开发框架 小程序 JavaScript
微信小程序wepy框架入门教程-搭建开发环境(一)
微信小程序wepy框架入门教程-搭建开发环境(一)
246 0
|
移动开发 小程序 前端开发
【前端】taro 跨端应用环境搭建
【前端】taro 跨端应用环境搭建
12074 1
|
存储 Dart 前端开发
Day05 - Flutter开发初体验
Day05 - Flutter开发初体验
178 0
Day05 - Flutter开发初体验
|
Web App开发 JavaScript 前端开发
客户端开发(Electron)快速入门
客户端开发(Electron)快速入门
536 0
|
JavaScript 前端开发 Android开发
ReactNative-Android插件
ReactNative-Android插件
135 0
|
移动开发 JavaScript 前端开发
ReactNative开发环境的搭建与开发前准备(三)
ReactNative开发环境的搭建与开发前准备
108 0
ReactNative开发环境的搭建与开发前准备(三)
下一篇
无影云桌面