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

目录
相关文章
|
11月前
|
移动开发 开发框架 JavaScript
uniapp如何与原生应用进行混合开发?
uniapp如何与原生应用进行混合开发?
778 0
|
开发框架 Dart 前端开发
从零到应用:我的Flutter项目开发之旅
Flutter是一种流行的跨平台移动应用开发框架,由Google推出。它使用Dart编程语言,通过单一代码库可以同时构建iOS和Android应用。Flutter具有许多吸引力的特性,如快速的渲染性能、漂亮的用户界面、丰富的组件库以及热重载等。通过阅读这篇文章,你将获得一些关于Flutter项目开发的实际指导,可以帮助你更有效地构建高质量的移动应用程序。无论你是初学者还是有一定经验的开发者,希望这些笔记能够为你提供一些有用的思路和技巧,让你在Flutter项目开发中取得更好的成果。
|
11月前
|
前端开发 JavaScript Android开发
跨端技术栈综合考察:深入剖析 UniApp、Flutter、Taro 和 React Native 的优势与限制
跨端技术栈综合考察:深入剖析 UniApp、Flutter、Taro 和 React Native 的优势与限制
|
8月前
|
存储 开发工具 Android开发
打造你的专属安卓应用:从零开始的Flutter之旅
【8月更文挑战第31天】在数字时代的浪潮中,拥有一款属于自己的应用不仅是梦想的启航,也是技术实力的展现。本文将引导你使用Flutter框架,轻松步入安卓应用的开发世界。无论你是编程新手还是希望拓展技能边界的开发者,跟随这篇指南,你将学会如何搭建开发环境、设计用户界面,并实现基本功能。让我们一起探索代码的力量,开启一段创造之旅吧!
|
11月前
|
Dart Java Android开发
Flutter插件开发:开发与使用的技术解析
【4月更文挑战第26天】本文详细介绍了Flutter插件开发,包括创建插件项目、编写原生代码(Android和iOS)、注册与使用插件。通过Flutter命令行工具生成插件,使用MethodChannel进行Dart与原生平台的通信。示例展示了如何获取设备信息并展示在Flutter应用中。文章还提到插件测试与发布,强调了兼容性与性能的重要性,指出Flutter插件是扩展应用功能的关键。
|
移动开发 小程序 前端开发
【前端】taro 跨端应用环境搭建
【前端】taro 跨端应用环境搭建
12125 2
|
资源调度 前端开发 JavaScript
微前端框架 qainkun 初体验
qiankun是蚂蚁开源的基于single-spa的一款微前端框架,旨在帮助大家能更简单、无痛的构建一个生产可用微前端架构系统。
435 0
|
存储 监控 JavaScript
基于vue + electron创造一个随心开发组件的跨端桌面应用(持续更新~)(二)
下面我会从这个应用的一些功能的实现细节讲起,包括初始化,托盘菜单,开机自启,存储用户数据,GitHub信息健康,翻页时钟,打包配置除此之外还有还有项目的使用方式与功能介绍,希望可以给掘友带来帮助。
364 0
基于vue + electron创造一个随心开发组件的跨端桌面应用(持续更新~)(二)
|
存储 缓存 监控
基于vue + electron创造一个随心开发组件的跨端桌面应用(持续更新~)(一)
下面我会从这个应用的一些功能的实现细节讲起,包括初始化,托盘菜单,开机自启,存储用户数据,GitHub信息健康,翻页时钟,打包配置除此之外还有还有项目的使用方式与功能介绍,希望可以给掘友带来帮助。
263 0
|
存储 Dart 前端开发
Day05 - Flutter开发初体验
Day05 - Flutter开发初体验
198 0
Day05 - Flutter开发初体验
下一篇
oss创建bucket