微信小程序开发笔记⑨——downloadFile（下载）接口、request（请求）接口、uploadFile（上传）接口和websocket组件

网络api

downloadFile接口

官方描述
/miniprogram/dev/api/network/download/

下面实现了文件的下载和下载过程中部分参数的获取，使用的是downloadFile接口

<view>
  <button bindtap="downloadFile">下载</button>
</view>

downloadFile:function(){
  // 把文件下载到一个临时文件中
  const downloadTask = wx.downloadFile({
    url: '/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400',
    success:function(res){
      console.log("下载完成");
      console.log(res);
      // 下面是临时文件的路径
      downloadFile = res.tempFilePath;
    }
  })

  // 监控下载过程
  downloadTask.onProgressUpdate(function(res){
    console.log('下载进度',res.progress)
    console.log('已经下载的数据长度',res.totalBytesWritten)
    console.log('预期需要下载的数据总长度',res.totalBytesExpectedToWrite)
  })
},

在这里插入图片描述

request接口

官方描述
/miniprogram/dev/api/network/request/

还有一种方式，通过request接口实现下载，这里返回的结果就是整个页面的代码
在这里插入图片描述

requestDown:function(){
  wx.request({
    url: '/WebServices/',
    success:function(res){
      console.log(res)
    }
  })
},

在这里插入图片描述
下面是官网对于request接口的示例，可以看到它很接近于我们的ajax的写法，而且功能其实也可以看作为ajax，通过data发送数据，然后再success中接口接收响应的数据。

wx.request({
  url: '', //仅为示例，并非真实的接口地址
  data: {
    x: '',
    y: ''
  },
  header: {
    'content-type': 'application/json' // 默认值
  },
  success (res) {
    console.log(res.data)
  }
})

uploadFile接口

可以实现上传操作

官方描述
/miniprogram/dev/api/network/upload/

下面是一个上传图片的示例
在这里插入图片描述

uploadImage:function(){
  wx.chooseImage({
    complete: (res) => {
      const tempFilePaths = res.tempFilePaths

      wx.uploadFile({
        filePath: tempFilePaths[0],
        name: 'file',
        url:'/upload', //仅为示例，非真实的接口地址
        success(res){
          console.log("上传成功")
          wx.showModal({
            title:'提示',
            content:'上传完成'
          })
          const data = res.data
        }
      })
    },
  })
},

websocket组件

官方描述
/miniprogram/dev/api/network/websocket/

对于websocket的java服务端的介绍可以参考后面两篇博文，《入门介绍》和《利用WebSocket实现点对点聊天（待完善》。

这里主要是介绍小程序中websocket客户端的使用。

下面是一个websocket客户端的示例，可以发送数据到服务端或者接收数据

<view>
  <button bindtap="webSocketTap">连接WebSocket</button>
</view>

var socketQueue = ["hello","world"]
Page({

  /**
   * 页面的初始数据
   */
  data: {

  },

  webSocketTap:function(){
    // 建立连接
    wx.connectSocket({
      url: 'ws://123.207.136.134:9010/ajaxchattest',
      header:{
        'content-type':'application/json'
      }
    })

    // 监听
    wx.onSocketOpen((result) => {
      console.log("webSocket连接成功")
      for(let i=0;i<socketQueue.length;i++){
        // 发送数据
        sendSocketMessage(socketQueue[i])
      }
      socketQueue = []
    })

    // 失败监听操作
    wx.onSocketError((result) => {
      console.log("WebSocket连接失败")
    })

    // 接收数据
    wx.onSocketMessage((result) => {
      console.log("收到服务器消息:",result.data)
    })
  },
})

function sendSocketMessage(msg){
  wx.sendSocketMessage({
    data: msg
  })
}