微信小程序API

小程序基础入门

获取登录用户的数据

// 获取登录用户的数据
    wx.getUserInfo({
      //withCredentials: true,
      success: (res) => {
        console.log(res);
        let user = res.userInfo;
        this.setData({
          user
        })
      }
    })  

路由

1)	wx.navigateTo(OBJECT)：跳转有记录，可通过回退键进行回退
保留当前页面，跳转到应用内的某个页面。
但是不能跳到 tabbar 页面。
使用 wx.navigateBack 可以返回到原页面。
小程序中页面栈最多十层。

// 跳转到list页面
    wx.navigateTo({
      url: '/pages/list/list',
      success(){
        console.log('跳转成功');
      }
    })    


2)	wx.redirectTo(OBJECT)： 没有记录，不能进行回退
关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。

// 跳转到list页面
    wx.redirectTo({
      url: '/pages/list/list',
      success(){
        console.log('跳转成功');
      }
    })    

3) wx.switchTab(Object object)：跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面

4) wx.navigateBack(Object object)

关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages 获取当前的页面栈，决定需要返回几层。

数据存储(全局缓存中存取)

存数据：setStorage， 同步： setStorageSync 
// 数据存储
    wx.setStorage({
      key: 'isCollected',
      data: oldCollectFlag
    })

2) 获取数据：getStorage  同步: getStorageSync
let oldCollectFlag = wx.getStorageSync('isCollected');

音乐播放控制

音乐播放

wx.playBackgroundAudio({
        dataUrl: detailObj.music.dataUrl,
        title: detailObj.music.title,
        success() {
          console.log('音乐播放成功');
        }
      });

音乐暂停

wx.pauseBackgroundAudio

监听音乐播放暂停

wx.onBackgroundAudioPlay(() => {
      console.log('音乐播放'); // 注意真机上音乐播放监听只能执行一次。
      this.setData({
        isMusicPlay: true
      })
      // 修改app数据记录是否播放和播放页面的下标
      appDatas.appData.isPlay = true;
      appDatas.appData.playPageIndex = this.data.index;
})



 // 监听音乐是否暂停
    wx.onBackgroundAudioPause(() => {
      console.log('音乐暂停');
      this.setData({
        isMusicPlay: false
      })
      appDatas.appData.isPlay = false;
      appDatas.appData.playPageIndex = this.data.index;
    })

数据交互

发送请求

官方文档

wx.request({ // 发送请求
  url: API_URL, // 请求的url
  header: { // 设置请求头
    'Content-type': 'json',
  },
  success: (res) => {  // 请求成功的回调函数
    // 隐藏提示加载信息
    wx.hideToast();
    console.log(res);  // 请求的成功的数据对象，注意是封装后的对象
  }
})

wx.request({
    url: url,
    data: params,
    header: {
      'content-type': 'application/x-www-form-urlencoded',
      "Cache-Control": "no-cache"
    },
    method: method,
    success: function (res) {

      //console.log(res);

    },
    fail: function (res) {

    },
    complete: function (res) { },
  })

WebSocket

官方文档

//js
// pages/im/index.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    url: 'ws://echo.websocket.org',
    msgs: [],
    msg: ''
  },

  connectSocket() {
    let that = this;
    let task = wx.connectSocket({
      url: that.data.url
    });

    task.onMessage(function (res) {
      let info = res.data;
      console.log(info);
      that.setData({
        msgs: [...that.data.msgs, "接收到消息 -> " + info]
      });
      console.log("接收到信息后的msgs",that.data.msgs);
    });

    that.setData({
      socketTask: task,
      msgs: [ ...that.data.msgs,"连接成功!"]
    });
    console.log("点击开启连接后的msgs",that.data.msgs);
  },

  urlInput(e) {
    this.setData({
      url: e.detail.value
    });
  },

  msgInput(e) {
    this.setData({
      msg: e.detail.value
    });
  },

  sendMsg() {
    let msg = this.data.msg;
    this.data.socketTask.send({
      data: msg
    });
    this.setData({
      msgs: [...this.data.msgs, "发送消息 -> " + msg]
    });
    console.log("点击发送后的msgs", this.data.msgs);
  }
})

//wxml
<input name="url" value="ws://echo.websocket.org" bindinput ="urlInput"/>
<button size='mini' type="warn">断开连接</button>
<button size='mini' type="primary" bindtap="connectSocket">开启连接</button>
 
<textarea placeholder="输入发送内容" bindinput ="msgInput"></textarea>
<button size='mini' type="primary" bindtap="sendMsg">发送</button>
 
<view wx:for="{{msgs}}">{{index}}: {{item}}</view>

扫描二维码

<!--index.wxml-->
<view class="container">
      <button type="primary" bindtap="scanCode">扫描二维码</button>
</view>



//index.js
//获取应用实例
const app = getApp()
 
Page({
  scanCode(){
    wx.scanCode({
      onlyFromCamera: true,
      success(res) {
        console.log(res)
      }
    })
  }
})