微信小程序基础而重要语法整理总结（数据绑定、运算表达式、循环渲染、条件渲染、事件绑定（传参））

目录

• 数据绑定
• 运算表达式
• 循环渲染
• 条件渲染
• 事件绑定（传参）

首先对初始化后的小程序目录进行梳理（图来自某机构）

补充：
sitemap配置：小程序根目录下的sitemap. json文件用来配置小程序及其页面是否允许被微信索引。

数据绑定

wxml数据显示

<view> {{msg}} view>

<view>{{num}}view>

<view> 是否: {{isGirl}} view>

<view>{{person.age}}view>
<view>{{person.height}}view>
<view>{{person.name}}view>


<view data-num="{{num}}"> 自定义属性view>


<view>
  <checkbox checked="{{isChecked}}"> checkbox>
view>

js内的data模拟数据

Page({
  data: {
    msg: "hello mina",
    num: 10000,
    isGirl: false,
    person: {
      age: 1,
      height: 165,
      name: "fur"
    },
    isChecked:false,
  }
});

运算表达式

1. 可以在花括号中 加入 表达式 – “语句”
2. 表达式，指的是一些简单 运算 数字运算 字符串 拼接 逻辑运算。。
   1. 数字的加减
   2. 字符串拼接
   3. 三元表达式

<view>{{1+1}}view> 
<view>{{'1'+'1'}}view>
<view>{{ 11%2===0 ? '偶数' : '奇数' }}view>

循环

一、列表循环

1. wx:for="{{数组或者对象}}"
2. wx:for-item=“循环项的名称”
3. wx:for-index=“循环项的索引”
4. wx:key=“唯一的值” 用来提高列表渲染的性能

如果 wx:key 绑定一个普通的字符串，那么这个字符串名称，肯定是 循环数组中的对象的唯一属性
如果 wx:key ="*this" 就表示你的数组是一个普通的数组 *this 表示是 循环项
注意：
当出现 数组的嵌套循环的时候 尤其要注意 以下绑定的名称 不要重名
wx:for-item="item" wx:for-index="index"
默认情况下 我们 不写wx:for-item="item" wx:for-index="index"，小程序也会把 循环项的名称 和 索引的名称设为 item 和 index
只有一层循环的话 wx:for-item="item" wx:for-index="index" 可以省略

二、对象循环

1. wx:for="{{对象}}" wx:for-item=“对象的值” wx:for-index=“对象的属性”
2. 循环对象的时候 最好把 item和index的名称都修改一下 wx:for-item="value" wx:for-index="key"

 <view>
   <view 
  wx:for="{{list}}"
  wx:for-item="item"
  wx:for-index="index"
  wx:key="id">
     索引：{{index}} -- 值:{{item.name}}
   view>
 view>

 <view>
   <view 
  wx:for="{{person}}"
  wx:for-item="value"  
  wx:for-index="key"
  wx:key="id">
     属性:{{key}} -- 值:{{value}}
   view>
 view>

js的data内元素

person: {
	  id:1,
      age: 1,
      height: 165,
      name: "fur"
    },
list:[
      {
        id:0,
        name:"fur"
      },
      {
        id:1,
        name:"furfur"
      }
    ]

block标签

1. 占位符的标签
2. 写代码的时候可以看到这标签存在，页面渲染时候小程序会把它移除掉

<view>
    <block 
   wx:for="{{list}}"
   wx:for-item="item"
   wx:for-index="index"
   wx:key="id"
   class="my_list" >
      索引：{{index}}
      --
      值:{{item.name}}
    block>
  view>

条件渲染

两种方法可以对页面元素进行显示和隐藏

1. wx:if、wx:elif、wx:else
2. hidden 用法
   1. 在标签上直接加入属性 hidden
   2. hidden="{{true}}"

什么场景下用哪个

1. 当标签不是频繁的切换显示 优先使用 wx:if，直接把标签从 页面结构给移除掉
2. 当标签频繁的切换显示的时候 优先使用 hidden，通过添加样式的方式来切换显示
   注意：hidden 属性 不要和样式 display一起使用！会被覆盖掉，因为hidden的原理就是增加display:none

   <view>
     <view>条件渲染view>
     <view wx:if="{{true}}">显示view>
     <view wx:if="{{false}}">隐藏view>

     <view wx:if="{{flase}}">1view>
     <view wx:elif="{{flase}}">2 view>
     <view wx:else> 3 view>

     <view hidden >hidden1view>
     <view hidden="{{false}}" >hidden2view>

     <view wx:if="{{false}}">wx:ifview>
        
     <view hidden  style="display: flex;" >hiddenview>
   view>

打印结果：

事件绑定

例子：使得输入框输入的元素显示到页面元素，点击按钮实现加减操作

步骤分析：

1. 需要给input标签绑定 input事件 ，绑定关键字 bindinput
2. 获取输入框的值 ，通过事件源对象来获取 e.detail.value
3. 把输入框的值 赋值到 data当中，注意不能直接赋值，与vue有所区别！通过this.setData进行赋值
4. 点击按钮，需要加入一个点击事件bindtap，
5. 注意：无法在小程序当中的 事件中直接传参 ，通过自定义属性的方式来传递参数，再通过事件源中获取自定义属性

wxml页面

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

js文件

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