微信小程序在XML页面使用JS功能。

编辑:睿儿发表于:2021-06-09 08:22:25 54 次阅读

功能需求,在小程序中需要实现:通过价格判断是否为收费项目(价格为0的显示免费,价格有数值的显示购买按纽)

image.png


在后台调用数据的时候使用FOREACH的方法把所有数据都装入了数组,所以没有把价格判断的功能装入数组,这就需要在前台判断一下。微信小程序的语言里面有一个叫做 .WXS 的东西。

参考资料:https://developers.weixin.qq.com/miniprogram/dev/reference/wxs/

根据文档介绍,我们可以在小程序的WXML文件中使用wxs语言来完成JS语言的工作。

官方说明:

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

WXS 与 JavaScript 是不同的语言,有自己的语法,并不和 JavaScript 一致。


虽然这么说,但我们依然可以用WXS语言来做很多功作,比如上图中的价格判断,现在放出实例代码:

在WXML文件中引入 WXS语言文件 ,并给它指定一个调用名称。

<wxs src="isbuy.wxsmodule="app"/>

//isbuy.wxs
var isBuy = function(buyItems,item) {
  var buyItem = -1;
  for(var i=0;i<buyItems.length;i++){
    if(buyItems[i]==item){
      buyItem =1;
    }
  }
  return buyItem;
}
module.exports = {isBuy: isBuy,}

这样就可以在WXML文件中使用它了。


 
wx:if="{{app.isBuy(buyItems,item.id)==-1}}"


把已购买的数组 buyItems 与 当前的商口id  item.id传入wxs方法里面。 这个方法的效果是:如果ID包含在数组中则返回,如果没有包含则返回-1 

这样我们就能判断ID是否在已购数组中,从而判断该怎么展示内容了。 


原文地址:http://www.zjkdh.com/library/202106/90.html(张家口导航-睿儿知识库)

张家口睿儿网络科技有限公司版权所有