小程序wxs模块实现星级评分

WXS

wxs是小程序的一套脚本语言，结合wxml，合一构建出页面结构。

tips:

• 1.wxs 不依赖运行时的基础库版本，可以在所有版本的小程序中运行；
• 2.wxs 和 JavaScript是不同的语言，有自己的语法；
• 3.wxs的运行环境和其他JavaScript代码是隔离的，wxs中不能调用其他JS文件中定义的函数，也不能调用小程序的api；
• 4.wxs不能作为组件的事件回调；
• 5.wxs在ios上可能比JavaScript快2-20倍，但是在安卓上没有差异。

效果图如下： 1556685871669.jpg

代码如下：

//   ./module/StarComTool.wxs
var rankEnum = function (rank) {
  // rank0 - rank5 分别为不同评级时显示的星星的染色程度，rank等级越高星星颜色越深，rank0代表灰色，没有星星
    switch(rank) {
      case 1: return '/images/rank1.png';
      case 2: return '/images/rank2.png';
      case 3: return '/images/rank3.png';
      case 4: return '/images/rank4.png';
      case 5: return '/images/rank5.png';
      default: return '/images/rank0.png';
  }
};

module.exports = { rankEnum: rankEnum };

//  ./pages/demo1/demo.wxml
<wxs src="../../module/StarComTool.wxs" module="iconTool"></wxs>
<view class="icons-ctn">
<!-- 这里rank为传入的参数 -->
  <image wx:for="{{ rank }}" wx:key="index" src="{{iconTool.rankEnum(rank)}}" class='img-wrap'></image>
  <image wx:for="{{ 5 - rank }}" wx:key="index" src="/images/rank0.png" class='img-wrap'></image>
</view>

//   ./pages/demo1/demo.wxss
.icons-ctn {
  display: flex;
  justify-content: space-around;
  height: 50rpx;
  width: 330rpx;
  margin-left: 34rpx;
}
.img-wrap {
  width: 50rpx;
  height: 50rpx;
}

喜欢的朋友加个关注呗~