Java基础、中级、高级、架构面试资料
    你的位置：业余草 > HTML5 > 阿里巴巴跨平台移动开发工具Weex入门教程

    阿里巴巴跨平台移动开发工具Weex入门教程

    HTML5 herman 4592浏览 0评论
    公告：“业余草”微信公众号提供免费CSDN下载服务(只下Java资源)，关注业余草微信公众号，添加作者微信：xttblog2，发送下载链接帮助你免费下载！
    本博客日IP超过2000，PV 3000 左右，急需赞助商。
    极客时间所有课程通过我的二维码购买后返现24元微信红包，请加博主新的微信号：xttblog2，之前的微信号好友位已满，备注：返现
    受密码保护的文章请关注“业余草”公众号，回复关键字“0”获得密码
    所有面试题(java、前端、数据库、springboot等)一网打尽，请关注文末小程序
    视频教程免费领
    腾讯云】1核2G5M轻量应用服务器50元首年，高性价比，助您轻松上云

    阿里巴巴在今年4月21日的Qcon大会上宣布开源跨平台移动开发工具Weex，Weex能够完美兼顾性能与动态性，让移动开发者通过简捷的前端语法写出Native级别的性能体验，并支持iOS、安卓、YunOS及Web等多端部署。Weex工具主要解决了频繁发版和多端研发两大痛点，同时解决了前端语言性能差和显示效果受限的问题。开发者只需要在自己的APP中嵌入Weex的SDK，就可以通过撰写HTML/CSS/JavaScript来开发Native级别的Weex界面。Weex界面的生成码其实就是一段很小的JS，可以像发布网页一样轻松部署在服务端，然后在APP中请求执行。

    Weex与React Native、Cordova对比

    Weex更加轻量，体积小巧。因为基于web conponent标准，使得开发更加简洁标准，方便上手。Native组件和API都可以横向扩展，方便根据业务灵活定制。Weex渲染层具备优异的性能表现，能够跨平台实现一致的布局效果和实现。对于前端开发来说，Weex能够实现组件化开发、自动化数据绑定，并拥抱Web标准。同时Weex由阿里巴巴开源，更适合国人的开发习惯。

    Weex的特点

    1. 致力于移动端，充分调度 native 的能力
    2. 充分解决或回避性能瓶颈
    3. 灵活扩展，多端统一，优雅“降级”到 HTML5
    4. 保持较低的开发成本和学习成本
    5. 快速迭代，轻量实时发布
    6. 融入现有的 native 技术体系
    7. 工程化管理和监控等
    8. 轻量：体积小巧，语法简单，方便接入和上手
    9. 可扩展：业务方可去中心化横向定制组件和功能模块
    10. 高性能：高速加载、高速渲染、体验流畅

    Weex安装

    Weex工具链使用Node.js构建的。因此在安装Weex工具前，我们需要先安装Node.js。等待Node.js安装成功后,执行npm install -g weex-toolkit命令安装Weex Toolkit命令来安装Weex命令行程序。

    在weex-toolkit安装结束后，通过在命令行窗口执行 weex 命令来检查工具是否安装正确。仅仅输入weex并敲击回车后，看到如下内容则表示安装正确。 

    Usage: weex foo/bar/your_next_best_weex_script_file.we  [options]

Options:
  --qr     display QR code for native runtime, 
  -o,--output  transform weex we file to JS Bundle, output path (single JS bundle file or dir)
  -s,--server  start a http file server, weex .we file will be transforme to JS bundle on the server , specify local root path using the option  
  ......
  --help  Show help  

    注：可以使用weex –version 命令来检查weex-toolkit的版本。

    Weex入门程序

    我们新建一个helloweex.we的文件，并保存以下内容到该文件： 

    <template>
  <div>
    <text>Hello Weex Code By 业余草</text>
  </div>
