小程序学习之网络API

最新推荐文章于 2022-10-23 18:12:32 发布

baked_donut

最新推荐文章于 2022-10-23 18:12:32 发布

阅读量847

点赞数

分类专栏：微信小程序

微信小程序专栏收录该内容

32 篇文章 4 订阅

订阅专栏

一、小程序网络基础

1.小程序/服务器结构(C/S架构)

通信原理大致如图：

联网状态下小程序首先向服务器发起网络请求，可携带json格式数据一并发送过去。服务器收到请求后执行相关代码处理请求，必要时可从后端查询数据库。处理完毕后，处理完毕后服务器向小程序回复并返回数据，小程序相关接口将回调success()函数并对拿到的数据进行后续处理。

1）关于请求

默认超时时间和最大超时时间都是60s
request、uploadFile、dowloadFile的最大并发限制是10个
网络请求的referer header不可设置。格式固定为："http://servicewechat.com/{appid}/{version}/page-frame.html"{version}为版本号，0表示开发版、体验版及审核版本，版本号为devtools表示开发者工具，其余为正式版本
小程序进入后台运行后，如果5s内网络请求未结束，会回调错误信息fail interrued；回到前台之前，网络请求接口调用都会无法调用

2）关于服务器返回

返回值编码

小程序会自动对BOM头进行过滤，且建议服务器返回值使用UTF-8编码。对于非UTF-8编码，小程序会尝试进行转换，但会有转换失败的可能。

回调

只要成功接收到服务器返回，无论statusCode是多少，都会进入success()回调，可根据业务逻辑对返回值进行判断

3.关于JSON语法格式

小程序网络API在发起网络请求时使用JSON格式的文本进行数据交换。

JSON字符串通常有两种构建形式，一是“名称/值”对的集合，二是值的有序列表

1）“名称/值”对的集合

数据值有以下6种类型的取值：

string
number
boolean
null
object
array

以上取值类型可以互相嵌套形成复合的值

2）值的有序列表可理解为数组，常用中括号包含里面的全部内容

2.服务器域名配置

每一个小程序在与指定域名地址进行网络通信前都必须将该域名地址添加到管理员后台白名单中

1）配置流程

登陆后 -> 设置 -> 开发设置 ->服务器域名 -> 添加或修改需要进行网络通信的服务器域名地址

注意事项：

域名只支持https（request、uploadFile、downloadFile）和wss（connectSocket）协议
域名不能使用IP地址或localhost
域名必须经过ICP备案
出于安全考虑，api.weixin.qq.com不能被配置为服务器域名，相关API也不能在小程序内调用，开发者应将appsecret保存到后台服务器中，通过服务器使用appsecret获取accesstoken，并调用相关API
每类接口分别可以配置最多20个域名

2）HTTPS证书

小程序必须使用HTTPS请求，普通的HTTP请求是不能用于正式环境的。判断HTTPS请求的依据是小程序会对服务器域名使用的HTTPS证书进行校验。如果校验失败，请求不能成功发起。所以如果选择用自己的服务器，需要在服务器上自行安装HTTPS证书，选择第三方服务器则确保其HTTPS证书有效即可，小程序对证书要求如下：

HTTPS证书必须有效
IOS不支持自签名证书
IOS下的证书必须满足苹果App Transport Security(ATS)的要求
TLS必须支持1.2及以上版本
部分CS可能不被操作系统信任，选择证书时注意小程序和各系统的相关通告

ps：由于系统限制，不同平台对证书要求的严格程度不同，为保证小程序的兼容性，建议按照最高标准进行证书配置，并使用相关工具检查现有证书是否符合要求

3）跳过域名校验

如果开发者暂时无法登记有效域名，可以在开发和测试环节暂时跳过域名校验。

3.临时服务器部署

1）软件部署

若开发者条件有限，可以将PC端临时部署成模拟服务器进行开发和测试。

2）网络请求

服务器的WWW目录就是根目录，其网络地址是"http://localhost/"或"http://127.0.0.1"，开发者可以在根目录下自行创建目录和文件。需要注意，本地模拟器地址只能用于学习或测试阶段，建议更新网络请求地址并在各平台下进行测试，来确认服务器域名配置正确。

