目录
数据绑定运算表达式循环渲染条件渲染事件绑定（传参）首先对初始化后的小程序目录进行梳理（图来自某机构）
补充：
sitemap配置：小程序根目录下的sitemap. json文件用来配置小程序及其页面是否允许被微信索引。
数据绑定
wxml数据显示
<!-- 1 字符串 --><view> {{msg}} </view><!-- 2 数字类型 --><view>{{num}}</view><!-- 3 bool类型 --><view> 是否: {{isGirl}} </view><!-- 4 object类型 --><view>{{person.age}}</view><view>{{person.height}}</view><view>{{person.name}}</view><!-- 5 在标签的属性中使用 --><view data-num="{{num}}"> 自定义属性</view><!-- 6 使用bool类型充当属性 checked 字符串和 花括号之间一定不要存在空格 否则会导致识别失败 --><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,}});
运算表达式
可以在花括号中 加入 表达式 – “语句”表达式，指的是一些简单 运算 数字运算 字符串 拼接 逻辑运算。。 数字的加减字符串拼接三元表达式<view>{{1+1}}</view> <view>{{'1'+'1'}}</view><view>{{ 11%2===0 ? '偶数' : '奇数' }}</view><!--输出211奇数-->
循环
一、列表循环
wx:for="{{数组或者对象}}"wx:for-item=“循环项的名称”wx:for-index=“循环项的索引”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"可以省略
二、对象循环
wx:for="{{对象}}" wx:for-item=“对象的值” wx:for-index=“对象的属性”循环对象的时候 最好把 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标签
占位符的标签写代码的时候可以看到这标签存在，页面渲染时候小程序会把它移除掉
<view><block wx:for="{{list}}"wx:for-item="item"wx:for-index="index"wx:key="id"class="my_list" >索引：{{index}}--值:{{item.name}}</block></view>
条件渲染
两种方法可以对页面元素进行显示和隐藏
wx:if、wx:elif、wx:elsehidden 用法 在标签上直接加入属性 hiddenhidden="{{true}}"
什么场景下用哪个
当标签不是频繁的切换显示 优先使用 wx:if，直接把标签从 页面结构给移除掉当标签频繁的切换显示的时候 优先使用 hidden，通过添加样式的方式来切换显示
注意：hidden 属性 不要和样式 display一起使用！会被覆盖掉，因为hidden的原理就是增加display:none
<view><view>条件渲染</view><view wx:if="{{true}}">显示</view><view wx:if="{{false}}">隐藏</view><view wx:if="{{flase}}">1</view><view wx:elif="{{flase}}">2 </view><view wx:else> 3 </view><view hidden >hidden1</view><view hidden="{{false}}" >hidden2</view><view wx:if="{{false}}">wx:if</view><!-- 错误用法 ：hidden无法被隐藏 --><view hidden style="display: flex;" >hidden</view></view>
打印结果：
事件绑定
例子：使得输入框输入的元素显示到页面元素，点击按钮实现加减操作
步骤分析：
需要给input标签绑定 input事件 ，绑定关键字 bindinput获取输入框的值 ，通过事件源对象来获取e.detail.value把输入框的值 赋值到 data当中，注意不能直接赋值，与vue有所区别！通过this.setData进行赋值点击按钮，需要加入一个点击事件bindtap，注意：无法在小程序当中的 事件中直接传参 ，通过自定义属性的方式来传递参数，再通过事件源中获取自定义属性
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) {// 获取自定义属性 operationconst operation = e.currentTarget.dataset.operation;this.setData({num: this.data.num + operation})}})
微信小程序基础而重要语法整理总结（数据绑定 运算表达式 循环渲染 条件渲染 事件绑定（传参））
