美文网首页
小程序原生API收集--网络API

小程序原生API收集--网络API

作者: Arthur澪 | 来源:发表于2018-02-06 11:18 被阅读0次

1、获取网络类型

wx.getNetworkType({
  success: function(res) {
    // 返回网络类型, 有效值:
    // wifi/2g/3g/4g/unknown(Android下不常见的网络类型)/none(无网络)
    var networkType = res.networkType
  }
})

2、监听网络状态变化

wx.onNetworkStatusChange(function(res) {
  console.log(res.isConnected)   //是否连接
  console.log(res.networkType)  //什么类型的网络
})

3、发送网络请求

wx.request({
  url: 'test.php', //仅为示例,并非真实的接口地址
  method: 'GET',    //GET, POST, PUT, DELETE, ...
  data: {
     x: '' ,
     y: ''
  },
  header: {
      'content-type': 'application/json' // 默认值
  },
  dataType:'json'
  success: function(res) {
    console.log(res.data)
  }
  fail: function(res) {
  }
  complete:function(res) {
  }
})

4、取消请求任务

const requestTask = wx.request({
  url: 'http://www...', //仅为示例,并非真实的接口地址
  data: {
     x: '' 
  },
  success: function(res) {
  }
})

requestTask.abort()    // 取消请求任务

5、上传

//  如,上传图片
wx.chooseImage({
  success: function(res) {
    var tempFilePaths = res.tempFilePaths   //  图片路径

    wx.uploadFile({
      url: 'https://example.weixin.qq.com/upload', //仅为示例,非真实的接口地址
      filePath: tempFilePaths[0],
      name: 'file',   //文件对应的 key , 在服务器端通过这个 key 可获取文件二进制内容
      formData:{
        'user': 'test'
      },
      success: function(res){
        var data = res.data
        //do something
      }
    })
  }
})

6、下载
下载文件资源到本地。
客户端发一个 HTTP GET 请求,返回文件的本地临时路径。

wx.downloadFile({
  url: 'https://example.com/.....',     // 下载地址
  header: 
  success: function(res) {
    // 只要服务器有响应数据,就会把响应内容写入文件并进入 success 回调;
    if (res.statusCode === 200) {
        wx.playVoice({
          filePath: res.tempFilePath
          //业务需要自行判断是否下载到了想要的内容    
        })
    }
  }
})

下载进度、取消下载

const downloadTask = wx.downloadFile({
    url: 'http://example.com/......',
    success: function(res) {
        wx.playVoice({
            filePath: res.tempFilePath
        })
    }
})

downloadTask.onProgressUpdate((res) => {
    console.log('下载进度', res.progress)
    console.log('已经下载的数据长度', res.totalBytesWritten)
    console.log('预期需要下载的数据总长度', res.totalBytesExpectedToWrite)
})

downloadTask.abort() // 取消下载任务

注:文件的临时路径,在小程序本次启动期间可以正常使用,如需持久保存,需在主动调用wx.saveFile

保存文件到本地

wx.saveFile({
      tempFilePath: './filepath/....',   //需要保存的文件的 临时路径   
      success: function(res) {
        var savedFilePath = res.savedFilePath
      }
    })

相关文章

  • 小程序原生API收集--网络API

    1、获取网络类型 2、监听网络状态变化 3、发送网络请求 4、取消请求任务 5、上传 6、下载下载文件资源到本地。...

  • 小程序原生API收集--媒体API

    1、从相册选择图片,或使用相机拍照 2、预览图片 3、获取图片信息 4、保存图片到系统相册

  • 小程序原生API收集--导航

    保留当前页面,跳转到应用内的某个页面 带多个参数用&分隔:path?key1=value1&key2=value2...

  • 小程序原生API收集--TabBar

    布置小程序的页面框架 为 tabBar 某一项的右上角添加文本 移除 tabBar 某一项右上角的文本 显示 ta...

  • 小程序原生API收集--文件数据API

    数据本地存取 1、将数据存储在本地缓存中指定的 key 中异步 同步 相同key会覆盖掉原来该 key 对应的内容...

  • 微信小程序--网络请求封装

    前言: 刚开始做小程序的时候,做网络请求接口调用的时候,都是用小程序原生网络请求API,但是做多了以后,特别是发现...

  • WebSocket心跳重连讲解

    最近在开发小程序用到了WebSocket,小程序提供了相应的原生API,与H5的API使用方式上有一些区别,所以流...

  • 小程序原生API-界面API

    框架提供了丰富的微信原生API,可以方便的调起微信提供的能力。如获取用户信息,本地存储,支付功能等。 以wx.on...

  • 小程序 项目初始化工作

    1.配置网络请求 由于平台的限制,小程序项目中不支持 axios,而且原生的wx.request()API 功能较...

  • 微信小程序之原生API(中)

    第64篇 极客时间《9小时搞定微信小程序开发》第五课:原生API。 API 模块 2、媒体 媒体模块的API包括8...

网友评论

      本文标题:小程序原生API收集--网络API

      本文链接:https://www.haomeiwen.com/subject/uqcgaxtx.html