【微信小程序】一些简单功能

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个

沟上可以抑制报错