【微信小程序】一些簡單功能

1. 收藏功能

條件渲染
交互回饋
數據緩存

1.1 條件渲染

條件渲染

wx:if

在框架中，使用 wx:if="" 來判斷是否需要渲染該代碼塊：

<view wx:if="{{condition}}"> True </view>

也可以用 wx:elif 和 wx:else 來添加一個 else 塊：

<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>

block wx:if

因爲 wx:if 是一個控制屬性，需要將它添加到一個標籤上。如果要一次性判斷多個組件標籤，可以使用一個 標籤將多個組件包裝起來，並在上邊使用 wx:if 控制屬性。

<block wx:if="{{true}}">
  <view> view1 </view>
  <view> view2 </view>
</block>

注意： block 並不是一個組件，它僅僅是一個包裝元素，不會在頁面中做任何渲染，只接受控制屬性。

wx:if vs hidden

因爲 wx:if 之中的模板也可能包含數據綁定，所以當 wx:if 的條件值切換時，框架有一個局部渲染的過程，因爲它會確保條件塊在切換時銷燬或重新渲染。

同時 wx:if 也是惰性的，如果在初始渲染條件爲 false，框架什麼也不做，在條件第一次變成真的時候纔開始局部渲染。

相比之下，hidden 就簡單的多，組件始終會被渲染，只是簡單的控制顯示與隱藏。

一般來說，wx:if 有更高的切換消耗而 hidden 有更高的初始渲染消耗。因此，如果需要頻繁切換的情景下，用 hidden 更好，如果在運行時條件不大可能改變則 wx:if 較好。

1.2 交互回饋

wx.showToast(Object object)
顯示消息提示框
示例代碼

wx.showToast({
  title: '成功',
  icon: 'success',
  duration: 2000
})

注意
wx.showLoading 和 wx.showToast 同時只能顯示一個
wx.showToast 應與 wx.hideToast 配對使用

1.3 數據緩存

1.3.1 存

wx.setStorageSync(string key, any data)

wx.setStorage({
  key:"key",
  data:"value"
})
try {
  wx.setStorageSync('key', 'value')
} catch (e) { }

1.3.2 取

wx.getStorageSync(string key)

wx.getStorage({
  key: 'key',
  success (res) {
    console.log(res.data)
  }
})
try {
  var value = wx.getStorageSync('key')
  if (value) {
    // Do something with return value
  }
} catch (e) {
  // Do something when catch error
}

1.4 收藏功能

<view>
  <image catchtap='handleCollection' wx:if='{{isCollected}}' src="/image/31.png"></image>
  <image catchtap='handleCollection' wx:if='{{!isCollected}}' src="/image/32.png"></image>
</view>

/**
   * 頁面的初始數據
   */
  data: {
    index: 3,
    isCollected: false
    
  },

/**
*收藏功能
*/
  handleCollection: function () {

    let isCollected = !this.data.isCollected;
    // //跟新狀態
    this.setData({
      isCollected
    })

    //提示用戶
    let title = isCollected ? '收藏成功' : '取消收藏';
    wx.showToast({
      title: title,
      icon: 'success'
    })


    if (!wx.getStorageSync(isCollected)){
      let index = this.data.index;
      let isCollected = this.data.isCollected;
      wx.setStorage({
        key: "isCollected",
        data: { [index]: isCollected }
      })
    }else{
      wx.getStorage({
        key: 'isCollected',
        success: (data) => {
          console.log("獲取緩存成功!");
          console.log(data, typeof data);
          let obj = data.data;
          obj[this.data.index] = isCollected;
          wx.setStorage({
            key: "isCollected",
            data: obj,
            success: () => {
              this.setData({

              })
            }
          })
        },
        fail: () => {
          console.log("獲取緩存失敗!");

        },
        complete: () => {

        }

      })
    }
  },


  /**
   * 生命週期函數--監聽頁面加載
   */
  onLoad: function (options) {
    
  },

  /**
   * 生命週期函數--監聽頁面初次渲染完成
   */
  onReady: function () {
    wx.getStorage({
      key: 'isCollected',
      
      success: (data) => {
        let isCollected = data.data[this.data.index];
        if (typeof (isCollected) == "undefined") {
          this.setData({
            isCollected:false
          })
        }else{
          this.setData({
            isCollected
          })
        }
      }
    })
  },

2. 音樂播放器基本功能

使用後臺播放器播放音樂

音樂外連接,自己百度也可以

2.1 使用後臺播放器播放音樂

wx.playBackgroundAudio(Object object)

2.2 暫停播放音樂

wx.pauseBackgroundAudio(Object object)

若需要小程序在退到後臺後繼續播放音頻，你需要在 app.json 中配置 requiredBackgroundModes 屬性

2.3 監聽音樂暫停事件

wx.onBackgroundAudioPause(function callback)

2.4 監聽音樂播放事件

wx.onBackgroundAudioPlay(function callback)

2.5 監聽音樂停止事件

wx.onBackgroundAudioStop(function callback)

2.6 實例

