小程序服务网小程序服务 大智慧 开发WXML 模板(2)
小程序服务 大智慧 开发WXML 模板(2)
时间:2018-05-29 14:42来源:网络 作者:小程序服务网 点击:

  • 多了一些 wx:if 这样的属性以及 {{ }} 这样的表达式 在网页的一般开发流程中,我们通常会通过 JS 操作 DOM (对应 HTML 的描述产生的树),以引起界面的一些变化响应用户的行为。例如,用户点击某个按钮的时候,JS 会记录一些状态到 JS 变量里边,同时通过 DOM API 操控 DOM 的属性或者行为,进而引起界面一些变化。当项目越来越大的时候,你的代码会充斥着非常多的界面交互逻辑和程序的各种状态变量,显然这不是一个很好的开发模式,因此就有了 MVVM 的开发模式(例如 React, Vue),提倡把渲染和逻辑分离。简单来说就是不要再让 JS 直接操控 DOM,JS只需要管理状态即可,然后再通过一种模板语法来描述状态和界面结构的关系即可。 小程序的框架也是用到了这个思路,如果你需要把一个 Hello World 的字符串显示在界面上。 WXML 是这么写 :

    <text></text>
    

    JS 只需要管理状态即可:

    this.setData({ msg: "Hello World" })
    

    通过 {{ }} 的语法把一个变量绑定到界面上,我们称为数据绑定。仅仅通过数据绑定还不够完整的描述状态和界面的关系,还需要 if/else, for等控制能力,在小程序里边,这些控制能力都用 wx: 开头的属性来表达。 更详细的文档可以参考 WXML

  • ------分隔线----------------------------
    【温馨提示】小程序服务网倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至25995300@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于小程序服务网观点。用户与作者的任何交易与本站无关,请知悉。
    座机:
    010-88212320
    010-56255031
    手机:
    13581680850
    18911024452
    25995300