第三篇：微信小程序的【WXML模板】配合【JS】的代码编写

岑梓铭

已于 2024-02-23 18:30:14 修改

阅读量1.5k

点赞数 28

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

于 2024-02-20 13:08:34 首次发布

本文链接：https://blog.csdn.net/m0_73991249/article/details/136176051

版权

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

8 篇文章 3 订阅

订阅专栏

前提：建议还没学HTML、CSS、JavaScript、JSON、vue、Ajax的兄弟姐妹们，先去把这些基础补好过一遍，不然不好理解微信小程序

一、三大API了解一下

1、事件监听API

学过JavaScript的会知道，除了addEventListener可以监听事件，还有一个on开头的API可以监听事件，只需要on+“事件名称”，例如：

//一个按钮的点击事件
button.onclick = function(){
     ......
}

那么微信小程序开发也差不多，区别就是不是on，是bind：1、【bind+事件名称="js里写的函数名"】 2、【bind:事件名称="js里写的函数"】

2、同步API

特点1：以Sync结尾的API都是同步API

特点2：同步API的结果可以通过函数return获得，执行错误会抛出异常

3、异步API

特点：类似jQuery种的$.ajax{options}函数，需要通过success、fail、complete接受调用结果

二、数据绑定：就是能在WXML里用JS的成员

数据绑定原则：1、在js文件的data里定义数据

2、在WXML里使用数据

1、在js文件data里定义数据

每个页面的js文件都要有一个Page()函数，作为这个页面的入口，当调用Page()函数就能开始进入这个页面的文件，Page()里面要传一个【对象参数】：Page( { 对象 } )，那么这个对象里就包含一个对象成员：data，写法跟JavaScript、axios、vue这些语言写对象的语法一样的，模板：

Pages({
    data: {
        定义的数据1：xxx,
        定义的数据2：xxx,
        ......
    },
    ......
})

例子：

Page({
  data: {
    p: "js里的data"
  }
 
})

2、在WXML里引用这些数据

学过vue对这个不会陌生，又是Mustache语法，也就是“双花括号”：{{ }}，模板：

<view>{{ 要绑定的数据变量名字 }}</view>

例子：

<view>{{ p }}</view>

3、标签的属性也可以动态绑定数据

例子：

<image src="{{ src }}" mode=""/>

Page({
  data: {
     src: "../img/树.jpg"
  }
 
})

4、另外，{{ }}里还可以做算术运算，这里不做演示了，反正就是能算数就行了

三、事件

1、有哪些事件？怎么在WXML绑定？

一般来说就这几个常用的，截一下黑马的图简单看看

在WXML里写的方式很简单，就【bind+事件="js里写的函数名"】，或者【bind：事件="js里写的函数名"】

2、在JS里怎么写对应绑定事件的函数

然后接着就是再JS文件里写对应名字的函数就行了，也很简单，这些函数都是跟data同级的，在data后面写个逗号“,”，然后接着写函数就行了：

3、事件对象

跟JavaScript一样，每个事件的触发都会产生一个对应的【事件对象】——>【event】，下面是它的一些属性详情：

我知道以各位的智商肯定看不懂也不想看，那么下面我将结合案例给大伙看看这些属性到底是啥：

(1)tap事件

例子1：设置一个按钮，点一下就在控制台输出这个“点击”事件对象

<!-- WXML部分 -->
<view id="father" bind:tap="showE">
  <!-- 注意！！我是给view这个父盒子绑定的tap事件，而不是给按钮button！！ -->
  <button type="primary" id="son">点一下返回一个当前事件信息</button>
</view>

//WXSS部分
view{
  padding-top: 30px;
  height: 100px;
  background-color: burlywood;
}

这里js里如果要输出事件对象，就给函数传入【事件对象参数】就行了，在JavaScript里教过，事件对象要么叫event、要么叫e，看自己喜欢任选一个传进去就行

//JS部分
Page({
  data: {
    //数据信息 
  },
  showE(e){
    console.log(e)
  }
})

这个事件就是点击（tap）事件，现在我点击一下【绿色这个按钮】后输出了事件对象：

我再提示一下，我是给【view】绑定的【tap事件】，【button】啥也没有；但是我点击的时候点的是【button】，而不是点【view】。（view的id是father，button的id是son）所以会看到currentTarget指向father，target指向son；

可是为什么点了button也会触发事件？为什么又会涉及到view？因为button不也是包在view里面吗？点击button不也算是点view嘛。然后学过JavaScript的会知道【冒泡机制】，点击子元素的时候，触发的事件会往外冒泡，牵连到它的父容器元素也触发该事件，所以会牵连到view

(2)input事件和change事件

例子2：现在再演示一下input事件和change事件

<!-- WXML部分 -->
<input bindinput="inputContent" value="bind:input"/>

<input bind:change="changeContent" value="bind:change"/>


//WXSS部分
input{
  width: 55%;
  border:1px solid black;
  margin-top: 30px;
  margin-left: 70px;
}

Page({
  data: {
    //数据信息 
  },
  inputContent(e){
    console.log(e)
  },
  changeContent(e){
    console.log(e)
  }
})

