weex教程(未完成)

发表于 | 分类于 | 阅读次数:

参考:
week官方文档

简介

Weex 是使用流行的 Web 开发体验来开发高性能原生应用的框架。

Weex 致力于使开发者能基于通用跨平台的 Web 开发语言和开发经验，来构建 Android、iOS 和 Web 应用。简单来说，在集成了 WeexSDK 之后，你可以使用 JavaScript 语言和前端开发经验来开发移动应用。

Weex 渲染引擎与 DSL 语法层是分开的，Weex 并不强依赖任何特定的前端框架。目前 Vue.js 和 Rax 这两个前端框架被广泛应用于 Weex 页面开发，同时 Weex 也对这两个前端框架提供了最完善的支持。Weex 的另一个主要目标是跟进流行的 Web 开发技术并将其和原生开发的技术结合，实现开发效率和运行性能的高度统一。在开发阶段，一个 Weex 页面就像开发普通网页一样；在运行时，Weex 页面又充分利用了各种操作系统的原生组件和能力。

概述

想初步了解 Weex 其实非常简单。

  1. 安装WeexPlayground,在 Playground 里，你可以打开各种示例。
  2. 访问 Weex online playground. 在这个网站上，你可以浏览、修改、新建各种基于 Vue.js 的单页面例子，并用 WeexPlayground 应用扫码查看实时效果。

这里有一个使用 Weex 和 Vue.js 开发的最简单的例子。你可以大致了解 Weex 是如何工作的。

1
2
3
4
5
6
7
8
9
10
11
12
13
<template>
  <div style="justify-content: center">
    <text class="freestyle">Yo</text>
  </div>
</template>

<style scoped>
  .freestyle {
    color: #41B883;
    font-size: 233px;
    text-align: center;
  }
</style>

在 <template> 部分，包含了 <div> 元素，这个被广泛应用于 Web 页面中，在 Weex 里它也是一个通用的容器。<text> 元素就和普通的 HTML 不太一样了，它提供了显示文本的能力，在 Weex 上，所有文本必须放在 <text> 标签中。

在

0%