无线动态化技术方案 Weex 快速入门

这里会介绍一下 Weex 的简单入门开发方式

先睹为快

有了正文介绍的背景情况,接下来我们分享一下 Weex 的方案设计和开发方式,当然在此之前,Weex 能够做出什么样效果的界面,可以让大家先睹为快。

如果大家对今年双十一主会场的展示效果和体验还有印象的话,那就是我们 Weex 技术方案的首秀——当然这个页面已经下线了。如果大家错过了或还想再回味一下,我们有另外一个线上的页面可供参观:今天大家用手机淘宝扫码打开下面这个地址:

https://h5.m.taobao.com/weappplus/viewpage.html?page=act/neoact

不论是安卓还是 iOS 客户端,甚至是普通浏览器打开,都可以看到相同的“秋意渐浓填新装”的活动,这是目前大家可以看到的一个用 Weex 渲染出来的界面。

如何用 Weex 写出无线端动态界面

这样的界面是如何开发出来的呢?言归正传,给大家介绍一下 Weex 界面的制作过程——从最基础的写法开始

Hello World

<template>
  <text>Hello World</text>
</template>

屏幕上就会展示一段“Hello World”的文本

我们把要展示的内容放在了 <template> 的标签里,这里的内容是一个文本标签 <text>,标签里的内容正是要展示的文本。

加特技:CSS 样式

我们可以通过 style 特性给文本设置一些 CSS 样式:

<template>
  <text style="color: #ff0000;">Hello World</text>
</template>

或通过在外层增加 <style> 样式表:

<template>
  <text class="title">Hello World</text>
</template>