那么input事件就是你只要写了东西，或者删除了东西，文本框有一点变化都会触发它，这里我只是删了几个字就打出来一堆事件对象

而change事件就是不管你写了什么、删了什么，只有当你摁下【enter】键之后才会触发

那么怎么获取input输入的值？

【e.detail.value】就可以获得了

Page({
  data: {
    //数据信息 
  },
  inputContent(e){
    console.log(e.datail.value)
  }
})

四、动态改变data的数据

这里跟JavaScript学的有所不同，以前我们学JavaScript时改变数据不就直接【this.数据加减乘除】吗，但是这里要调用到一个函数：【this.setData()】

但是在this.setData()函数外面，我们还是可以用【this.data.数据】这样来做一些运算操作，但是不管外面【this.data.数据】怎么变了，最后还是得依靠【this.setData()】来给它设置新的值。还有，在【this.setData()】里this的指向会变，如果实在要用this，最好在外面用个变量存下this，在用这个变量（像const that = this, that.data.xxx......这样）

第一步：在JS里与data同级的地方写对应某个事件绑定的函数，然后在里面调用【this.setData()】

第二步：在【this.setData()】里传入一个对象参数：【{ ...... }】

第三步：在{ ...... }对象里不能直接对数据加减乘除，要按照data对象的写法那样，【数据: this.data.数据(加减乘除)】，相当于重新定义一个新的对象并获得新的值，然后再将这个对象值给回并覆盖原本data对象的值

例子：点击按钮下面数据就增加

<!-- WXML部分 -->
<view>
  <button type="primary" bind:tap="changeData">点一下返回一个当前事件信息</button>
  <text>{{ count }}</text>
</view>

//WXCC部分
view{
  padding-top: 30px;
  height: 100px;
  background-color: burlywood;
}
text{
  font-size: 27px;
  margin-left: 140px;
  background-color: darkorange;
}

//JS部分
Page({
  data: {
    //数据信息
    count: 0
  },
  //tap事件绑定的函数
  changeData(){
    //this.setData()函数改值
    this.setData({
      //按照对象的写法
      count: this.data.count + 1
    })
  }
})

那么这里有一个问题，我在学到后面做实例的时候发现的一个问题：

我想做一个轮播图，这里的图片是来自一个“随机生成图片”的网络API接口，那么要让轮播图有多张图片，当然就是利用【wx:for】（下面会讲到）指令来遍历一个数组，那就需要一个数组来获取这个“随机生成图片”的网络API接口传回来的图片url链接，但是this.setDate()函数我发现这个bug导致我很头疼，看一下下面这个图片就知道了

后面研究了半天终于得到一个方法动态改变data的数组的值：

1、在wx.request( )函数里发送完请求，然后再wx.request( )里、this.setData( )外，用一个变量先获取到【传回来的数据值】

getImg(){
    wx.request({
      url: 'https://qqlykm.cn/api/free/random/get',
      method: 'get',
      data: {
        key: '0usuKOMipmKqjBXis3l1hD6PZK'
      },
      success: (res) => {

        //在这我定义一个新数组list，用来代替data的img数组，也就是原数组
        let list = this.data.img
        //然后用【数组.push()】的方法给数组后面添加元素
        list.push(res.data.data.img)

        this.setData({
          //......
        })
      } 
    })
  }

2、然后，现在这个list“临时数组”已经获取到图片src值了，然后再到this.setData( )函数里真正把值给回data的img[ ]数组，物归原主，达到data的数组改变值的效果

getImg(){
    wx.request({
      url: 'https://qqlykm.cn/api/free/random/get',
      method: 'get',
      data: {
        key: '0usuKOMipmKqjBXis3l1hD6PZK'
      },
      success: (res) => {
        let list = this.data.img
        list.push(res.data.data.img)
        this.setData({
            
          //这里才是真正把值给到data的img数组
          img: list

        })
      } 
    })
  }

补充，微信小程序里数组的操作

Array.push() ：在数组后面继续插入内容

Array.pop()：拿走数组最后一个内容

Array…shift()：拿走数组的第一个内容 (unshift也是拿走最后一个)

Array.reverse()：对数组从大到小排列

Array.sort()：对数组从小到大排列**

Array.splice(起始位置 , 位数,”增添内容”)：从数组中取出以起始位置开始的位数的内容，并写入增添内容，可用来删除内容与替换,例如people.aplice(1，2，“name”)

Array.concat()：将两个或多个数组合并成一个新数组，并返回新数组

Array.splice()：从数组中增删元素，并返回被删除的元素

五、函数传参

1、在WXML里怎么传参？

微信小程序绑定事件的机制有点头疼，因为【bind事件】绑定的是一个函数名字符串，这个一整串字符串就是函数名字，就不能直接传参了，比如下面这样写是错的、电脑看不懂

<button bindtap="show(123)">按钮</button>
//报错！(123)也会被当作函数的名字

那么有个办法：在标签里加上【data-自定义形参名字 = " {{ 实参 }} "】，data-后面接的东西会被解析成传给函数的【形参】，" "里的东西会被解析为【实参值】

2、怎么在JS函数里获取到实参？