<view>
  <!-- <view>
    <image class="musicImg" catchtap='handleMusicPlay' wx:if='{{isMusicPlay}}' src="/image/31.png"></image>
    <image class="musicImg" catchtap='handleMusicPlay' wx:if='{{!isMusicPlay}}' src="/image/32.png"></image>
  </view> -->
  --------------上面下面是一樣的------------------
   <view>
    <image class="musicImg1" catchtap='handleMusicPlay'  src="{{isMusicPlay?'/image/31.png':'/image/32.png'}}"></image>
  </view>
  <view>
    <image class="musicImg" catchtap='handleMusicPlay'  src="{{isMusicPlay?'/image/31.png':'/image/32.png'}}"></image>
  </view>
</view>

在 app.js 中

  data: {
    isPaly: false,
    pageIndex: null
  },

// pages/user/musicTest/musicTest.js
let appDatas = getApp();
console.log(appDatas, typeof appDatas);

console.log(appDatas.data.isPaly);
console.log(appDatas.data.index);

Page({

  /**
   * 頁面的初始數據
   */
  data: {
    index: 63,
    isMusicPlay: false

  },

  /**
   * 音樂播放開關
   */
  handleMusicPlay: function () {
    let isMusicPlay = !this.data.isMusicPlay;
    this.setData({
      isMusicPlay
    })

    if (isMusicPlay) {
      wx.playBackgroundAudio({
        dataUrl: 'https://sharefs.yun.kugou.com/202003241945/9b17ada6e10126e221230bb858d30599/G074/M0A/03/1D/6oYBAFfzPu6ABS28AEHf14E-ndI131.mp3',
        title: 'IF-Ken Arai'
      })
    } else {
      wx.pauseBackgroundAudio()
    }



  },

  /**
   * 生命週期函數--監聽頁面加載
   */
  onLoad: function (options) {
    let that = this;
    if (appDatas.data.isPaly && appDatas.data.index == this.data.index) {
      console.log("當前音樂正在播放");
      this.setData({
        isMusicPlay: true
      })
    }

    //監聽音樂播放
    wx.onBackgroundAudioPlay(() => {
      console.log("音樂播放");
      appDatas.data.isPaly = true;
      appDatas.data.index = this.data.index;

      that.setData({
        isMusicPlay: true

      })
    });

    //監聽音樂暫停
    wx.onBackgroundAudioPause(() => {
      console.log("音樂暫停");

      appDatas.data.isPaly = false;
      appDatas.data.index = null;

      that.setData({
        isMusicPlay: false
      })
    });

    //監聽音樂停止
    wx.onBackgroundAudioStop(() => {
      console.log("音樂停止");
      that.setData({
        isMusicPlay: false
      })
    });

  },

3. 分享與轉發功能

wx.showActionSheet 顯示操作菜單

  <!-- 分享 -->
  <view>
    <image class="shareImg" catchtap='handleShare'  src="/image/no-order.png"></image>
  </view>

  <!-- 轉發 -->
  <view>
    <button open-type="share">轉發此文章</button>
    </view>
</view>

  /**
   * 處理點擊分享功能
   */
  handleShare: ()=> {
    wx.showActionSheet({
      itemList: ['分享到朋友圈','分享到qq空間','分享到微博'],
    })
  },

這個不會了

4. tab切換

在 app.json 中

"tabBar": {
    "color": "#b7b7b7",
    "selectedColor": "#333333",
    "borderStyle": "black",
    "backgroundColor": "#ff0",
    "list": [
      {
        "pagePath": "pages/index/index",
        "iconPath": "image/12.png",
        "selectedIconPath": "image/11.png",
        "text": "主頁"
      },
      {
        "pagePath": "pages/category/category",
        "iconPath": "image/22.png",
        "selectedIconPath": "image/21.png",
        "text": "分類"
      },
      {
        "pagePath": "pages/cart/cart",
        "iconPath": "image/32.png",
        "selectedIconPath": "image/31.png",
        "text": "購物車"
      },
      {
        "pagePath": "pages/user/user",
        "iconPath": "image/42.png",
        "selectedIconPath": "image/41.png",
        "text": "我的"
      }
    ]
  },

5. 發送網絡請求

wx.request(Object object)

5.1 wx.request

示例代碼

wx.request({
  url: 'test.php', //僅爲示例，並非真實的接口地址
  data: {
    x: '',
    y: ''
  },
  header: {
    'content-type': 'application/json' // 默認值
  },
  success (res) {
    console.log(res.data)
  }
})

const appDatas = getApp()
Page({

  /**
   * 頁面的初始數據
   */
  data: {
    moviesArr: []
  },

/**
   * 生命週期函數--監聽頁面加載
   */
  onLoad: function (options) {
    wx.request({
      url: 'http://t.yushu.im/v2/movie/top250',
      success: (data) => {
        console.log(data);
        appDatas.data.moviesArr = data.data.subjects;
        this.setData({
          moviesArr: data.data.subjects
        })
      }
    })
  },

會出現的問題：
http://t.yushu.im 不在以下 request 合法域名列表中，請參考文檔：
https://developers.weixin.qq.com/miniprogram/dev/framework/ability/network.html

5.2 小程序設置

備註：

1. 小程序出於安全考慮所有的協議都是 https 協議，且如果沒有在開發設置中配置請求的連接是無法訪問指定的鏈接的。
2. 一個微信小程序的併發網絡請求被限制在最多5個

溝上可以抑制報錯