我的小程序开发—页面功能

1.分享功能

1.button组件设置open-type="share"
2.onshareAppMessage(obj,obj)
3.onshareAppMessage(obj,obj)里的from可以看出该分享来自哪里

2.绝对定位使元素居中

绝对定位实现元素居中

前提：父元素开启了相对定位


/* 相对父元素居中 */
  position: absolute;
  top:0;
  right: 0;
  bottom:0;
  left: 0;
  margin: auto;

3. transform 属性之 transform-origin

transform-origin 属性用来设置 transform 变换的基点位置。默认情况下，基点位置为元素的中心点。

x-axis	位置（left、center、right）/ 百分数 / 数值	x 轴基点坐标
y-axis	位置（top、center、bottom）/ 百分数 / 数值	y 轴基点坐标
z-axis	数值	z 轴基点坐标

/* 旋转的中心点 */
  transform-origin: 40rpx 0rpx;
  //向上旋转20°
  transform: rotate(-20deg);

实现动态class

 <image class="needle {{isplay && 'needleRotate'}}"
 src="/static/images/song/needle.png"></image>
 
 //isplay标记播放状态，当播放时引用needleRotate类

4.动画实现

@keyframes:设置动画帧
1）from to
-使用简单的动画，只有起始帧和结束帧
2）百分比
-多用于复杂的动画，动画不止两帧

/* 旋转动画 */
.discAnimation {
  animation: disc 3s linear infinite;
  animation-delay: 1s;/*动画延迟1s等待摇杆进入*/
}

@keyframes disc{
  from{
    transform: rotate(0deg);
  }
  to{
    transform: rotate(360deg);
  }
}

5.页面之间的数据传递

1.使用query进行传参

 //首先在Wxml中进行绑定当前点击列表的元素以及内容
 data-song="{{item}}" 

 //点击跳转至音乐播放页
  toSongDetail(event){
    //获取当前点击的元素的内容
    let song = event.currentTarget.dataset.song;
    console.log(song);
    wx.navigateTo({
      //query传参 不能用song对象作为参数传递，长度过长，会被自动截取所以使用id传递
      url: '/pages/songDetail/songDetail?musicId='+song.id,
    })
  }
  
  //利用options来接收query传递的参数
  onLoad: function (options) {
    //options 接收我们路由跳转的query参数
    let musicId = options.musicId;
    console.log(options);
  }

获取成功

6.动态改变窗口标题

wx.setNavigationBarTitle方法

wx.setNavigationBarTitle({
     title: this.data.song.name,
   })

7.背景音乐

BackgroundAudioManager

BackgroundAudioManager 实例，可通过 wx.getBackgroundAudioManager 获取。
注意：string title

音频标题，用于原生音频播放器音频标题（必填）。 原生音频播放器中的分享功能，分享出去的卡片标题，也将使用该值。

async musicControl(isplay,musicId){
     let backgroundAudioManager = wx.getBackgroundAudioManager();
    if(isplay)//播放
    {
      // 获取音乐播放链接
      let musicLinkData = await request('/song/url',{id:musicId});
      
      let musicLink = musicLinkData.data[0].url;
      console.log(musicLink);

      backgroundAudioManager.src = musicLink;
      backgroundAudioManager.title = this.data.song.name;
    }else{//关闭
      backgroundAudioManager.pause();
    }
  }

8.系统监控音乐的播放和暂停

问题：如果用户操作系统的控制音乐播放和暂停的按钮，页面不知道，导致页面显示是否播放的状态和真实的播放状态不一致
解决方法:
1.通过控制音频的实例backgroundAudioManager去监视音乐播放/暂停

9.获取小程序全局唯一的APP实例

getApp()

//实现用户退出后全局保存播放状态 app.js
App({
  globalData:{
    isMusicPlay:false,//音乐是否播放
    musicId:''//音乐id
  }
})

//songDetail.js

//获取全局实例
const  appInstance = getApp();

//  判断当前页面音乐是否播放
  if(appInstance.globalData.isMusicPlay && appInstance.globalData.musicId == musicId){
    // 修改当前页面为true
     this.setData({
       isplay:true
     })
   }

10.页面通信

npm init -y

npm install pubsub-js
构建npm:开发工具->工具->构建npm
会将node_modules中的包打包到miniprogram_npm中

pubsub-js用来页面通信

【预备知识】:
自定义事件

• 1.分类:
  • 1.标准DOM事件
  • 2.自定义事件
• 2.标准DOM事件
  • 1.举例：click，input
  • 2.事件名固定的，事件由浏览器触发
• 3.自定义事件
  • 1.绑定事件
    • 1.事件名
    • 2.事件的回调
    • 3.订阅方：PubSub.subscribe(事件名，事件的回调）
    • 订阅方式接受数据的一方
  • 2.触发事件
    • 1.事件名
    • 2.提供事件参数对象，等同于原生事件的event对象
    • 3.发布方：PubSub.publish(事件名，提供的数据)
    • 4.发布方是提供数据的一方

//导入发布订阅
import PubSub from 'pubsub-js';

// 订阅来自songDetail页面发布的消息
    PubSub.subscribe('switchType',(msg,data)=>{
      // console.log(msg,data);//msg 方法名 data 传来的数据
      let {recommendList,index} = this.data;
      if(data == 'pre'){//上一首
        index--;
      }else{//下一首
        index++;
      }
      let musicId = recommendList[index].id;
      this.setData({
        index
      })
      // 回传musicId给detail页面
      PubSub.publish('musicId',musicId);
    })
    
    //点击切歌
 handleSwitch(event){
  let type  = event.currentTarget.id;
  // 订阅消息获得recommend发布的 musicId
  PubSub.subscribe('musicId',(msg,data)=>{
    console.log(data);//传入的数据，msg是事件名
    this.setData({
      musicId:data
    })
    // 取消订阅
    PubSub.unsubscribe('musicId');
  })
  // 发布消息数据给recommendSong页面，触发自定义消息
  PubSub.publish('switchType',type);
 }