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工程

目录
相关文章
|
4月前
|
移动开发 开发框架 JavaScript
uniapp如何与原生应用进行混合开发?
uniapp如何与原生应用进行混合开发?
175 0
|
3天前
|
移动开发 前端开发 测试技术
【Flutter前端技术开发专栏】Flutter中的组件化开发基础
【4月更文挑战第30天】Flutter作为热门的UI框架,以其声明式编程和高效性能深受开发者喜爱。本文聚焦Flutter的组件化开发,阐述组件化开发的代码复用、模块化、团队协作和测试便利等优势。在Flutter中,所有元素几乎都是组件,包括简单按钮到复杂布局。通过继承`StatelessWidget`或`StatefulWidget`创建自定义组件,如示例中的`CustomButton`。组件通过`build`方法构建,并可在其他组件中嵌套使用。理解并掌握组件的样式、布局及使用,对于提升Flutter开发技能至关重要。
【Flutter前端技术开发专栏】Flutter中的组件化开发基础
|
3天前
|
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初学者提供了快速入门的指导。
【Flutter前端技术开发专栏】Flutter入门指南:搭建开发环境与第一个应用
|
3天前
|
传感器 前端开发 Android开发
【Flutter 前端技术开发专栏】Flutter 中的插件开发与集成
【4月更文挑战第30天】本文探讨了Flutter插件开发的关键技术和实践,包括插件作为连接Flutter与原生功能桥梁的角色,开发流程(定义接口、实现原生代码、打包发布),以及集成方法(添加依赖、初始化)。文中提到了多媒体、传感器和文件系统等常见插件类型,并以相机插件为例说明开发步骤。此外,还强调了版本兼容性、性能优化和错误处理的注意事项,推荐了开发工具和资源。随着Flutter的发展,插件开发将更加重要,未来有望形成更丰富的生态系统。
【Flutter 前端技术开发专栏】Flutter 中的插件开发与集成
|
8天前
|
Dart Java Android开发
Flutter插件开发:开发与使用的技术解析
【4月更文挑战第26天】本文详细介绍了Flutter插件开发,包括创建插件项目、编写原生代码(Android和iOS)、注册与使用插件。通过Flutter命令行工具生成插件,使用MethodChannel进行Dart与原生平台的通信。示例展示了如何获取设备信息并展示在Flutter应用中。文章还提到插件测试与发布,强调了兼容性与性能的重要性,指出Flutter插件是扩展应用功能的关键。
|
Web App开发 移动开发 JavaScript
Weex调试神器——Weex Devtools使用手册
伴随着weex的正式开源,对一款针对weex框架的简单易用的调试工具的呼声也日趋强烈。weex devtools就是为weex前端和native开发工程师服务的一款调试工具,可同时检查weex里DOM属性和Javascript 代码断点调试,支持IOS和Android两个平台。
20278 0
|
4月前
|
移动开发 开发框架 前端开发
移动端混合开发技术探析:React Native、Weex、Flutter的比较与选择
随着移动应用开发的高速发展,混合开发技术成为了一种备受关注的选择。本文将对移动端混合开发技术中的React Native、Weex和Flutter进行比较与探讨,分析它们在性能、开发体验、生态系统和跨平台支持等方面的差异,以及如何根据项目需求进行选择。
67 1
|
6月前
|
开发框架 小程序 JavaScript
微信小程序wepy框架入门教程-搭建开发环境(一)
微信小程序wepy框架入门教程-搭建开发环境(一)
181 0
|
12月前
|
移动开发 小程序 前端开发
【前端】taro 跨端应用环境搭建
【前端】taro 跨端应用环境搭建
11995 1
|
资源调度 前端开发 JavaScript
微前端框架 qainkun 初体验
qiankun是蚂蚁开源的基于single-spa的一款微前端框架,旨在帮助大家能更简单、无痛的构建一个生产可用微前端架构系统。
314 0