1. 一、01init
    2. 1-1 view设100%没用,必须给page先设置100%
    3. 1-2 wx.switchTab跳转到tabbar页面
    4. 二、02swiper
    5. <swiper>
    6.     <swiper-item>
    7.          '''
    8.     </swiper-item>
    9. </swiper>
    10. 三、03collect-storage
    11. //3-1 设一一个对象装载缓存
    12. {
    13.        "0":"false",
    14.        "1":"true",
    15.        "2":"false",
    16.        "3":"true"
    17. }
    18. //3-2 有缓存设获取缓存,没有缓存则设置缓存
    19.     var collection =wx.getStorageSync('collection');
    20.      /* 有缓存,获取缓存 */
    21.      if(collection){
    22.         collected = collection[id];
    23.         this.setData({
    24.           isCollected:collected
    25.         })
    26.      }else{
    27.        /*没有缓存,就设置缓存 */
    28.        var collection = {};
    29.        collection[id] = false;
    30.        wx.setStorageSync('collection', collection)
    31.        /* {"0":"false","1":"false"} */
    32.      }
    33. //3-3  设计点击事件
    34. <image bind:tap="handleCollect" ...></image>
    35. handleCollect(){
    36.     /* 获取缓存 */
    37.     var collection= wx.getStorageSync('collection')
    38.     var collected = !collection[this.data.id];
    39.     collection[this.data.id] = collected;
    40.     /* 更新缓存 */
    41.     wx.setStorageSync('collection', collection)
    42.     this.setData({
    43.       isCollected:collected
    44.     })
    45.   }
    46. 四、showModal实现收藏
    47. handleCollect(){
    48.     /* 获取缓存 */
    49.     var collection= wx.getStorageSync('collection')
    50.     var collected = !collection[this.data.id];
    51.     collection[this.data.id] = collected;
    52.     /* 更新缓存 */
    53.     this.showModal(collected,collection)
    54.  },
    55.  showMoal(collected,collection){
    56.      wx.showModal({
    57.       title: '收藏',
    58.       content: '收藏文章',
    59.       success: (res) => {
    60.         if (res.confirm) {
    61.             //点击确定触发
    62.           if (collected) {
    63.             wx.setStorageSync('collection', collection)
    64.             this.setData({
    65.               isCollected: collected
    66.             })
    67.           }
    68.         } else if (res.cancel) {
    69.             //点击取消触发
    70.           if (collected == false) {
    71.             wx.setStorageSync('collection', collection)
    72.             this.setData({
    73.               isCollected: collected
    74.             })
    75.           }
    76.         }
    77.       }
    78.     })
    79. }
    80. 4-1 分享
    81. wx.showActionSheet({
    82.       itemList: [
    83.         '分享到微信',
    84.         '分享到朋友圈'
    85.       ],
    86.       itemColor: '#000000',
    87.       success: (res) => {
    88.         console.log(res.tapIndex)
    89.       },
    90.       fail: () => { },
    91.       complete: () => { }
    92. });
    93. 五、音乐播放
    94. 5-1 点击事件
    95. <image class="music" bind:tap="handleMusic"></image>
    96. 5-2  实现音乐播放,暂停
    97. var audio = wx.getBackgroundAudioManager()
    98. handleMusic(){
    99.     if(this.data.isPlay){
    100.       audio.pause();
    101.       this.setData({
    102.         isPlay:false
    103.       })
    104.     }else{
    105.       audio.title = this.data.item.music.title
    106.       audio.src = this.data.item.music.url
    107.       this.setData({
    108.         isPlay:true
    109.       })
    110.     }
    111.   }
    112. 5-3 监听音乐播放  bottom-icon
    113. audio.onPlay(()=>{
    114.        this.setData({
    115.          isPlay:true
    116.        })
    117.     })
    118.     audio.onPause(()=>{
    119.       this.setData({
    120.         isPlay:false
    121.       })
    122.     })
    123. 5-4 进入和退出一直
    124. //app.js
    125. //5-4-1 app.js  定义g_isPlay记录音乐播放的状态
    126. App({
    127.     onLaunch: function(options) {
    129.     },
    130.     globalData: {
    131.         g_isPlay:false
    132.     }
    133. });
    134. //5-4-2  在handleMusic事件中设置g_isPlay
    135. handleMusic(){
    136.     if(this.data.isPlay){
    137.       ....
    138.       app.globalData. g_isPlay = false
    139.       console.log(app.globalData.g_isPlay)
    140.     }else{
    141.       ...
    142.       app.globalData. g_isPlay = true;
    143.       console.log(app.globalData.g_isPlay)
    145.     }
    146.   }
    147. //5-4-3 在onLoad生命周期中监听
    148. /* 让退入和进入音乐播放按钮一致 */
    149.     if(app.globalData.g_isPlay){
    150.       this.setData({
    151.         isPlay:true
    152.       })
    153.     }else{
    154.       this.setData({
    155.         isPlay:false
    156.       })
    157.     }