洞察纵观鸿蒙next版本,如何凭借FinClip加强小程序的跨平台管理,确保企业在数字化转型中的高效运营和数据安全?
248
2024-06-29
框架的视图层由 FXML 与 FTSS 编写,基础单元是组件。
FXML 用于描述页面的结构,类似于 HTML ;
FTSS 用于描述组件和页面的样式,是 css 的子集; fts 是小程序的一套脚本语言,基础语法同javascript,结合 FXML,可以创建出页面的结构。
组件 (Component) 是视图的基本组成单元,类似于HTML页面的各种标签,如div、span、img等
FXML 是框架设计的一套标签语言,结合基础组件、事件系统,可以构建出页面的结构。
以下是一些简单的示例:
<!--fxml--><view> hello {{name}} </view>// page.js Page({ data: { name: 'cortana' } }) 已复制代码
<!--fxml--><view ft:for="{{array}}"> {{item}} </view>// page.js Page({ data: { array: ["苹果", "香蕉", "橘子", "西瓜"] } }) 已复制代码
<!--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 }}) 已复制代码
<!--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'}, }}) 已复制代码
<view bindtap="getDate"> {{date}} </view> //点击事件 bindtap 已复制代码
Page({ data: { date: "" }, getDate: function(e) { this.setData({ date: new Date() }) }})
版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。
发表评论
暂时没有评论,来抢沙发吧~