09-微信小程序网络请求API(实现轮播广告和简易的聊天窗口)-Toy模板网

这篇具有很好参考价值的文章主要介绍了09-微信小程序网络请求API(实现轮播广告和简易的聊天窗口)。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

09-微信小程序API网络请求(实现轮播广告和简易的聊天窗口)

微信小程序API

做项目的开发，一定离不开网络相关的操作，小程序做的都是客户端，客户端请求服务端做一些交互。

微信小程序提供的API的方式，通过API的方式可以调用微信提供的强大的功能，以增强小程序的功能，如：网络请求、拍照、扫码等；详见以下官方文档。

官方文档

09-微信小程序网络请求API(实现轮播广告和简易的聊天窗口),微信小程序从0到1（2023）,微信小程序,网络,小程序

如果单纯的做一些网页，用到拍照扫描等，需要写好多代码，现在可以调用微信封装好的API来实现。下面我们看一下微信api 的这些官方文档

服务器域名配置注意

在小程序/小游戏中使用网络相关的 API 时，需要注意下列问题，请开发者提前了解。

每个微信小程序需要事先设置通讯域名，小程序只可以跟指定的域名进行网络通信。
域名只支持 https (wx.request、wx.uploadFile、wx.downloadFile) 和 wss (wx.connectSocket) 协议；
域名不能使用 IP 地址（小程序的局域网 IP 除外）或 localhost；
等等详见以下官方文档标红记录

官方文档

09-微信小程序网络请求API(实现轮播广告和简易的聊天窗口),微信小程序从0到1（2023）,微信小程序,网络,小程序

网络相关API

request

发起 HTTPS 网络请求。使用前请注意阅读相关说明。

通过request对象进行网络通信操作。

说明：每个微信小程序需要事先设置一个通讯域名，小程序只可以跟指定的域名与进行网络通信。包括普通 HTTPS 请求（wx.request）、上传文件（wx.uploadFile）、下载文件（wx.downloadFile) 和 WebSocket 通信（vconnectSocket）

用法：RequestTask wx.request(Object object)
参数 Object object wx.request

属性	类型	默认值	必填	说明	最低版本
`url`	string		是	开发者服务器接口地址
`data`	string/object/ArrayBuffer		否	请求的参数
`header`	Object		否	设置请求的 header，header 中不能设置 Referer。 `content-type` 默认为 `application/json`
`timeout`	number		否	超时时间，单位为毫秒。默认值为 60000	2.10.0
`method`	string	GET	否	HTTP 请求方法
`dataType`	string	json	否	返回的数据格式
`responseType`	string	text	否	响应的数据类型	1.7.0
`enableHttp2`	boolean	false	否	开启 http2	2.10.4
`enableQuic`	boolean	false	否	开启 quic	2.10.4
`enableCache`	boolean	false	否	开启 cache	2.10.4
`enableHttpDNS`	boolean	false	否	是否开启 HttpDNS 服务。如开启，需要同时填入 httpDNSServiceId 。 HttpDNS 用法详见移动解析HttpDNS	2.19.1
`httpDNSServiceId`	string		否	HttpDNS 服务商 Id。 HttpDNS 用法详见移动解析HttpDNS	2.19.1
`enableChunked`	boolean	false	否	开启 transfer-encoding chunked。	2.20.2
`forceCellularNetwork`	boolean	false	否	wifi下使用移动网络发送请求	2.21.0
`success`	function		否	接口调用成功的回调函数
`fail`	function		否	接口调用失败的回调函数
`complete`	function		否	接口调用结束的回调函数（调用成功、失败都会执行）

RequestTask 请求任务对象

data 参数说明

最终发送给服务器的数据是 String 类型，如果传入的 data 不是 String 类型，会被转换成 String 。转换规则如下：

对于 GET 方法的数据，会将数据转换成 query string（encodeURIComponent(k)=encodeURIComponent(v)&encodeURIComponent(k)=encodeURIComponent(v)...）
对于 POST 方法且 header['content-type'] 为 application/json 的数据，会对数据进行 JSON 序列化
对于 POST 方法且 header['content-type'] 为 application/x-www-form-urlencoded 的数据，会将数据转换成 query string （encodeURIComponent(k)=encodeURIComponent(v)&encodeURIComponent(k)=encodeURIComponent(v)...）

方法	描述
RequestTask.abort()	中断请求任务
RequestTask.onHeadersReceived(function listener)	监听 HTTP Response Header 事件。会比请求完成事件更早
RequestTask.offHeadersReceived(function listener)	移除 HTTP Response Header 事件的监听函数
RequestTask.onChunkReceived(function listener)	监听 Transfer-Encoding Chunk Received 事件。当接收到新的chunk时触发。
RequestTask.offChunkReceived(function listener)	移除 Transfer-Encoding Chunk Received 事件的监听函数

object.method 的合法值

