微信小程序--视图与渲染

1.组件使用
组件的使用非常简单,从开发者文档中可直接复制到 wxml 文件中
例: wxml文件:
<button type="primary" > 登陆按钮 </button>
2.数据绑定,使用双花括号 {{}} ,在页面实例Page的 data中设置数据

data: {
        text : "登陆按钮"
}

<button type="primary" > {{text}} </button>
3.点击事件
1>组件标签中添加 bindtap (绑定-点击)
<button type="primary" bindtap="btnClick"> {{btnText1}} </button>
2>在页面实例Page中 添加方法

btnClick :function () {
        console.log("按钮被点击,打印日志")
        this.setData{ text : "登陆按钮已被点击"}
}

4.渲染标签
1>判断是否显示,true为显示,false不显示
<view wx:if="{{bool}}"> 1 </view>
<view wx:else > 2 </view>
2>循环

wx:for="{{data}}"      wx:for-itme="vo"(若不设置,默认为item)
<view wx:for="{{news}}" wx:for-item="a" wx:for-index="b">
{{a}} {{b}}
</view>

5.模版
方法1:
<include src="../templates/header" />
等同于复制模版文件中的代码,模版中直接使用页面中的变量

方法2:
设置模版:
<template name="footer1">模版1 - {{text}}</template>
模版引入:

<import src="../templates/footer />"
<template is="footer1" data="{{text : '给模版传的文本'}}"
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • WXML WXML(WeiXin Markup Language)是微信的一套标签语言,结合基础组件、事件系统,可...
    许剑锋阅读 7,004评论 3 51
  • 昨天看了一下微信小程序官方文档,总结一下自己学习的个人心得. 首先从官方文档给的框架说起,微信小程序官方文档给出了...
    Mr大大大阅读 47,324评论 9 68
  • 给提问的开发者的建议:提问之前先查询 文档、通过社区右上角搜索搜索已经存在的问题。 写一个简明扼要的标题,并且...
    极乐叔阅读 14,100评论 0 3
  • 微信小程序在无论在功能、文档及相关支持方面,都是优于前面几种微信账号类型,它提供了很多原生程序才有的接口,使得我们...
    未央大佬阅读 2,355评论 0 12
  • 等待,这究竟是怎样的一个词语?我等待你。 越过大山,越过沙漠,越过大海,等待是心底里一个又一个失眠夜的思念,等待是...
    Ling_00阅读 211评论 4 6