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

2021-10-04 05:07:04

这里会介绍一下 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 级别的体验。

码农公寓