微信小程序使用条件渲染includes无效

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第5天，点击查看活动详情

遇到的bug

今天进行业务开发时，需要判断点击的数组中是否有'chinese'元素，有则修改class样式。结果，遇到了这么一个问题，就是在微信小程序wxml页面编写动态class时，使用includes语法无法生效。检查再三，发现自己的语法并没有问题。但怎么都不生效。具体代码如下所示：

  <view class="buy2 {{subjectActiveArr.includes('chinese')?'buyActive':''}}" bindtap="chooseSubject" data-subject="chinese">语文</view>

寻求解决方案

经百度才发现，以上写法确实是wxml语法不支持的。那么，我们只能寻找其他的解决方案，这时候看到了wxs。

那么什么是wxs呢？

WXS（WeiXin Script）是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构。

想要点击WXS的详细语法，可以参考WXS 语法参考

使用WXS需要了解以下几点：

1. WXS 不依赖于运行时的基础库版本，可以在所有版本的小程序中运行。
2. WXS 与 JavaScript 是不同的语言，有自己的语法，并不和 JavaScript 一致。
3. WXS 的运行环境和其他 JavaScript 代码是隔离的，WXS 中不能调用其他 JavaScript 文件中定义的函数，也不能调用小程序提供的API。
4. WXS 函数不能作为组件的事件回调。
5. 由于运行环境的差异，在 iOS 设备上小程序内的 WXS 会比 JavaScript 代码快 2 ~ 20 倍。在 android 设备上二者运行效率无差异。

最终实现

因此，使用wxs也是需要遵循他的语法的，经实践，使用indexOf可以实现本需求。具体代码如下：

  <wxs module="m1">
      var getinclude = function (array,text) {
           return array.indexOf(text) !== -1
      }
     module.exports.getinclude = getinclude;
  </wxs>
  <view class="buy2 {{m1.getinclude(subjectActiveArr,'chinese')?'buyActive':''}}" bindtap="chooseSubject" data-subject="chinese">语文</view>

至此，该bug就解决啦。遇bug不慌，轻松解决。