大家好，我是香江鱼，接着搞我的《音乐画板》。

提审结果

这次提审非常顺利，两天后就直接审核通过并自动上线了。

查看数据，到目前2020年3月27号为止，共有34人玩过了，哈哈，非常开心！

当然，这只是尝鲜版，再接再厉，继续开发！

音乐库功能的初步开发

初步想法是先把音乐库存放在数组里面，以后再考虑在线更新的问题。

这里用到了模块机制，先在pages下面建了一个common文件夹，再在里面建了一个songs.js作为音乐库的数据模块。

let songs = [
    {
        id:"0",
        name:"两只老虎",
        notes:"1,2,3,1,1,2,3,1,3,4,5,3,4,5,5,6,5,4,3,1,5,6,5,4,3,1,2,5.,1,2,5.,1",
        author:"作词、作曲：佚名",
        lock:0,
        display:1,
    },
    {
        id:"1",
        name:"小星星",
        notes:"1,1,5,5,6,6,5,4,4,3,3,2,2,1,5,5,4,4,3,3,2,5,5,4,4,3,3,2,1,1,5,5,6,6,5,4,4,3,3,2,2,1",
        author:"填词：简.泰勒 谱曲：莫扎特",
        lock:0,
        display:1,
    },
    {
        id:"2",
        name:"我的祖国",
        notes:"",
        author:"",
        lock:1,
        display:0,
    },
    {
        id:"3",
        name:"梁祝",
        notes:"",
        author:"",
        lock:1,
        display:0,
    },
    {
        id:"4",
        name:"世上只有妈妈好",
        notes:"",
        author:"",
        lock:1,
        display:0,
    },
    {
        id:"5",
        name:"沧海一声笑",
        notes:"",
        author:"",
        lock:1,
        display:0,
    },

];


module.exports.songs = songs;

然后在index.js中导入：

const app = getApp();
var songsModule = require("../common/songs.js");

直接解析：

let music = this.decodeSong(songsModule.songs[1].notes);

测试，OK！非常好！

好，下一步创建音乐库页面，还有就是设置tabBar。

在创建tabBar时还需要设计96 x 96的图标。每个图标需要有两个版本：一个是默认版，一个选中版。

好，图标弄好了，下一步制作音乐库的页面。

css已经好久没弄过了，这次又重新捡起来，并且需要补充学习css3。

终于整出来了！

<view class="songs">
    <view tt:for="{{songs}}"  tt:if="{{item.display}}" class="{{index == selectIndex ? 'song_box_hover' : 'song_box'}}" bindtap="selectSong" data-index="{{index}}" hover-class="song_box_hover">
        <text class="song_name">{{item.name}}</text>
        <text class="song_author">{{item.author}}</text>
        <image src="../../images/icon_play.png" />
    </view>
</view>

  selectSong: function(e){
    console.log(e);
    tt.setStorage({
      key: 'selectIndex', // 缓存数据的key
      data: e.currentTarget.dataset.index, // 要缓存的数据
      success: (res) => {
        tt.switchTab({
          url: '../index/index' // 指定页面的url
        });
      }
    });

可是，本地测试没有问题，线上测试又不行了！首先是画板画布只有上半部分可以画出来，下半部分好象被什么给挡住了，还有就是音乐库页面根本显示不出来，并且线上的本地存储文件的文件名跟之前也不同了，难道是平台官方也在调整中吗？

后来发现音乐库的问题是自己的程序Bug，但画布问题很奇怪，预览时有问题，真机测试时问题又消失了。然后又出现了……真机测试也出现了些问题！这怎么搞的？后来去掉tabBar，问题消失，加上tabBar，问题出现！

只好继续折腾，后来终于发现，在有tabBar时，ttss中画布的高度百分比不能被正确解析成实际高度。呃，这可怎么办？！

后来，不得不先采取一个笨方法，就是把高度写实！虽然不能自动生成高度，但毕竟问题算是基本解决了，以后再根据情况做调整吧。

.mycanvas {
  width: 630rpx;
  height: 1050rpx;
  background-color: #ffffff;
  margin-top: 16rpx;
  margin-left: 110rpx;
}

中间又学到了小程序中的一些特性：clearRect、fillRect、strokeRect后必须调用draw；fillStyle必须使用setFillStyle来设置，其它属性值也是如此。这可能为了平台组件有更好的适配上的灵活性。

接着在音乐库中添加了6首歌：两只老虎、小星星、我的祖国、梁祝、世上只有妈妈好和沧海一声笑。

以后会陆续添加更多的歌曲，可能还会有进行分类。

下一步嘛，嘿嘿，在音乐库中试着植入一个广告条吧！

好的，这一期就到这里，我是香江鱼，如果你喜欢我的文章和《音乐画板》这个小程序，请大力支持！咱们下期见！