好，现在你传过去了，怎么获取实参呢？有些人看我前面说：data-后面接的东西会被解析成传给函数的【形参】，然后就直接在JS里这么写，错！！

btbHandler(info){
    console.log(info)
}

微信小程序就是这么麻烦......你只能在JS函数里传event事件对象参数，然后再调用【event.target.dataset.参数名】才能获取到实参数值......

例子：（WXSS代码我就免了，跟前面一样的）

<view>
  <button type="primary" bind:tap="show" data-num="{{666}}">点一下返回函数参数</button>
  <!-- 现在data-后面的【num】会解析为参数名，【666】就是它的值 -->  
  <text>{{ count }}</text>
</view>

Page({
  data: {
    //数据信息
    count: 0
  },
  //tap事件绑定的函数
  show(e){
    console.log(e)
    console.log(e.target.dataset.num)
    //this.setData()函数改值
    this.setData({
      count: e.target.dataset.num
    })
  }
})

六、条件渲染

1、wx:if

可以通过【条件渲染】来根据不同的条件渲染不同的值，你可以在JS部分直接if-else判断设置值，当然也可以用新方法：在WXML里用【wx:if】来条件渲染

【wx:if】【wx:elif】【wx:else】就等于【if(...){...}else if(...){...}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的属性（但是注意，block不是一个组件，他只是一个包裹性质的容器，他不会再页面上有任何渲染，不要浪费精力去给block设置样式）

wx:if判断【true】，block就显示；【false】就隐藏

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

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

3、补充一下，还可以用hidden属性来【隐藏】、【显示】

这个就不用搭配wx:if了，直接判断{{ }}里面，true就隐藏，false就显示

<view hidden="{{false}}">hidden控制隐藏、显示</view>

那么wx:if和hidden有什么区别？

前面学了wx:if知道，wx:if是根据判断条件来控制这个组件【渲染还是不渲染】，简单说就是符合条件就有这个组件，不符合就移除组件

而hidden的本质是设置样式，true的时候就自动设置display: none，不符合条件就自动设置display: block，控制组件显示、隐藏

4、wx:for遍历数组

给WXML标签设置了【wx:for】就可以遍历数组，{{ }}里写data设置的数组名字，

然后微信小程序自带的index是数组的下标、item是数组的每个成员

例子：

<view wx:for="{{ Arrays1 }}">
  <!-- index就是数组的下标，不是自定义的，微信小程序自带的 -->
  <!-- item就是遍历的数组每个成员，不是自定义的，微信小程序自带的 -->
  {{ index+1 }}、{{ item }}
</view>

Page({
  data: {
    Arrays1: [1,2,3,4,5]
  }
})

当然你要是不喜欢微信小程序自带的index、item名字，你也可以自己改

wx:for-index=" "自定义下标名， wx:for-item=" "自定义成员名

<view wx:for="{{ Arrays2 }}" wx:for-index="i" wx:for-item="name">
<!-- wx:for-index="i"自定义了下标名是i -->
<!-- wx:for-item="name"自定义了成员用name代替 -->
  {{ i+1 }}、{{ name }}
</view>

Page({
  data: {
    Arrays2:['Mike','岑梓铭','Jony J','Curry','你大爷','哇哈哈','我是你爹']
  }
})

5、最后补充一下：wx:key

跟数据库一样，微信小程序希望每个列表数据都有主键，以防止出现重复冗余数据

wx:key=""设置主键，里面不需要再{{}}这样写，直接写属性名就行

还有，对象的话就设置id为主键，没有的话直接设置下标index也可以

例子：前面的例子我没有设置wx:key，它就会报警告

那么我都给他们设置index下标为主键就行了

<view wx:for="{{ Arrays1 }}" wx:key="index">
  {{ index+1 }}、{{ item }}
</view>

<view wx:for="{{ Arrays2 }}" wx:for-index="i" wx:for-item="name"  wx:key="i">
  {{ i+1 }}、{{ name }}
</view>

然后这里我设置一个对象数组，里面我设置有一个属性是id，那么我这里就以这个id为主键：

<view wx:for="{{ Arrays3 }}" wx:key="id">
  {{ index+1 }}、{{ item.name }}
</view>

Page({
  data: {
    Arrays3:[{
              id:1,
              name:'周杰伦'
             },
             {
              id:2,
              name:'岑梓铭'
             },
             {
              id:3,
              name:'Jony J'
             }]
  }
})

下一篇将讲：WXSS模板样式

岑梓铭

关注

28
点赞
踩
13

收藏

觉得还不错? 一键收藏
1
评论
第三篇：微信小程序的【WXML模板】配合【JS】的代码编写

Pages({data: {定义的数据1：xxx,定义的数据2：xxx,......},......})Page({data: {p: "js里的data"})跟数据库一样，微信小程序希望每个列表数据都有主键，以防止出现重复冗余数据wx:key=""设置主键，里面不需要再{{}}这样写，直接写属性名就行还有，对象的话就设置id为主键，没有的话直接设置下标index也可以例子：前面的例子我没有设置wx:key，它就会报警告那么我都给他们设置index下标为主键就行了。
复制链接

扫一扫