受欢迎的博客标签

wechat-微信小程序Asp .Net Core开发实战记录(44)-wxs

Published

1.在单一页面中直接引用wxs

https://blog.csdn.net/qq_41638795/article/details/100119592

js

data: {
    list:[{
      userId:'1',
      userName:'小白',
      },{
        userId: '2',
        userName: '大白',
      }, {
        userId: '3',
        userName: '小花',
      }, {
        userId: '4',
        userName: '大花',
      }
    ],
    selectData: ['1','2']
}

wxml

<view>
  <wxs module="filter">
    var isChecked = function(userId,data){
      return data.indexOf(userId) !=-1 ? true:false;
    }
    module.exports = {
      isChecked: isChecked
    }
  </wxs>
  <scroll-view class='section' style='height: calc(100vh);'  scroll-y>
    <checkbox-group  bindchange="checkboxChange">
      <view class='item' wx:for="{{list}}" wx:key="{{index}}" >
        <view>
          {{item.userName}}
        </view>
        <checkbox value='{{item.userId}}' checked='{{filter.isChecked(item.userId,selectData)}}'></checkbox>
      </view>
    </checkbox-group>
  </scroll-view>
</view

output

效果如下:

 

2.单独创建一个wxs文件

wxs模块类似于vue中filter过滤器,如果wxs代码过多,可单独创建一个wxs文件,然后在wxml中引入即可

step 1.wxs

新建一个wxs文件

miniprogram\wxs\AuthorizeView.wxs

//https://blog.csdn.net/qq_41638795/article/details/100119592

var filters = {
  isChecked: function (authorizeLevel, employeeLevel) {
    if (authorizeLevel == 0 || authorizeLevel == undefined) {
      return;
    }

    if (employeeLevel >= authorizeLevel) {
      return true;
    } else {
      return false;
    }

  }
}


module.exports = {

  isChecked: isChecked,
}

step 2:在wxml文件中引入

<wxs module="filters" src="../..//../../wxs/AuthorizeView.wxs"></wxs>

 

//https://blog.csdn.net/xbw12138/article/details/78966916
var filters = {
  toFix: function (value) {
    return value.toFixed(2)//此处2为保留两位小数
  }
}

//https://blog.csdn.net/cangahi09025566/article/details/82589831
var sub = function (val) {
  if (val.length == 0 || val == undefined) {
    return;
  }
  if (val.length > 17) {
    return val.substring(19, 11);
  } else {
    return val;
  }
}


module.exports = {
  toFix: filters.toFix,
  sub : sub,
}

2.

<wxs module="filters" src="../utils/addmul.wxs"></wxs>
	<view>可访问级别:12 ,员工级别:{{EmployeeRoles.Level}} 权限检查:{{filters.isAuthorizeView(12,EmployeeRoles.Level)}}</view>
	<view class="weui-cells__title" wx:if="{{!filters.isAuthorizeView(12,EmployeeRoles.Level)}}">您没有权限</view>
<view class="weui-cells__title" wx:if="{!filters.isAuthorizeView(12,EmployeeRoles.Level)}}">
您有权限</view>