文档章节

Weex学习第三篇:模版,样式,脚本

孙启超
 孙启超
发布于 2017/01/07 16:42
字数 883
阅读 38
收藏 1

这两天把官方的教程都看了一遍,总体感觉是信息量很大,但是大部分和iOS原生开发有相似的地方,像UI,touch事件,数据绑定,数据处理等流程都是存在,区别在于语言和语法,虽然知识点,用法,API很多,有的常用的还需要记住,但是只要有耐心,一个一个的克服,结果肯定是好的。而且最近感受最深的是,写出来的博客是要经过自己反复验证的,保证99.99%正确后才能发出来,不能像以前那样跟发相声似的,所以后面出一篇文章可能用3,4天时间也很正常,尤其是在一开始,就有小伙伴支持鼓励,对我影响很大,也加重了我的责任感。

 

今天我们来介绍一下weex代码的三部分构成:<template>、<style>、<script>

第一部分:template

官方解释--必须的,使用 HTML 语法描述页面结构,内容由多个标签组成,不同的标签代表不同的组件。

可以看出里面其实就是html的代码,像title,body,表单等元素。

 

第二部分:style

官方解释--可选的,使用 CSS 语法描述页面的具体展现形式。

属于样式层,可以自定义class,虽然是可选的,但是建议是必须的,养成好习惯不要把所有代码都写到html里面,这样维护会很麻烦,层次不清晰。

 

第三部分:script

官方解释--可选的,使用 JavaScript 描述页面中的数据和页面的行为,Weex 中的数据定义也在 <script> 中进行。

是数据绑定和点击事件处理,包括数据校验等,处理业务逻辑。

 

总结下来:这是一个典型的 M-V-VM 架构:通过 ViewModel 把 Model 和 View 建立更直接有效的关系,ViewModel 的实现以 <script> 的内容为主。

 

数据绑定

 

接下来再看看官方介绍的数据绑定,

1.数据绑定路径---就是在template用变量来设置,然后在script里给变量赋值,用双大括号来表示 “ {{ x }} ”

2.数据绑定表达式---用简单JS的表达式绑定

 

Weex使用 mustache 的语法 ({{...}}) 来对 <template> 中的模板和 <script> 里的数据进行绑定. 一旦数据额模板绑定了, 数据上的修改会实时的在模板内容中生效。

数据绑定路径

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

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

体验一下

上面的代码会把 title 和 size 的数值绑定到模板内容上。

我们也可以通过 . 符号来绑定数据结构中的字段。看一下下面的代码片段:

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

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

体验一下

数据绑定表达式

进行数据绑定时,Weex 支持一些简单的 JavaScript 表达式,例如:

<template>
  <div style="flex-direction: row;">
    <text>{{firstName + ' ' + lastName}}</text>
  </div>
</template>

<script>
  module.exports = {
    data: {
      firstName: 'John',
      lastName: 'Smith'
    }
  }
</script>

体验一下

这些表达式会在当前的上下文中进行运算。

 

总结:了解template,style,script各个模块的作用,把基础打好,就像刚开始学习MVC模式时,如果能坚持各个模块的代码分离,控制好相互之间调用的权限,对后面的编程会提高很多。

 

 

参考链接:https://weex-project.io/cn/doc/syntax/data-binding.html

 

 

 

© 著作权归作者所有

共有 人打赏支持
孙启超
粉丝 121
博文 172
码字总数 276126
作品 0
浦东
高级程序员
私信 提问
Weex快速上手教程(Weex Tutorial)

我们将使用Weex编写一个简单的列表 , 类似的列表经常能在电商类移动应用中见到。 开始 我们先编写一个列表项。 请创建一个名为 tech_list.we 的文件( .we 是Weex推荐的后缀名 ) ,请复制粘贴...

阿里百川
2016/06/14
5.7K
0
企鹅电竞weex实践——UI开发篇

腾讯DeepOcean原创文章:dopro.io/egame-weex-… 随着电竞业务的不断发展,页面功能越来越多,交互逻辑更加复杂,类似无限滚动、上拉刷新、横竖切换滚动等形式在业务中已是标配,经过重重优化...

腾讯DeepOcean
2018/11/15
0
0
iOS 开发者的 Weex 伪最佳实践指北

引子 这篇文章是笔者近期关于Weex在iOS端的一些研究和实践心得,和大家一起分享分享,也算是对学习成果的总结。文章里面提到的做法也许不是最佳实践,也许里面的方法称不算是一份标准的指南手...

一缕殇流化隐半边冰霜
2017/05/04
0
0
关于移动端动态化方案的再思考——Weex

在移动端日益兴起的今天,APP 本身的灵活性、迭代更新的周期、成本优化等动态性问题,成为很多移动应用的客观需求。而针对动态性,开发者们也探索出一些有力的解决方案:Hybrid 方案、结构化...

OSC源创君
2018/07/09
2.5K
16
最火移动端跨平台方案盘点:React Native、weex、Flutter

1、前言 跨平台一直是老生常谈的话题,cordova、ionic、react-native、weex、kotlin-native、flutter等跨平台框架的百花齐放,颇有一股推倒原生开发者的势头。 为什么我们需要跨平台开发? ...

JackJiang2011
2018/08/13
0
0

没有更多内容

加载失败,请刷新页面

加载更多

rabbitmq安装教程

RabbitMQ有Windows与Linux版本的,这里先写Windows版本的安装。 以前安装软件总是在百度上找某某安装教程,结果能按照教程安装好的软件真的不多。想起先前以为大牛说的一句话,去官网按照官网...

em_aaron
今天
6
0
Android 贝塞尔曲线实践——波浪式运动

一、波浪效果如下 贝塞尔曲线自定义波浪效果的案例很多,同样方法也很简单,大多数和本案例一样使用二次贝塞尔曲线实现,同样还有一种是PathMeasure的方式,这里我们后续补充,先来看贝塞尔曲...

IamOkay
今天
3
0
Nmap之防火墙/IDS逃逸

选项 解释 -f 报文分段 --mtu 指定偏移大小 -D IP欺骗 -sI 原地址欺骗 --source-port 源端口欺骗 --data-length 指定发包长度 --randomize-hosts 目标主机随机排序 --spoof-mac Mac地址欺骗 ...

Frost729
今天
2
0
带你搭一个SpringBoot+SpringData JPA的环境

不知道大家对SpringBoot和Spring Data JPA了解多少,如果你已经学过Spring和Hibernate的话,那么SpringBoot和SpringData JPA可以分分钟上手的。 其实我在学完SpringBoot和SpringData JPA了之...

java菜分享
今天
7
0
Chocolatey 在Window搭建一个开发环境

在看了(利用 Chocolatey 快速在 Windows 下搭建一个开发环境)后,准备从零开始 一、准备工作 1、用管理员权限启动:powershell,执行错误请参考(PowerShell因为在此系统中禁止执行脚本的解...

近在咫尺远在天涯
今天
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部