本文结合项目开发过程中的具体需求场景，介绍了微信小程序中如何使用循环索引动态生成class或者id。通过阅读本文可以学习到：1.微信小程序开发过程中需要动态绑定class的场景 2.微信小程序video组件的相关使用方法 3.wx.createVideoContext以及wx.createSelectorQuery的使用 4.wxs的作用和使用方法。欢迎阅读本文，一起学习~

需求场景

笔者在开发微信小程序时，遇到如下图所示的需求：

如上图所示，我们需要把video组件默认的播放控件（播放/暂停按钮等）隐藏，然后使用UI提供的播放按钮icon（下文称其为：自定义播放按钮），通过点击这个自定义播放按钮来播放视频。

video组件是通过循环遍历消息列表动态生成的，所以会存在多个video组件，那么如何判断当前点击的是哪一个video组件呢？不难想到我们可以给video组件加上动态的class和（或）id用来标定当前的video组件，然后通过wx.createVideoContext和（或）wx.createSelectorQuery 来获取当前的video组件。

动态绑定class的一般场景

一般的常见动态绑定class的场景如下：

<view wx:for="{{blockList}}" class="{{item.hasRead ? 'read-class': 'unread-class'}}" >
    {{item.content}}
</view>

如上代码所示，这种场景就是根据元素的状态（例如是否选中等）来显示不同的样式。

根据循环索引生成动态class

如果要根据循环的索引index来生成不同的样式该如何做呢？笔者尝试如下的方式：

<video  class="message-video {{ `video-${index}` }}" 
  wx:if="{{item.messageType === 5}}">
</video>

可是编译器提示报错：

就在笔者一筹莫展之时，看到了文末参考资料【3】，文中提到可以使用WXS中定义的模块来解决此类问题，关于WXS的内容读者可以阅读参考资料【1】、【2】，笔者不在此赘述。使用WXS，笔者就可以解决使用循环索引生成动态class的问题啦，上代码：

<wxs module="classGenerate">
function getVideoClass(index) {
  console.log('调用啦吗')
  return "video-"+index
}
module.exports.getVideoClass = getVideoClass;
</wxs>

这段代码可以放到wxml文件的最上面，然后就可以这样使用了：

<video   
  controls="{{false}}" 
  class="message-video {{ classGenerate.getVideoClass(index)}}"
  wx:if="{{item.messageType === 5}}" 
></video>

使用调试工具中的wxml Panel 检查video元素可以看到其已经被加上动态生成的样式了：

解决需求

有了动态生成的class之后，就可以实现本文最初提到的需求场景了。这里为了简单起见，我们把video组件的自身控件都隐藏，然后为其绑定一个点击事件，当点击video组件的时候播放视频。wxml代码如下：

<video 
  id="{{classGenerate.getVideoClass(index)}}" 
  data-class="{{classGenerate.getVideoClass(index)}}" 
  bindtap="playVideo"  
  controls="{{false}}"  
  class="message-video {{ classGenerate.getVideoClass(index)}}" 
  wx:if="{{item.messageType === 5}}" 
></video>

playVideo方法如果使用wx.createSelectorQuery则代码如下：

playVideo(e:any) {
  const videoFlag = e.currentTarget.dataset.class;
  const query = wx.createSelectorQuery()
  query.select(`.${videoFlag}`).context((res) => {
    const videoContext:any = res
    console.log(videoContext)
    videoContext.play()
  }).exec()
},

playVideo方法如果使用wx.createVideoContext则代码如下：

playVideo(e:any) {
  const videoFlag = e.currentTarget.dataset.class;
  const videoContext:any = wx.createVideoContext(videoFlag, this)
  console.log(videoContext)
  videoContext.play()
},