2021-05-18微信小程序模板语法

微信小程序官方文档

//demo03.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    message:"摘星种树谈理想",
    the9:123343,
    isThe9:false,
    Person:{
    name:"张三",
    msg:"hello,kiki",
    birthday:"1995-8-27",
    age:26,
    team:"Team SII",
    isGirl:"YES"
    },
    isChecked:false,
    member:[
      {
        id:1,
        name:"张三"
      },
      {
        id:2,
        name:"李四"
      },
      {
        id:3,
        name:"王五"
      }
    ]

  }

1.text 相当于以前web中的span标签 行内元素 不会换行
2.view 相当于以前web中的div标签 块级元素 会换行

<!--pages/demo03/demo03.wxml-->
<!--
  1.text 相当于以前web中的span标签 行内元素 不会换行
  2.view 相当于以前web中的div标签 块级元素 会换行
-->
<!--
  1.字符串
-->
<view>{{message}}</view>
<!--
  2.数字类型
-->
<view>{{the9}}</view>
<!--
  3.bool类型
-->
<view>解散了吗？{{isThe9}}</view>
<!--
  4.object类型
-->
<view>{{Person.name}}</view>
<view>{{Person.msg}}</view>
<view>{{Person.birthday}}</view>
<view>{{Person.age}}</view>
<view>{{Person.team}}</view>
<!--
  5.在标签的属性中使用
-->
<view data-num="{{the9}}">自定义属性</view>
<!--
6.使用bool类型充当属性 checked
    -1 字符串和花括号之间不要存在空格，否则会识别失败
-->
<view>
<checkbox checked=" {{isCheck}}">
</checkbox>
</view>
<!--
  7.运算=>表达式
  -1可以在花括号中加入表达式--“语句”
  -2 表达式
      指的是一些简单 运算 数字运算 字符串 拼接 逻辑运算
      --1 数字的加减
      --2 字符串拼接
      --3 三元表达式
  -3 语句
      --1 复杂的代码段
          --2 if else
          --3 switch
          --4 do while
          --5 for
-->
<view>{{1+1}}</view>
<view>{{'1'+'1'}}</view>
<view>{{10%2===0 ? '偶数' :'奇数'}}</view>
<!--
  8.列表循环
    1 wx:for="{{数组或对象}}"
      wx:for-item="循环项名称"
      wx:for-index="循环项索引"
    2 wx:key="唯一值" 用来提高渲染的
        -1 wx:key 绑定一个普通的字符串的时候，那么这个字符串名称肯定是 循环数组中的唯一属性
        -2 wx:key ="*this" 就表示数组是一个普通的数组 *this是循环项
            [1,2,3]
            ["1","a","其"]
        -3 当出现数组的嵌套循环时，尤其要注意
        以下绑定的名称不要重名
        wx:for-item="item" 
        wx:for-index="index"
        -4 默认情况下，我们写
        wx:for-item="item" 
        wx:for-index="index"
        小程序也会把 循环项的名称和索引的名称叫 item和index
        只有一层循环的可以省略     
  9.对象循环
    1  wx:for="{{对象}}"
      wx:for-item="对象的值"
      wx:for-index="对象的属性" 
    2 循环对象的时候最好把item和index的名称都修改一下
        wx:for-item="value" 
        wx:for-index="key"
      -->

<view>
  <view wx:for="{{member}}" 
  wx:for-item="item" 
  wx:for-index="index"
  wx:key="id">
    索引：{{index+1}}
    ----
    值：{{item.name}}
  </view>
</view>
<view>
  <view>对象循环</view>
  <view wx:for="{{Person}}"
        wx:for-item="value" 
        wx:for-index="key"
        wx:key="age"
        > 
    属性：{{key}}
    --
    值：{{value}}
  </view>

</view>

<!--
  10 block
    -1 占位符标签，写代码时看到标签存在
    -2 页面渲染时，小程序会把它移除
    改成block后class消失
-->
<view>
  <block wx:for="{{member}}" 
  wx:for-item="item" 
  wx:for-index="index"
  wx:key="id"
  class="mykiki">
    索引：{{index+1}}
    ----
    值：{{item.name}}
  </block>
</view>

<!--
  11 条件渲染
    -1 wx:if="{{true/false}}"
      ---1 if ，else， if else，
        wx:if
        wx:elif
        wx:else
  -2 hidden
     1 在标签上直接加入属性hidden
     2 hidden="{{true}}"
  -3 什么场景下用哪个
     1 当标签不是频繁的切换显示 优先使用 wx:if
       直接把标签从页面结构给移除掉
     2 当标签平凡的切换显示的时候，优先使用hidden
       通过添加样式的方式来切换显示
       hidden属性不要和样式display一起使用
-->
<view>
  <view>条件渲染</view>
  <view wx:if="{{true}}">显示</view>
  <view wx:if="{{false}}">隐藏</view>
  <view wx:if="{{false}}">1</view>
  <view wx:elif="{{false}}">2</view>
  <view wx:else>4</view>
  <view>-----------</view>
  <view>hidden</view>
  <view hidden>hidden</view>
  <view hidden ="{{false}}">hidden2</view>
  <view hidden ="{{true}}">hidden1</view>
  <view>000000000</view>
  <view hidden style="display:flex;">
hidden22
  </view>
</view>

类计数器

1.需要给input标签绑定input事件
    绑定关键字bindinput
  2.如何获取输入框的值
    通过事件源对象来获取
    e.detail.value
  3.把输入框的值赋值到data中不能直接
    -1 this.data.num=e.datail.value
    -2 this.num=e.datail.value
   正确的写法:
     this.setData({
       num:e.detail.value
     })
  4.需要加入一个点击事件
    -1 bindtap
    -2 无法在小程序当中的事件中直接传参
    -3 通过自定义属性的方式传递参数
    -4 事件源中获取自定义属性

一开始数据变化是null
【显示null ，data-operation="{{1}}" 必须以data-开头】

// pages/demo04/demo04.js
Page({

  data: {
    num:0
  },
  //输入框input事件的执行逻辑
  handleInput(e){
    //console.log(e.detail.vue);
    this.setData({
      num:Number(e.detail.value)
    })
  },
    //加减按钮的事件
    handletap(e){
      //1 获取自定义属性 operation
      const operation=e.currentTarget.dataset.operation;
      this.setData({
        num:Number(this.data.num)+Number(operation)
      })
    }
})

<input type="text" bindinput="handleInput"/>
<button bindtap="handletap" data-operation="{{1}}">+</button>
<button bindtap="handletap" data-operation="{{-1}}">-</button>
<view>
  {{num}}
</view>