微信小程序学习之模板与配置

瘾ิۣۖิۣۖิۣۖิꦿ

已于 2022-10-10 17:25:48 修改

阅读量521

点赞数

分类专栏：微信小程序学习文章标签：微信小程序学习小程序

于 2022-10-09 19:04:22 首次发布

本文链接：https://blog.csdn.net/weixin_53745698/article/details/127228259

版权

微信小程序学习专栏收录该内容

2 篇文章 1 订阅

订阅专栏

8.target和currentTarget的区别

9.bindtap的语法格式

10.在事件处理函数中为data中的数据赋值

一.WXML模板语法

1.数据绑定的基本原则

在data中定义数据
在WXML中使用数据

2.在data中定义数据

在页面对应的.js文件中，把数据定义到data对象中。

3.Mustache语法的格式

把data中的数据绑定到页面中渲染，使用Mustache语法（双大括号）将变量包起来即可。

4.Mustache语法的应用场景

绑定内容
绑定属性
运算（三元运算、算数运算等）

使用效果：wxml文件：

<view>{{info}}</view>
<image src="{{imgSrc}}" mode="aspectFit"></image>
<view>{{randomNum1 >= 5 ? '数字大于或等于5':'数字小于5'}}</view>
<view>{{randomNum2*100}}</view>

.js文件：


Page({
    data: {
        info:'hello world',
        imgSrc:'https://img-home.csdnimg.cn/images/20221009091924.jpg',
        randomNum1:Math.random()*10,
        randomNum2:Math.random().toFixed(2)
    }
})

运行结果图：

5.事件

事件是渲染层到逻辑层的通讯方式，通过事件可以将用户在渲染层产生的行为，反馈到逻辑层进行业务的处理。

6.小程序中常用的事件

7.事件对象的属性列表

8.target和currentTarget的区别

9.bindtap的语法格式

在小程序中，不存在HTML中的onclick鼠标点击事件，而是通过tap事件来响应用户的触摸行为。

10.在事件处理函数中为data中的数据赋值

通过调用this.setData(dataObject)方法，可以给页面data中的数据重新赋值，实例如下：

//wxml文件
<button type="primary" bindtap="btnTapHandler">按钮</button>
<button type="primary" bindtap="CountChange">+1</button>

//.js文件
Page({
    data: {
        info:'hello world',
        imgSrc:'https://img-home.csdnimg.cn/images/20221009091924.jpg',
        randomNum1:Math.random()*10,
        randomNum2:Math.random().toFixed(2),
        count:0
    },
    //定义按钮的事件处理函数
    btnTapHandler(e){
      console.log(e)
    },
    CountChange(){
      this.setData({
        count:this.data.count+1
      })
    }
})

使用效果：

点击+1按钮，count进行+1操作：

11.事件传参

小程序中的事件传参比较特殊，不能再绑定事件的同时为事件处理函数传递参数。错误示例：

<button type="primary" bindtap="btnTapHandler(123)">事件传参</button>

可以为组件提供data-*自定义属性传参，其中*代表的是参数的名字，实例如下：

<button type="primary" bindtap="btnTapHandler" data-info="{{2}}">事件传参</button>

完成实例代码：

//wxml文件
<button type="primary" bindtap="btnTapHandler">按钮</button>
<button type="primary" bindtap="CountChange">+1</button>
<button type="primary" bindtap="btnTap1" data-info="{{2}}">+2</button>

//.js文件
Page({
    data: {
        info:'hello world',
        imgSrc:'https://img-home.csdnimg.cn/images/20221009091924.jpg',
        randomNum1:Math.random()*10,
        randomNum2:Math.random().toFixed(2),
        count:0
    },
    //定义按钮的事件处理函数
    btnTapHandler(e){
      console.log(e)
    },
    CountChange(){
      this.setData({
        count:this.data.count+1
      })
    },
    btnTap1(e){
      this.setData({
        count:this.data.count+e.target.dataset.info
      })
    }
})

12.bindinput的语法格式