</template>

    通过命令行工具，我们跳转到helloweex.we文件所在的目录，执行weex helloweex.we命令。这时，系统默认浏览器会打开一个新的标签页展示helloweex.we的执行效果。(weex-toolkit版本必须大于0.1.0)

    Weex语法

    Weex代码通常都有由三部分构成： template (模板)， style (样式) 和 script (脚本) 。这三个概念之于Weex就如 html，css，javascript 之于Web。

    模板部分赋予Weex以骨架，由标签以及标签包围的内容构成。Weex中的标签分为开放标签(eg: )和闭合标签(eg: )两种，我们把每一对开放&闭合标签称为一组Weex标签。标签中能添加 属性 ，不同的 属性 有不同的含义，例如 class属性让同样的样式可以作用于多组Weex标签， onclick 属性让标签能对用户点击事件作出回应。
    样式部分描述Weex标签如何显示。Weex中的样式尽量和CSS标准一致。Weex支持很多CSS中的特性： margin, padding, fixed…… 更好的是， flexbox布局模型在Weex中有着很好的支持。
    脚本部分为Weex标签添加数据与逻辑，在这里你能方便的访问本地和远程的数据并更新标签。你还能定义方法并让这些方法响应不同的事件。Weex脚本的组织方式基本遵循于CommonJS module规范。

    更多语法建议大家到官网上进行学习，我这里就不一一介绍了。

    添加Weex内置组件

    Weex提供很多内置组件。Slider(滑动器)在移动App和页面中很常见，所以我们提供了一个内置的Slider组件让你能在自己的界面里轻松的添加一个滑动器。修改helloweex.we文件，修改完成后根据Weex的特性，不需要重新编译，直接刷新浏览器即可看到效果： 

    <template>
  <div style="flex-direction: column;">
    <slider class="slider" interval="{{intervalValue}}" auto-play="{{isAutoPlay}}" >
      <div class="slider-pages" repeat="{{itemList}}" onclick="goWeexSite" >
        <image class="thumb" src="{{pictureUrl}}"></image>
        <text class="title">{{title}}</text>
      </div>
    </slider>
  <div class="container" onclick="goWeexSite" >
    <div class="cell">
        <image class="thumb" src="http://www.xttblog.com"></image>
        <text class="title">业余草</text>
    </div>
    <div class="cell">
        <image class="thumb" src="http://www.xttblog.com"></image>
        <text class="title">涛哥</text>
    </div>
    <div class="cell">
        <image class="thumb" src="http://www.xttblog.com"></image>
        <text class="title">xttblog C</text>
    </div>
  </div>
  <div>
    <text>Hello Weex Code By 业余草</text>
  </div>
</template>
<style>
  .cell { margin-top:10 ; margin-left:10 ; flex-direction: row; }
  .thumb { width: 200; height: 200; }
  .title { text-align: center ; flex: 1; color: grey; font-size: 50; }
  .slider {
    margin: 18;
    width: 714;
    height: 230;
  }
  .slider-pages {
    flex-direction: row;
    width: 714;
    height: 200;
  }
</style>
<script>
module.exports = {
    data: {
      intervalValue:"1000",
      isShowIndicators:"true",
      isAutoPlay:"true",
      itemList: [
        {title: '业余草', pictureUrl: 'http://www.xttblog.com'},
        {title: '涛哥', pictureUrl: 'http://www.xttblog.com'},
        {title: 'xttblog', pictureUrl: 'http://www.xttblog.com'}
      ]
    },
    methods: {
      goWeexSite: function () {
        this.$openURL('http://www.xttblog.com')
      }
    }
}
</script>

    好了，入门程序就到这来吧！陆续还会给大家分享一些Weex如何集成IOS和Android等知识和文章，希望大家喜欢！

    版权声明：本文为博主原创文章，未经博主允许不得转载。

    业余草公众号

    最后，欢迎关注我的个人微信公众号：业余草（yyucao）！可加作者微信号：xttblog2。备注：“1”，添加博主微信拉你进微信群。备注错误不会同意好友申请。再次感谢您的关注！后续有精彩内容会第一时间发给您！原创文章投稿请发送至532009913@qq.com邮箱。商务合作也可添加作者微信进行联系！

    本文原文出处：业余草： » 阿里巴巴跨平台移动开发工具Weex入门教程

    相关文章推荐