小程序框架之视图层介绍FXML

网友投稿 46 2024-06-29

视图层

框架的视图层由 FXML 与 FTSS 编写，基础单元是组件。

  • FXML 用于描述页面的结构，类似于 HTML ;

  • FTSS 用于描述组件和页面的样式，是 css 的子集； fts 是小程序的一套脚本语言，基础语法同javascript，结合 FXML，可以创建出页面的结构。

组件 (Component) 是视图的基本组成单元，类似于HTML页面的各种标签，如div、span、img等

#1. FXML

FXML 是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。

以下是一些简单的示例：

#1.1 数据绑定

<!--fxml--><view> hello {{name}} </view>// page.js
Page({
  data: {
    name: 'cortana'
  }
})
        已复制代码

#1.2 列表渲染

<!--fxml--><view ft:for="{{array}}"> {{item}} </view>// page.js
Page({
  data: {
    array: ["苹果", "香蕉", "橘子", "西瓜"]
  }
})
        已复制代码

#1.3 条件渲染

<!--fxml--><view ft:if="{{type == 1}}"> 类型 1 </view><view ft:elif="{{view == 2'}}"> 类型 2 </view><view ft:else="{{view == 3}}"> 类型 3  </view>
        已复制代码
// page.jsPage({
  data: {
    type: 1
  }})
        已复制代码

#1.4 模板

<!--fxml--><template name="cat">
  <view>
    age: {{name}}, age: {{age}}  </view></template><template is="cat" data="{{...cat1}}"></template>
        已复制代码
// page.jsPage({
  data: {
    cat1: {name: 'blue', age: '2'},
  }})
        已复制代码

#1.5 事件

<view bindtap="getDate"> {{date}} </view> //点击事件 bindtap
        已复制代码
Page({
  data: {
    date: ""
  },
  getDate: function(e) {
    this.setData({
      date: new Date()
    })
  }})


版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。

标签：程序 小程序 java 数据 js
上一篇:小程序框架逻辑层介绍
下一篇:小程序框架视图层介绍之FTSS
相关文章

 发表评论

暂时没有评论，来抢沙发吧~