微信小程序：<wxs module>实现星级评论 和 音频播放的代码段

结构：

- <wxs module>实现星级评论

- 音频播放

- 今日总结

1.<wxs module>

 1 <wxs module="detailTool">
 2   var rankEnum = function (rank) {
 3     // 1星  差评 2星 一般 3星 还不错 4星 满意 5星 非常好
 4     switch(rank) {
 5       case 1: return '差评';
 6       case 2: return '一般';
 7       case 3: return '还不错';
 8       case 4: return '满意';
 9       case 5: return '非常好';
10       default: return '无点评';
11     }
12   }; 
13   module.exports = { rankEnum: rankEnum };
14 </wxs>    # 一般先将该代码段放在用到的wxml页面中，ps:因为我不知道怎么import
15 
16 <view class='veryGood'>{{detailTool.rankEnum(classDetail.class_rank)}}</view>
17 # 上面的字段中 detailTool.rankEnum() 代表使用该模块的rankEnum方法，传入的参数根据具体使用场景

根据上面的模板写了以下组件---星级评论

//wxml
<wxs module="iconTool">
  var rankEnum = function (rank) {
    switch(rank) {
      case 1: return '/images/rank1.png';  // 这里rank大于0的都是点亮的星星，只不过程度不同，rank越高星星越亮
      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 };
</wxs>
<view class="icons-ctn">
  <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>

//js
Component({
  properties: {
    rank: {
      type: Number,
      value: 0,
    },
  },
});

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

引用的时候这么用：

//用组件名做标签，传入需要的参数
<rankIcons rank="{{classDetail.class_rank}}"></rankIcons>

2.小程序内播放音频（这段我也不太懂，直接抄，码起来下次用）

先看js：

扫描二维码关注公众号，回复： 6018337 查看本文章

// js
data: {
    pass_time: '00:00',
    total_time: '00:00',
    playing: false,
    endPlay: false,
    playStart: false,
  },
  playRec(condition) { 
    const { voice_comment } = this.data;
    // const voice_comment = '/klass/voice_comment/A03E6ACA-2CAB-4829-9C9F-80A62BBC06E6.mp3';
    if (!voice_comment) {
      this.tip('音频为空！');
    } else {
      const audio = `https://p.oss.kuaipeilian.com${voice_comment}`;
      const innerAudioContext = wx.createInnerAudioContext();
      this.innerAudioContext.autoplay = true;
      this.innerAudioContext.src = audio;
      this.innerAudioContext.play();
      this.setData({
        playing: true,
        endPlay: false,
        playStart: false,
      })
    }
  },
  endPlay: function () {
    const that = this;
    this.innerAudioContext.pause();
    this.setData({
      playStart: false,
      endPlay: false,
      playing: false
    })
  },
  contiunePlay: function () {
    this.innerAudioContext.play();
    this.setData({
      playStart: false,
      endPlay: false,
      playing: true
    })
  },
  tip: function (msg) {
    wx.showModal({
      title: '提示',
      content: msg,
      showCancel: false
    })
  },
  onLoad: function (options) {
    var that = this;
    //this.innerAudioContext = wx.createInnerAudioContext();
    this.innerAudioContext = wx.createInnerAudioContext();
    this.innerAudioContext.onError((res) => {
      that.tip("播放录音失败！");
      that.setData({
        playStart: false,
        endPlay: true,
        playing: false
      })
    })

    this.innerAudioContext.onTimeUpdate(function () {
      var currentTime = that.innerAudioContext.currentTime.toFixed(0);
      if (currentTime > that.data.max) {
        currentTime = that.data.max;
      }
      var pass_time = that.secondTransferTime(currentTime);
      that.setData({
        value: currentTime,
        pass_time: pass_time,
        percent: that.innerAudioContext.buffered / that.innerAudioContext.duration * 100,
        disabled: false
      })
    })

    this.innerAudioContext.onEnded((res) => {
      //console.log('jieshu');
      that.setData({
        playStart: false,
        endPlay: false,
        playing: false,

        value: 0,
        pass_time: '00:00',
        percent: 0,
      })
    })

  },
  
  seek: function () {
    var value = this.wxzxSlider.properties.value
    //console.log(value)
    var seek_time = value.toFixed(0);
    var pass_time = this.secondTransferTime(seek_time);
    this.setData({
      pass_time: pass_time,
    })
    this.innerAudioContext.seek(Number(seek_time));
  },
  secondTransferTime: function (time) {
    if (time > 3600) {
      return [
        parseInt(time / 60 / 60),
        parseInt(time / 60 % 60),
        parseInt(time % 60)
      ]
        .join(":")
        .replace(/\b(\d)\b/g, "0$1");
    } else {
      return [
        parseInt(time / 60 % 60),
        parseInt(time % 60)
      ]
        .join(":")
        .replace(/\b(\d)\b/g, "0$1");
    }
  },

wxml：

 1 //wxml
 2 <view class="audioBox" wx:if="{{classDetail.comment!=''}}" style='margin-left:8rpx;margin-bottom:40rpx;'>
 3   <image src='../../images/voiceBackground.png' class='voiceBg'></image>
 4   <image wx:if="{{playing==false && endPlay==false}}" src="../../images/voicePlay.png" class="playButton" bindtap='playRec(Require)'></image>
 5   <image wx:if="{{playing==true}}" src="../../images/voiceStop.png" class="playButton" bindtap='endPlay'></image>
 6   <image wx:if="{{playing==false && endPlay==true}}" src="../../images/voicePlay.png" class="playButton" bindtap='contiunePlay'></image>
 7   <image wx:if="{{playing==true}}" src="../../images/Playing.gif" class='playing'></image>
 8   <view wx:if="{{endPlay==true || playing==false&&playstart}}" class='playTime' >{{total_time}}</view>
 9   <view wx:else class='playTime'>{{pass_time}}</view>
10</view>

3.今日总结

　今天是接触前端第10天了吧，今天也算是我第一次上手做项目，写代码很慢，变量名乱起，css写的到处都是，通过今天的工作经验我总结出：

(1).组件化思想，就像今天的这个星星评级，以后开发过程中很可能再次用到，这时我们最好做一个组件，提高代码复用率；

(2).全局观，写一个页面的时候先考虑好怎样布局最省事，最好能找到各个部分的相似点，布局时能够将一个css多用，提高工作效率；

(3).统一命名规范，这个很重要，因为统一规范，别人维护你的代码时会更容易，团队协同开发效率更高。

先写这么多吧，时间匆忙，大家随意看一下。