Weex 初始

Posted 2020-07-30 L先森

1.一旦数据和模板绑定，数据的变化会立即体现在前台的变化

<template>
  <container>
    <text style="font-size: {{size}}">{{title}}</text>
  </container>
</template>

<script>
  module.exports = {
    data: {
      size: 48,
      title: \'Alibaba Weex Team\'
    }
  }
</script>

<template>
  <container>
    <text style="font-size: {{title.size}}">{{title.value}}</text>
  </container>
</template>

<script>
  module.exports = {
    data: {
      title: {
        size: 48,
        value: \'Alibaba Weex Team\'
      }
    }
  }
</script>

2.样式类

<template>
  <container>
    <text style="font-size: {{fontSize}};">Alibaba</text>
    <text class="large {{textClass}}">Weex Team</text>
  </container>
</template>
<style>
  .large {font-size: 32;}
  .highlight {color: #ff0000;}
</style>
<script>
  module.exports = {
    data: {
      fontSize: 32,
      textClass: \'highlight\'
    }
  }
</script>

3.事件

<template>
  <container>
    <text onclick="toggle">Toggle</text>
    <image  class="thumb" src="http://alibaba.github.io/weex/img/[e-mail]" if="{{shown}}"></image>
  </container>
</template>

<script>
  module.exports = {
    data: {
      shown: true
    },
    methods: {
      toggle: function () {
        this.shown = !this.shown
      }
    }
  }
</script>

<style>
  .thumb { width: 100; height: 100; }
</style>

<template>
  <scroller>
    <wxc-panel title="Toast" type="primary">
      <wxc-button type="primary" onclick="{{toast}}" value="Toast"></wxc-button>
    </wxc-panel>

    <wxc-panel title="Dialog" type="primary">
      <wxc-button type="success" onclick="{{alert}}" value="Alert" style="margin-bottom: 20px;"></wxc-button>
      <wxc-button type="primary" onclick="{{confirm}}" value="Confirm" style="margin-bottom: 20px;"></wxc-button>
      <wxc-button type="warning" onclick="{{prompt}}" value="Prompt"></wxc-button>
    </wxc-panel>
  </scroller>
</template>

<script>
  require(\'weex-components\');
  module.exports = {
    data: {},
    methods: {
      toast: function(msg, duration) {
        if (!msg || typeof msg !== \'string\') {
          msg = \'I am Toast show!\';
        }

        duration = duration || 2;
        this.$call(\'modal\', \'toast\', {
          \'message\': msg,
          \'duration\': duration
        });
      },
      alert: function(msg, okTitle, cancelTitle) {
        var self = this;
        if (!msg || typeof msg !== \'string\') {
          msg = "I am Alert!";
        }
        this.$call(\'modal\', \'alert\', {
          \'message\': msg,
          \'okTitle\': okTitle,
          \'cancelTitle\': cancelTitle
        }, function() {
          self.toast("Click Alert OK Bnt!!");
        });
      },
      confirm: function(msg, okTitle, cancelTitle) {
        var self = this
        if (!msg || typeof msg !== \'string\') {
          msg = "I am Confirm!";
        }

        okTitle = okTitle || "OK";
        cancelTitle = cancelTitle || "Cancel";
        this.$call(\'modal\', \'confirm\', {
          \'message\': msg,
          \'okTitle\': okTitle,
          \'cancelTitle\': cancelTitle
        }, function(result) {
          self.toast("Click Confirm  " + result);
        });
      },
      prompt: function() {
        var self = this;
        this.$call(\'modal\', \'prompt\', {
          \'message\': \'I am Prompt!\',
          \'okTitle\': \'ok\',
          \'cancelTitle\': \'cancel\'
        }, function(result) {
          self.toast("Click Prompt  " + result);
        });
      }
    }
  }
</script>

<style>
</style>

效果图

4.动画

<template>
  <div>
    <wxc-panel title="Transform" type="primary">
      <wxc-button value="Rotate" onclick="{{rotate}}" type="primary" size="middle"></wxc-button>
      <wxc-button value="Scale" onclick="{{scale}}" type="primary" size="middle" style="margin-top:12px;"></wxc-button>
      <wxc-button value="Translate" onclick="{{translate}}" type="primary" size="middle"
                 style="margin-top:12px;"></wxc-button>
      <wxc-button value="Transform" onclick="{{transform}}" type="success" size="middle"
                 style="margin-top:12px;"></wxc-button>
    </wxc-panel>

    <wxc-panel title="Others" type="primary">
      <wxc-button value="BgColor" onclick="{{color}}" type="primary" size="middle"></wxc-button>
      <wxc-button value="Opacity" onclick="{{opacity}}" type="primary" size="middle"
                 style="margin-top:12px;"></wxc-button>
      <wxc-button value="All" onclick="{{composite}}" type="success" size="middle" style="margin-top:12px;"></wxc-button>
    </wxc-panel>

    <div id="block" class="block" style="transform-origin:{{transformOrigin}}">
      <text class="block-txt">Anim</text>
    </div>
  </div>
</template>

<script>
  require(\'weex-components\');
  module.exports = {
    data: {
      transformOrigin: \'center center\',
      current_rotate: 0,
      current_scale: 1,
      current_color: \'#FF0000\',
      current_opacity: 1,
      current_translate: \'\',
      current_transform: \'\',
      isStop: true
    },
    methods: {
      anim: function(styles, timingFunction, duration, callback) {
        this.$call(\'animation\', \'transition\', this._ids.block.el.ref, {
          styles: styles,
          timingFunction: timingFunction,
          duration: duration
        }, callback);
      },
      rotate: function() {
        var self = this;
        self.current_rotate += 90;
        self.anim({
          transform: \'rotate(\' + self.current_rotate + \'deg)\'
        }, \'ease-in-out\', 500, function() {
          if (self.current_rotate === 360) {
            self.current_rotate = 0;
          }
          else {
            self.rotate();
          }
        });
      },
      translate: function() {
        this.current_translate = this.current_translate ? \'\' : \'translate(50%, 50%)\';
        this.anim({
          transform: this.current_translate
        }, \'ease-in\', 500, function() {
        });
      },
      scale: function() {
        var self = this;
        self.current_scale = self.current_scale === 2 ? .5 : 2
        self.anim({
          transform: \'scale(\' + self.current_scale + \')\'
        }, \'linear\', 500, function() {
        });
      },
      transform: function() {
        var self = this;
        this.current_transform = this.current_transform ? \'\' : \'rotate(45deg) scale(1.5)\';
        this.anim({
          transform: this.current_transform,
          transformOrigin: \'left top\'
        }, \'ease-out\', 500, function() {
          if (self.current_transform !== \'\'以上是关于Weex 初始的主要内容，如果未能解决你的问题，请参考以下文章
 
 浅析weex之vdom渲染
 Weex 初始
 Weex技术剖析
 Weex技术剖析
 weex 项目开发 weex 与 weexpack 的区别
 Jekyll 偏移代码片段高亮的初始行