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

数据绑定

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,}
});

运算表达式

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

<view>{{1+1}}</view>
<view>{{'1'+'1'}}</view>
<view>{{ 11%2===0 ? '偶数' : '奇数' }}</view>
<!--输出
2
11
奇数
-->

循环

一、列表循环

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:else
hidden 用法
1. 在标签上直接加入属性 hidden
2. hidden="{{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})}
})

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

微信小程序基础语法
微信小程序基础语法官网:https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/ .wxml文件中列表渲染 <view ...
微信小程序基础（全家福01）
微信小程序基础目标能够知道如何创建小程序项目能够清除小程序项目的基本组成结构能够知道小程序页面有几个部分组成能够知道小程序中常见的组件如何使用能够知道小程序如何进行协同开发和发布讲解目录 ...
微信小程序基础之开源项目库汇总
awesome-github-wechat-weapp 是由OpenDigg整理并维护的微信小程序开源项目库集合.我们会定期同步OpenDigg上的项目到这里,也欢迎各位提交项目给我们. (链接:ht ...
微信小程序--基础内容（详解）（一）
一.常用标签 1.view 标签 view 标签是一个块级元素,类似于 div(小程序里面没有div标签),里面可以放任何内容或者插值表达式,如下所示: <view>这是view标签< ...
微信小程序基础学习笔记Day02
学习目标:微信小程序基础Day02 今日目标: 能够使用 WXML 模板语法渲染页面结构能够使用 WXSS 样式美化页面结构能够使用 app.json 对小程序进行全局性配置能够使用 page. ...
小程序学习 - 01小程序简介+微信小程序基础
小程序简介小程序是一个全新的.轻量级的移动端应用. 起源在小程序出现之前的移动端开发的解决方案有: Android iOS Windows Phone - 后来退出历史舞台移动端开发发展了一段时 ...
微信小程序基础学习笔记Day01
学习目标:微信小程序基础Day01 今日目标: 能够知道如何创建小程序项目能够清楚小程序项目的基本组成结构能够知道小程序页面由几部分组成能够知道小程序中常见的组件如何使用能够知道小程序如何进行 ...
更改微信小程序的基础版本库；更改uni-app小程序基础库；更改用户的微信小程序基础库最低版本；设置用户的微信小程序版本库；
需求场景:微信小程序不少API都有最低版本支持,为了避免不必要的麻烦,我们可以根据需要给小程序设置基础库最低版本,这样若用户使用的基础库版本低于设置的最低版本要求,则无法正常使用小程序,并提示更新微信 ...
《微信小程序-基础篇》初识微信小程序
大家好,好久不见了,前段时间各种原因分享不稳定,后面一段时间内参与了主站的原力计划,请麻烦各位支持一下,万分感谢- 本系列将从零开始介绍微信小程序的开发,介绍完基础以后会实际同步开发一个微信小程序的项 ...