Weex环境搭建与体验

Weex 是一套简单易用的跨平台开发方案,能以 web 的开发体验构建高性能、可扩展的 native 应用,为了做到这些,Weex 与 Vue 合作,使用 Vue 作为上层框架,并遵循 W3C 标准实现了统一的 JSEngine 和 DOM API,这样一来,你甚至可以使用其他框架驱动 Weex,打造三端一致的 native 应用。
官网:https://weex-project.io/cn/
Github:https://github.com/apache/incubator-weex

环境搭建

1. 安装node.js

官网 下载安装

2. 安装weex-toolkit

npm install -g weex-toolkit

如果遇到权限问题,在命令前面加sudo
安装后检查有没有安装成功:

weex --version

提示错误:

SyntaxError: Block-scoped declarations (let, const, function, class) not yet supported outside strict mode

原因是node.js版本太低,因为我以前安装过node.js,但是版本太低,所以需要升级

npm install -g n
n stable

weex初体验

1. 新建一个hello_world.we文件,内容如下:

<template>
  <div>
    <text>Hello world</text>
  </div>
</template>
<style></style>
<script></script>

2. 使用weex渲染文件

weex hello_world.we

成功后,weex会使用默认浏览器打开一个页面,页面如下

上面的hello_world.we脚本,其实是html、css、js的一个子集,weex帮我们实现了其他的部分,比如<html><head>等,最终生成了html页面。

3. 使用手机查看

下载weex playground demo, 地址:https://weex.incubator.apache.org/playground.html
打开demo,如下图


点击右上角按钮,扫描网页上的二维码,便可以打开hello_world页面。

此时如果对hello_world.we文件进行修改,demo中的页面也会自动刷新。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 2016年4月21日,阿里巴巴在Qcon大会上宣布开源跨平台移动开发工具Weex,Weex能够完美兼顾性能与动态性...
    晴天咚咚阅读 7,920评论 1 15
  • Weex 是一套简单易用的跨平台开发方案,能以 web 的开发体验构建高性能、可扩展的 native 应用,为了做...
    假装我是程序猿阅读 3,596评论 0 1
  • 引子 这篇文章是笔者近期关于Weex在iOS端的一些研究和实践心得,和大家一起分享分享,也算是对学习成果的总结。文...
    一缕殇流化隐半边冰霜阅读 14,179评论 53 165
  • 写下这个主题,我就想起了军旅歌唱家阎维文那首耳熟能详的歌曲《想家的时候》,夜深人静的时候是想家的时候,想家的时候很...
    耳朵礼阅读 3,304评论 40 5
  • 热情终究会磨灭 我们终将妥协 勇敢的人啊 坚定地走下去 我默默地祈祷着 路途不会缩短 荆棘不会倒下 但信念与日俱增...
    忧小刺阅读 2,571评论 0 0