在小程序中，通过input事件来响应文本框的输入事件，语法格式如下：

13.实现文本框和data之间的数据同步

实现步骤：

定义数据
渲染结构
美化样式
绑定input事件处理函数

实例（根据输入值，实时改变msg值）：

//wxml文件
<button type="primary" bindtap="btnTapHandler">按钮</button>
<button type="primary" bindtap="CountChange">+1</button>
<button type="primary" bindtap="btnTap1" data-info="{{2}}">+2</button>
<input value="{{msg}}" bindinput="inputHandler"></input>

//wxss文件
  input{
    border: 1px solid #eee;
    margin: 5px;
    padding: 5px;
    border-radius: 3px;
  }

//.js文件

Page({
    data: {
        info:'hello world',
        imgSrc:'https://img-home.csdnimg.cn/images/20221009091924.jpg',
        randomNum1:Math.random()*10,
        randomNum2:Math.random().toFixed(2),
        count:0,
        msg:'你好，'
    },
    //定义按钮的事件处理函数
    btnTapHandler(e){
      console.log(e)
    },
    CountChange(){
      this.setData({
        count:this.data.count+1
      })
    },
    btnTap1(e){
      this.setData({
        count:this.data.count+e.target.dataset.info
      })
    },
    inputHandler(e){
      // console.log(e.detail.value)
      this.setData({
        msg: e.detail.value
      })
    },
})

二.条件渲染

1.wx：if

在小程序中，使用wx:if=“{{condition}}”来判断是否需要渲染该代码块；

<view wx:if="{{condition}}"> True </view>

也可以用wx:elif和wx:else来添加else判断：

<!-- 条件渲染 -->
<view wx:if="{{ type === 1}}">苹果</view>
<view wx:elif="{{type === 2}}">橘子</view>
<view wx:else>其他</view>

2.结合<block>使用wx:if

如果要一次性控制多个组件大展示与隐藏，可以使用应该<block></block>标签将多个组件包装起来，并在<block>标签上使用wx:if控制属性，实例如下：

<block wx:if="{{true}}">
  <view>view1</view>
  <view>view2</view>
</block>

3.hidden

在小程序中，直接使用hidden="{{condition}}"也能控制元素的显示与隐藏：

<view hidden="{{condition}}">条件为 true 隐藏，条件为 false 显示</view>

实例如下，在.js文件定义变量flag：true：

<view hidden="{{!flag}}">条件为 true 隐藏，条件为 false 显示</view>

4.wx:if与hidden的对比

运行方式不同

wx：if以动态创建和移除元素的方式，控制元素的展示与隐藏
hidden以切换样式的方式(display:none/block;),控制元素的显示与隐藏

代码：

<view hidden="{{!flag}}">条件为 true 隐藏，条件为 false 显示</view>
<view wx:if="{{flag}}">这是wx:if 显示</view>

效果图：

将flag改成false后：

wx:if控制的元素被删除！！！

频繁切换时，建议使用hidden，使用wx：if进行频繁创建删除速度慢！！！

5.wx：for

建议使用wx：for可以根据指定的数组，循环渲染重复的组件结构，语法示例如下：在.js文件上定义array数组：

<view wx:for="{{array}}">
  索引是：{{index}} 当前项是：{{item}}
</view>

6.手动指定索引和当前项的变量名

使用wx:for-index可以指定当前循环项的索引的变量名
使用wx:for-item可以指定当前项的变量名

实例如下：

<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
  索引是：{{idx}} 当前项是：{{itemName}}
</view>

7.wx：key的使用

类似于Vue列表渲染中的：key，小程序在实现列表渲染时，也建议为渲染出来的列表项指定唯一的key值。

//.js文件
data: {
        userlist:[
          {id: 1,name:'小红'},
          {id: 2,name:'小白'},
          {id: 3,name:'小黄'},
        ]
    },

//wxml文件
<view wx:for="{{userlist}}" wx:key="id">{{item.name}}</view>

效果：