小程序中WXS的使用

最新推荐文章于 2025-02-27 01:46:34 发布

原创最新推荐文章于 2025-02-27 01:46:34 发布 · 888 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

微信专栏收录该内容

13 篇文章

订阅专栏

博客介绍了WXS模块，指出每个.wxs文件和标签是独立模块，有独立作用域，模块内变量和函数默认私有，需通过module.exports对外暴露。还包含案例及使用说明、demo效果图案例和相关代码，如wxml、js、wxss。

一、介绍

每一个 .wxs 文件和标签都是一个单独的模块。

每个模块都有自己独立的作用域。即在一个模块里面定义的变量与函数，默认为私有的，对其他模块不可见。

一个模块要想对外暴露其内部的私有变量与函数，只能通过 module.exports 实现。

二、案例及使用

<!--wxml-->

<wxs module="foo">
var some_msg = "hello world";
module.exports = {
  msg : some_msg,
}
</wxs>
<view> {{foo.msg}} </view>

页面输出

hello world

三、demo效果图案例

在这里插入图片描述

四、案例代码

wxml

 <view class="condition-item" wx:for="{{returnData}}" wx:key="{{name}}">
    <view class="title">{{item.name}}</view>
    <view class="tabs">
      <wxs module="helper">
        module.exports.includes = function(arr, str){ return arr.indexOf(str)>=0 || (arr.length===0&&!str) }
      </wxs>
      <view wx:for="{{item.data}}" data-item="{{item}}" bindtap="itemHandleClickFun" class="{{helper.includes(params[item.qiuhao],item.val) ? 'active' : ''}}">{{item.name}}</view>
    </view>
  </view>

// 数据定义
    params: {
      totalPrice: [],
      areas: [],
      roomCount: [],
  },
  paramsName: {
      totalPrice: [],
      areas: [],
      roomCount: [],
  },
  cityNames: '',
  returnData: [
      {
          name: '请选择总预算',
          type: 'totalPrice',
          multi: true,
          data: [
              {
                  qiuhao: 'totalPrice',
                  name: '50万以下',
                  val: '0-50'
              },
              {
                  qiuhao: 'totalPrice',
                  name: '50-80万',
                  val: '50-80'
              },
              {
                  qiuhao: 'totalPrice',
                  name: '80-100万',
                  val: '80-100'
              },
              {
                  qiuhao: 'totalPrice',
                  name: '100-120万',
                  val: '100-120'
              },
              {
                  qiuhao: 'totalPrice',
                  name: '120-150万',
                  val: '120-150'
              },
              {
                  qiuhao: 'totalPrice',
                  name: '150-200万',
                  val: '150-200'
              },
              {
                  qiuhao: 'totalPrice',
                  name: '200-300万',
                  val: '200-300'

              },
              {
                  qiuhao: 'totalPrice',
                  name: '300万以上',
                  val: '300-0'
              }
          ]
      },
      {
          name: '请选择购房面积',
          type: 'areas',
          multi: true,
          data: [
              {
                  qiuhao: 'areas',
                  name: '50㎡以下',
                  val: '0-50'
              },
              {
                  qiuhao: 'areas',
                  name: '50-70㎡',
                  val: '50-70'
              },
              {
                  qiuhao: 'areas',
                  name: '70-90㎡',
                  val: '70-90'
              },
              {
                  qiuhao: 'areas',
                  name: '90-110㎡',
                  val: '90-110'
              },
              {
                  qiuhao: 'areas',
                  name: '110-130㎡',
                  val: '110-130'
              },
              {
                  qiuhao: 'areas',
                  name: '130-150㎡',
                  val: '130-150'
              },
              {
                  qiuhao: 'areas',
                  name: '150-180㎡',
                  val: '150-180'

              },
              {
                  qiuhao: 'areas',
                  name: '200㎡以上',
                  val: '200-0'
              }
          ]
      },
      {
          name: '请选择购房户型',
          type: 'roomCount',
          multi: true,
          data: [
              {
                  qiuhao: 'roomCount',
                  title: '不限',
                  name: '不限',
                  type: 1,
                  value: '',
                  val: ''
              },
              {
                  qiuhao: 'roomCount',
                  title: '一居',
                  name: '一居',
                  type: 1,
                  value: '1',
                  val: '1'
              },
              {
                  qiuhao: 'roomCount',
                  title: '二居',
                  name: '二居',
                  type: 1,
                  value: '2',
                  val: '2'
              },
              {
                  qiuhao: 'roomCount',
                  title: '三居',
                  name: '三居',
                  type: 1,
                  value: '3',
                  val: '3'
              },
              {
                  qiuhao: 'roomCount',
                  title: '四居',
                  name: '四居',
                  type: 1,
                  value: '4',
                  val: '4'
              },
              {
                  qiuhao: 'roomCount',
                  title: '五居',
                  name: '五居',
                  type: 1,
                  value: '5',
                  val: '5'
              },
              {
                  qiuhao: 'roomCount',
                  title: '五居以上',
                  name: '五居以上',
                  type: 1,
                  value: '6',
                  val: '6'
              }
          ]
      }
  ]
// 点击方法
 itemHandleClickFun(e) {
    const {item} = e.currentTarget.dataset;
    let arr = this.data.params[item.qiuhao]
    let arr2 = this.data.paramsName[item.qiuhao]
    const idx = arr.indexOf(item.val);
    console.log(arr,arr2,idx)
    if (item.val) {
        if (idx < 0) {
            arr.push(item.val)
            arr2.push(item.name)
        } else {
            arr.splice(idx, 1)
            arr2.splice(idx, 1)
        }
        // console.log(arr,arr2,idx)
    } else {
        arr = [];
        arr2 = [];
    }
    this.setData({
        [`params.${item.qiuhao}`]: arr,
        [`paramsName.${item.qiuhao}`]: arr2,
    });
    console.log(e.currentTarget.dataset)
},

wxss

.tabs {
  overflow: hidden;
}
.tabs view{
  float: left;
  width: 160rpx;
  height: 60rpx;
  border-radius: 12rpx;
  background: #F5F6F8;
  margin-right: 20rpx;
  margin-bottom: 30rpx;
  line-height: 60rpx;
  text-align: center;
  font-size: 24rpx;
  color: #4A4A4A;
  font-weight:400;
}
.tabs view:nth-child(4n+0){
  margin-right: 0;
}
.tabs .active{
  background: #1586EE;
  color: #fff;
}