<style>
  .title {color: #ff0000; font-size: 48; font-weight: bold;}
</style>

现在我们加入一张图片,并且通过 flexbox 布局方式使其左右排布:

<template>
  <container>
    <image class="thumb" src="http://gw.alicdn.com/tfscom/TB1OMfAJFXXXXbfXXXXqVMCNVXX-400-400.jpg"></image>
    <text class="title">一个超赞的宝贝标题</text>
  </container>
</template>

<style>
  .thumb {width: 200; height: 200;}
  .title {flex: 1; color: #ff0000; font-size: 48; font-weight: bold; background-color: #eeeeee;}
</style>

加入交互:JavaScript 数据和方法

点击商品信息可以打开商品详情:

<template>
  <container onclick="gotoDetail">
    <image class="thumb" src="https://gd2.alicdn.com/bao/uploaded/i2/T14H1LFwBcXXXXXXXX_!!0-item_pic.jpg"></image>
    <text class="title">一个超赞的宝贝标题</text>
  </container>
</template>

<style>
  .thumb {width: 200; height: 200;}
  .title {flex: 1; color: #ff0000; font-size: 48; font-weight: bold; background-color: #eeeeee;}
</style>

<script>
  module.exports = {
    methods: {
      gotoDetail: function () {
        this.$openURL('https://item.taobao.com/item.htm?id=520421163634')
      }
    }
  }
</script>

这里的 <script> 标签是我们引入的可以用 JavaScript 定义数据和方法的地方,<template> 标签里的 onclick 事件会绑定 <script> 里的 gotoDefault() 方法,这个方法里的 $openURL(url) 是一个我们内置的 API 方法,可以打开一个网址。

数据绑定

如果同一个页面中会出现多个商品,还可以通过数据绑定的方式避免进行复用:

<template>
  <container style="flex-direction: column;">
    <container repeat="{{itemList}}" onclick="gotoDetail">
      <image class="thumb" src="{{pictureUrl}}"></image>
      <text class="title">{{title}}</text>
    </container>
  </container>
</template>

<style>
  .thumb {width: 200; height: 200;}
  .title {flex: 1; color: #ff0000; font-size: 48; font-weight: bold; background-color: #eeeeee;}
</style>

<script>
  module.exports = {
    data: {
      itemList: [
        {itemId: '520421163634', title: '宝贝标题1', pictureUrl: 'https://gd2.alicdn.com/bao/uploaded/i2/T14H1LFwBcXXXXXXXX_!!0-item_pic.jpg'},
        {itemId: '522076777462', title: '宝贝标题2', pictureUrl: 'https://gd1.alicdn.com/bao/uploaded/i1/TB1PXJCJFXXXXciXFXXXXXXXXXX_!!0-item_pic.jpg'}
      ]
    },
    methods: {
      gotoDetail: function () {
        this.$openURL('https://item.taobao.com/item.htm?id=' + this.itemId)
      }
    }
  }
</script>

这里我们通过双大括号的语法将 <template> 中要展示的特性或内容和 <script> 中的数据和方法绑定在了一起。

自定义组件 & 组件化开发

如果页面结构比较复杂之后,我们还可以通过一些自定义组件来将大的元素拆分成一个个小的元素,以此增强代码的可复用性、易读性、可扩展性:

<wx-element name="taobao-item">
  <template>
    <container onclick="gotoDetail">
      <image class="thumb" src="{{pictureUrl}}"></image>
      <text class="title">{{title}}</text>
    </container>
  </template>

  <style>
    .thumb {width: 200; height: 200;}
    .title {flex: 1; color: #ff0000; font-size: 48; font-weight: bold; background-color: #eeeeee;}
  </style>

  <script>
    module.exports = {
      data: {
        itemId: '',
        title: '',
        pictureUrl: ''
      },
      methods: {
        gotoDetail: function () {
          this.$openURL('https://item.taobao.com/item.htm?id=' + this.itemId)
        }
      }
    }
  </script>
</wx-element>

<template>
  <container style="flex-direction: column;">
    <taobao-item repeat="{{itemList}}"></taobao-item>
  </container>
</template>

<script>
  module.exports = {
    data: {
      itemList: [
        {itemId: '520421163634', title: '宝贝标题1', pictureUrl: 'https://gd2.alicdn.com/bao/uploaded/i2/T14H1LFwBcXXXXXXXX_!!0-item_pic.jpg'},
        {itemId: '522076777462', title: '宝贝标题2', pictureUrl: 'https://gd1.alicdn.com/bao/uploaded/i1/TB1PXJCJFXXXXciXFXXXXXXXXXX_!!0-item_pic.jpg'}
      ]
    }
  }
</script>

基本的 Weex 开发方式就是这些了,想主会场这样如此复杂的界面,其实也都是这样的代码组合而成的。

整个开发方式应该还是蛮简单清晰的吧,总体上是一个“傻瓜版”的 HTML / webcomponents 式开发,但可以做出 native 级别的体验。

时间: 2024-10-18 09:59:11

无线动态化技术方案 Weex 快速入门的相关文章

无线动态化解决方案总结:从WeApp到Weex

前言 入职阿里的两年时间,有幸一直从事无线动态化解决方案.从最初的WeApp,到现在的Weex,经历了WeApp的从无到有,从"辉煌"到没落,见证了Weex的崛起,在双十一主会场大放光彩.最近,工作方向有所变化,所以从技术角度谈谈个人对无线动态化的理解,同时也算是对我这两年工作的总结. 无线动态化 业务上的变化根本等不及发版解决,这也是出现动态化方案的根本原因.一套优秀的动态化解决方案应该具备: 简单.友好.强大的DSL 强大的开发工具 Debug tool Native 强大的动态能

深度揭秘阿里移动端高性能动态化方案Weex

2016年Qcon大会首日,阿里巴巴资深总监.淘宝移动平台.阿里百川负责人庄卓然宣布移动端高性能动态化方案Weex即时内测,并将于6月开源.此消息一出,群情汹涌,在座的程序猿.攻城狮们纷纷拿起手机扫码,以期第一时间感受Weex的神奇之力. 在第二天的主题分享会上,阿里巴巴前端开发专家赵锦江和技术专家徐凯对Weex进行了深入的解析.以下为演讲速记整理后的成文. 阿里怎么看待移动开发? 目前的移动开发者面临的最大痛点就是面对极其复杂的环境,对此,庄卓然给出一个公式,移动开发的复杂度=应用数量×平台数

ASP.NET数据库编程快速入门之技术慨述

asp.net|编程|快速入门|数据|数据库 大约有将近一百万名开发人员使用了.NET Framework的第一个版本来开发网站.所以在2003年的夏天,当从Microsoft传出将有新版本发布的传闻时,许多人的耳朵都竖了起来,这个新的版本将使得创建ASP.NET页面所需的代码行数减少70%.像这样大规模的提高生产效率在程序设计中是不多见的.当ASP.NET 2.0的代码样例在2003年秋的Microsoft专业开发人员大会(Microsoft Professional Developer's

1.搜索引擎的历史,搜索引擎起步,发展,繁荣,搜索引擎的原理,搜索技术用途,信息检索过程,倒排索引,什么是Lucene,Lucene快速入门

 一: 1  搜索引擎的历史 萌芽:Archie.Gopher Archie:搜索FTP服务器上的文件 Gopher:索引网页   2  起步:Robot(网络机器人)的出现与spider(网络爬虫) Robot基于网络的,可以执行特定任务的程序 Spider:特殊的机器人,网络爬虫,爬取互联网上的信息(可以是文件,网络)----网络自动下载程序   3   发展阶段:excite,galaxy,yahoo这些公司做搜索   4   繁荣:infoseek,AltaVista,Google和

快速了解无线网络技术--Wi-Fi

随著流动电话.手提电脑及个人数码助理(PDA)等个人流动装置(mobile devices)的普及,使用无线网络的用户正在日益增加.作为一般用家,我们如何能够好好利用这些技术来改善我们的日常生活?以下将为其中一种无线网络技术-Wi-Fi,作出一些简单的探讨: 什么是" Wi-Fi"(Wireless Fidelity)? 所谓 Wi-Fi,其实就是 IEEE 802.11b 的别称,是由一个名为"无线以太网相容联盟"(Wireless Ethernet Compat

《WCF技术内幕》翻译17:第1部分_第4章_WCF101:WCF快速入门

WCF快速入门 在本节,我要建立一个HelloWCF应用程序以向计算机科学之神表示我们的敬意.在建立这个应用后,我们分成不同的部分细看.为例子尽量简单明了,我们会把发送者和接受放在一个控制台应用里.让我们现在就开始在控制台应用里构建需要的基础架构. // File: HelloWCFApp.cs using System; sealed class HelloWCF { static void Main(){ } } 定义服务契约 构建HelloWCF应用的第一步是创建服务契约.第9章里会详细介

【JAVA秒会技术之ActiveMQ】ActiveMQ的快速入门

ActiveMQ的快速入门 一.ActiveMQ介绍 1.ActiveMQ简介         MQ,即Message Queue,消息队列.         ActiveMQ,是Apache出品,最流行的,能力强劲的开源消息总线.ActiveMQ 是一个完全支持JMS1.1和J2EE 1.4规范的 JMS Provider实现,尽管JMS规范出台已经是很久的事情了,但是JMS在当今的J2EE应用中间仍然扮演着特殊的地位. 2.JMS简介        JMS的全称是Java Message S

技术-如何快速入门Java语言;

问题描述 如何快速入门Java语言: 怎样的学习才能更快的培养Java的那种思想:对于新手学习技术科目的流程是什么; 希望得到 经验丰富的高手及老师们的指点? 解决方案 浮躁,,,学习东西得慢慢来,, 学什么东西都是孰能生巧,,做多了你就知道了,, 如果你要学Java,,你要学的东西还多着呢!!! http://blog.csdn.net/hekewangzi/article/category/2674441 解决方案二: 我正在慢慢摸索java,买了本书,先把基础掌握,确实是熟能生巧. 解决方

一起谈.NET技术,Expression Blend实例中文教程(2) - 界面快速入门

上一篇主要介绍Expression系列产品,另外概述了Blend的强大功能,本篇将用Blend 3创建一个新Silverlight项目,通过创建的过程,对Blend进行快速入门学习. 在开始使用Blend前,首先需要进行Silverlight的开发环境搭建,在银光中国网(SilverlightChina.Net)有篇"轻松建立Silverlight开发环境",其中列出了建立Silverlight开发环境的几个步骤,另外,我在过去发布过一篇"Silverlight开发工具集合&