合法值	说明
`OPTIONS`	HTTP 请求 OPTIONS
`GET`	HTTP 请求 GET
`HEAD`	HTTP 请求 HEAD
`POST`	HTTP 请求 POST
`PUT`	HTTP 请求 PUT
`DELETE`	HTTP 请求 DELETE
`TRACE`	HTTP 请求 TRACE
`CONNECT`	HTTP 请求 CONNECT

object.dataType 的合法值

合法值	说明
`json`	返回的数据为 JSON，返回后会对返回的数据进行一次 JSON.parse
`其他`	不对返回的内容进行 JSON.parse

object.responseType 的合法值

合法值	说明
`text`	响应的数据为文本
`arraybuffer`	响应的数据为 ArrayBuffer

object.success 回调函数

Object res

属性	类型	说明	最低版本
data	string/Object/Arraybuffer	开发者服务器返回的数据
statusCode	number	开发者服务器返回的 HTTP 状态码
header	Object	开发者服务器返回的 HTTP Response Header	1.2.0
cookies	Array.	开发者服务器返回的 cookies，格式为字符串数组	2.10.0
profile	Object	网络请求过程中一些调试信息，查看详细说明	2.10.4
exception	Object	网络请求过程中的一些异常信息，例如httpdns重试等	3.0.0

object.fail 回调函数

Object err

属性	类型	说明	最低版本
errMsg	String	错误信息
errno	Number	errno 错误码，错误码的详细说明参考 Errno错误码	2.24.0

案例代码（实现轮播图）

轮播广告页面代码

index.wxml

<swiper indicator-dots="true" autoplay="true" interval="3000" duration="500">
  <swiper-item wx:for="{{images}}">
    <image src="{{item.original}}" width="375" height="150" />
  </swiper-item>
</swiper>

循环 images 图片数据，这个数据需要在data中做设置,进入index.js中,设置images数组，默认空

  /**
   * 页面的初始数据
   * 默认设置 images 空的数组
   */ 
data: {
    images:[] 
    },

在写一个方法，去加载数据

  //加载广告数据
  loadDate() {
        },

在onLoad 中做加载,调用this.loadDate();方法

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad:function(options) {
    console.log("页面加载完成",options);
    this.loadDate();
  },

现在编写loadDate();方法逻辑

可以拷贝官网中的示例代码做修改

09-微信小程序网络请求API(实现轮播广告和简易的聊天窗口),微信小程序从0到1（2023）,微信小程序,网络,小程序

拷贝以上参考文档中的示例代码做如下修改

首先是url修改为自己用的，找到自己项目的url

index.js

//demo/index.js
Page({
  data: {
    images: []
  },
  loadData() {
    const _this = this;
    wx.showLoading({
      title: '加载中',
    });
    wx.request({
      url: 'http://127.0.0.1:18080/ad?type=1',
      success(res) {
        _this.setData({
          images: res.data.data.list
        });
        wx.hideLoading();
      }
    })
  },
  onLoad(options) {
    this.loadData();
  }
})

WebSocket

案例代码（实现简易的聊天面板）

新建一个im 文件，im文件下新建 im.wxml

全局 app.json 中配置 im 页面

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs",
    "pages/demo/index",
    "pages/im/im"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#80ff80",
    "navigationBarTitleText": "我的第一个微信小程序",
    "navigationBarTextStyle":"black"
  },
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text":"首页"
      },
      {
        "pagePath": "pages/logs/logs",
        "text":"日志"
      },
      {
        "pagePath": "pages/demo/index",
        "text":"Demo"
      },
      {
        "pagePath": "pages/im/im",
        "text":"IM"
      }
    ]
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

将案例代码拷贝到 im.wxml中

/* pages/im/im.wxml*/

<input name="url" value="ws://127.0.0.1:18081/ws/1001" 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>

在 im.wxss中调整样式

/* pages/im/im.wxss */

input,textarea{
  border: 1px black solid;
}

button,input,textarea,view{
  margin: 10px;
}

效果图

09-微信小程序网络请求API(实现轮播广告和简易的聊天窗口),微信小程序从0到1（2023）,微信小程序,网络,小程序

在im.js 中写个connectSocket方法来创建连接

可以参考官网拷贝代码修改

09-微信小程序网络请求API(实现轮播广告和简易的聊天窗口),微信小程序从0到1（2023）,微信小程序,网络,小程序

// pages/im/index.js
Page({
  /**
  * 页面的初始数据
  */
  data: {
    url: 'ws://127.0.0.1:18081/ws/1001',
    msgs: [],
    msg: ''
  },
  connectSocket() {
    let _this = this;
    let task = wx.connectSocket({
      url: _this.data.url
    });
    task.onMessage(function (res) {
      let data = JSON.parse(res.data);
      let msg = data.from.id + ", " + data.msg;
      _this.setData({
        msgs: [..._this.data.msgs, "接收到消息 -> " + msg]
      });
    });
    _this.setData({
      socketTask: task,
      msgs: [..._this.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]
    });
  }
})