二、发起请求和中断请求

1.发起请求

使用wx.request(OBJECT)发起网络请求，参数说明如下：

success()返回的参数如表：

示例：

2.中断请求

wx.request(OBJECT)接口返回一个requestTask对象，通过该对象的abort()()方法可以中断请求任务：

示例：

简单应用实例：

<!--wxml-->
<view class="title">网络请求</view>
<view class="demo-box">
  <view class="title">wx.request(OBJECT)</view>
  <input placeholder="请输入您需要查询的单词" bindblur="wordBlur"></input>
  <button type="primary" bindtap="search">查询</button>
  <view class="status">释义：{{result}}</view>
</view>

/*wxss*/

input,button{
  margin: 15rpx;
}
.status{
  margin: 15rpx;
  text-align: left;
}

//js
Page({
  data:{
    result:"待查询"
  },
  word:'',
  wordBlur:function(e){
    this.word = e.detail.value
  },
  search:function(){
    let word = this.word
    var that = this
    if(word == ''){
      wx.showToast({
        title: '单词不能为空',
        icon:'none'
      })
    }else{   //发起网络请求
      wx.request({
        url: 'https://api.shanbay.com/bdc/search',
        data:{
          word:word
        },
        success:function(res){
          console.log(res.data)
          let result = res.data.data.cn_definition.defn
          console.log(result)
          that.setData({
            result:result
          })
        }
      })
    }
  }
})

三、文件传输

1.文件的上传

1）文件上传请求

wx.uploadFile(OBJECT)可将本地资源上传到开发者服务器，上传时将从客户端发起一个HTTPS POST请求到服务器，其中content-type为multipart/form-data，OBJECT参数说明如表：

success()返回参数：

ps：该接口可以配合其他接口一起使用，如 wx.chooseImage接口获取本地资源的临时文件路径后通过此接口将本地资源上传到指定服务器

2）上传任务对象

wx.uploadFile(OBJECT)接口返回一个uploadTask对象，通过该对象可监听文件上传进度变化事件以及取消上传任务，其方法：

onProgressUpdate()返回参数的说明如下：

示例：

简单应用示例：（部署本地服务器，PHP后端语言）

先空着

2.文件的下载

1）文件下载请求

wx.downloadFile(OBJECT)可以从服务器下载文件资源到本地，OBJECT参数说明如下：

success()返回参数：

下载文件的原理是客户端直接发起一个HTTP GET请求，返回文件的本地临时路径，需要注意的是，本地临时路径在小程序本次启动期间可以正常使用。如需持久保存，需要主动调用wx.save()才能在下次启动时访问得到

2）下载任务对象

wx.downloadFile(OBJECT)返回一个downloadTask对象，通过downloadTask可监听下载进度变化事件以及取消下载任务。，其方法有：

onProgressUpdate()返回参数说明如下：

示例：

简单应用示例：

<!--wxml-->
<view class="title">文件上传/下载</view>
<view class="demo-box">
 <view class="title">wx.downloadFile(OBJECT)</view>
 <block wx:if='{{isDownload}}'>
   <image mode="widthFix" src="{{src}}"></image>
   <button bindtap="reset">重置</button>
 </block>
 <button wx:else type="primary" bindtap="download">单击此处下载图片</button>
</view>

//js
Page({
  data: {
    isDownload:false
  },
  download:function(){
    var that = this
    var downloadTask = wx.downloadFile({
      url:'http://img1.qunarzz.com/sight/p0/1811/2f/2f9b29981c3c9f85a3.img.jpg_200x200_9d91fda5.jpg',
      success:function(res){
        if(res.statusCode == 200){
          let src = res.tempFilePath; //文件临时路径地址
          that.setData({
            src:src,
            isDownload:true
          })
        }
      }
    })
    //任务对象监听下载进度
    downloadTask.onProgressUpdate((res)=>{
      console.log('下载进度',res.progress)
      console.log('已经下载的数据长度',res.totalBytesWritten)
      console.log('预期需要下载的数据总长度',res.totalBytesExpectedToWrite)
    })
  },
  //清空下载图片
  reset:function(){
    this.setData({
      src:'',
      isDownload:false
    })
  }  
})