微信小程序口红项目新手练习Day1

项目day1 主页的授权与音乐播放功能

如图：

1.我们需要完成的功能有:
①首先是页面的背景图片
②在左上角设置一个带有音频的播放图片当点击它时，有旋转的效果。
③主要核心功能在右下角的授权功能，只有点击并授权了之后才可以进入页面使用功能。反之重新授权！

项目的实现思路

①主页背景
首先在pages下创建如下图的目录。
放好我们需要设置的背景图片
如需要图标可以去→阿里巴巴矢量图网站←去找（免费）
1.index.wxml

<view >
  <image src="../img/01_base.png"></image>
</view>
<image  bindtap="stopMusic"  class="{{img}}" src="../img/music.png"></image>
<button style="width: 200rpx;" class="box" bindtap="emPower">授权</button>

在index.json中设置disableScroll使页面不可以滚动
（可以根据自己的需求进行设置）

2.index.js

// pages/index/index.js
const music = wx.getBackgroundAudioManager()
Page({

  /**
   * 页面的初始数据
   */
  data: {
    isopen : false,
    img : 'img1'
  },
  emPower: function () {
    wx.getSetting({
      success(res) {
        console.log('++++++++++++')
        var writePhotosAlbum = res.authSetting["scope.writePhotosAlbum"]
        if (writePhotosAlbum==undefined) {
          console.log('//')
          wx.authorize({
            scope: 'scope.writePhotosAlbum',
            success() {
              wx.navigateTo({
              url: '../../packageA/index1/index1',
             })
            }
          })
        }else if(writePhotosAlbum==false) {
          console.log('-----------')
          wx.showModal({
            title: '提示',
            content: '您未开启保存图片到相册的权限，请点击确定去开启权限！',
            success(res) {
              if (res.confirm) {
                wx.openSetting()
              }
            }
          })
        }else{
          wx.navigateTo({
            url: '../../packageA/index1/index1',
           })
        }
        // if (!res.authSetting['scope.camera']) {
        //   wx.authorize({
        //     scope: 'scope.camera',
        //     success() {
        //       // 用户已经同意小程序使用录音功能，后续调用 wx.startRecord 接口不会弹窗询问

        //     },
        //     fail: function () {
        //       console.log('获取相机权限失败')
        //     }
        //   })
        // }
        // var camera = res.authSetting["scope.camera"]
      
      }
    })
  },
  stopMusic:function(){
    var isopen = this.data.isopen
    var img = this.data.img
    if(isopen){
      music.play()
      this.setData({
        isopen : false,
        img : 'img1'
      })
    }else{
      music.pause()
      this.setData({
        isopen : true,
        img : 'img2'
      })
    }
    
  },


  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    if(!this.data.isPlay){
      music.title = '途中'
      music.src = 'http://antiserver.kuwo.cn/anti.s?useless=/resource/&format=mp3&rid=MUSIC_144541061&response=res&type=convert_url&'
      music.play()
    }
    wx.setStorage({
      data: '545454',
      key: 'key2',
    })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

3.index.wxss
页面的css修饰， 可以根据自己的喜好进行设置。
左上角的图标旋转加入了动画的效果，@keyframes进行设置。
@keyframes turn{
0%{-webkit-transform:rotate(0deg);}
25%{-webkit-transform:rotate(90deg);}
50%{-webkit-transform:rotate(180deg);}
75%{-webkit-transform:rotate(270deg);}
100%{-webkit-transform:rotate(360deg);}
}
代码如下：

/* pages/index/index.wxss */
page{
  margin: 0;
  padding: 0;
}

.box{
  position: absolute;
  bottom: 20rpx;
  right: 20rpx;
  border-radius: 35rpx;
  border: 1rpx solid #000;
  display: flex;
  width: 100rpx;
  height: 100rpx;
  justify-content: center;
  align-items: center;
}
.img1{
  width: 80rpx;
  height: 80rpx;
  z-index: 999;
  position: absolute;
  top: 20rpx;
  left: 20rpx;
  animation: turn 2s linear infinite;
}
.img2{
  width: 80rpx;
  height: 80rpx;
  z-index: 999;
  position: absolute;
  top: 20rpx;
  left: 20rpx;
}
@keyframes turn{
  0%{-webkit-transform:rotate(0deg);}
  25%{-webkit-transform:rotate(90deg);}
  50%{-webkit-transform:rotate(180deg);}
  75%{-webkit-transform:rotate(270deg);}
  100%{-webkit-transform:rotate(360deg);}
}