小程序入门教程

13. WXML特性之数据绑定

数据绑定
Page对象的data属性

<!--index.wxml-->
<view>
  <text>{{message}}</text>
</view>

//index.js
Page({
  data: {
    message : "hello, word"
  },
})

在这里插入图片描述
flag=false,不隐藏

<!--index.wxml-->
<view hidden='{{flag ? true : false}}'>
  hidden
</view>

//index.js
Page({
  data: {
    flag: false
  },
})

在这里插入图片描述
公共属性为
在这里插入图片描述

14. WXML特性之列表渲染

<!--index.wxml-->
<view>
  <block wx:for="{{items}}" wx:for-item="item" wx:key="index">
    <view>{{index}}:{{item.name}}</view>
  </block>
</view>

//index.js
Page({
  data: {
    items: [
      { name: "商品A"},
      { name: "商品B" },
      { name: "商品C" },
      { name: "商品D" }
    ]
  }
})

在这里插入图片描述

15. WXML特性之条件渲染

<!--index.wxml-->
<view>今天吃什么?</view>
<view wx:if="{{condition === 1}}">
  饺子
</view>
<view wx:elif="{{condition === 2}}">
  米饭
</view>
<view wx:else>
  面食
</view>

//index.js
Page({
  data: {
    // 生成一个1到3的随机整数
    // Math.random()生成[0,1)的浮点随机数
    // Math.floor()下取整
    condition: Math.floor(Math.random() * 3 + 1)
  }
})

在这里插入图片描述

16. WXML特性之模板及引用

<!--index.wxml-->
<template name="tempItem">
  <view>
    <view>收件人: {{name}}</view>
    <view>联系方式: {{phone}}</view>
    <view>地址: {{address}}</view>
  </view>
</template>
<template is="tempItem" data="{{...item}}"></template>

//index.js
Page({
  data: {
    item: {
      name: "张三",
      phone: "15515561556",
      address: "中国"
    }
  }
})

在这里插入图片描述
文件引用
import 引入目标文件中模板代码块的内容

<!--index.wxml-->
<import src="a.wxml"></import>
<template is="a"></template>

<!--a.wxml-->
<view>Hello, word</view>
<template name="a">
  Hello,wixin
</template>

在这里插入图片描述

import有作用域的概念,避免死循环,只会引入模板中的内容,不会引入模块中的模板内容

include 引入目标文件中除了模块代码块的所有内容

<!--index.wxml-->
<include src="a.wxml"></include>
<template is="a"></template>

<!--a.wxml-->
<view>Hello, word</view>
<template name="a">
  Hello,wixin
</template>

在这里插入图片描述

19. WXSS特性之选择器

在这里插入图片描述
选择器的优先级
在这里插入图片描述

27. 生命周期

在这里插入图片描述
在这里插入图片描述

29. 小程序事件流

在这里插入图片描述
在这里插入图片描述

<!--index.wxml-->
<view class='container-A' bindtap='clickA'>
  container-A
  <view class='container-B' bindtap='clickB'>
    container-B
    <view class='container-C' bindtap='clickC'>
      container-C
    </view>
  </view>
</view>

//index.js
Page({
  clickA() {
    console.log('click container-A')
  },
  clickB() {
    console.log('click container-B')
  },
  clickC() {
    console.log('click container-C')
  }
})

微信小程序基础内容组件之icon

参考博客

[1]

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Java识堂

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值