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

目录
相关文章
|
存储 算法 大数据
内存原理 | 内存分配 | 内存对齐
内存原理 | 内存分配 | 内存对齐
|
1月前
|
人工智能 弹性计算 智能设计
阿里云PAI人工智能平台计费说明:按量计费/节省计划/包年包月/资源包/按推理时长计费说明
阿里云PAI平台提供按量计费、包年包月、资源包、节省计划及按推理时长计费五种模式,适用于不同场景。按量适合短期测试,包年包月适合长期稳定使用,资源包和节省计划可降成本,按推理时长适配弹性负载。结合实际需求选择更划算。
582 10
|
存储 JavaScript 前端开发
使用JavaScript构建动态交互式网页:从基础到实践
【10月更文挑战第12天】使用JavaScript构建动态交互式网页:从基础到实践
589 1
|
6月前
|
存储 数据采集 安全
一文深入了解RFID与条码技术的差异
RFID与条码技术都是用于物体信息识别的重要手段,但两者在工作原理、数据存储、读取方式、速度、耐用性、成本及安全性等方面存在显著差异。条码依赖光学扫描,成本低但易受环境影响,数据量有限;RFID通过射频信号传输,具备更大存储容量、非接触式读取、快速多标签处理能力以及更高安全性,适合复杂环境。根据实际需求选择合适技术,二者均为物联网时代物品识别的关键工具。
|
7月前
|
网络协议 安全 API
skynet.dispatch 使用详解
skynet.dispatch 使用详解
320 2
|
前端开发 JavaScript API
前端框架对比和选择
前端框架对比和选择
|
8月前
|
弹性计算 运维 安全
课时1:第1天:云服务器ECS是什么
云服务器ECS是阿里云提供的弹性计算服务,支持快速构建稳定、安全的应用。其核心特点包括:1. 简单高效、弹性伸缩;2. 作为应用的基础运行环境;3. 提供纵向和横向扩展能力;4. 拥有高稳定性(99.95%)、数据安全性(99.99%)及自动宕机迁移等优势;5. 免费提供DDoS防护等安全措施,降低运维成本,提升业务连续性。
250 0
|
负载均衡 网络协议 算法
|
11月前
|
开发工具 git
如果使用git产生了冲突,你是怎么解决的?
在团队开发中,若多人同时修改同一代码位置,拉取时可能会产生冲突。解决冲突需及时与同事沟通确认问题,并使用IDEA等工具进行版本对比,选择合适代码保留。解决步骤包括:查看冲突文件、删除多余代码及标记、使用git add标记冲突已解决、最后git commit提交修改,必要时git push推送更改。
259 6
|
机器学习/深度学习 JSON API
Python编程实战:构建一个简单的天气预报应用
Python编程实战:构建一个简单的天气预报应用
613 1