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

2023-11-27 17:09:37 浏览数 (1)

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

代码语言：txt复制
微信小程序网络api的使用
微信小程序图片api的使用
微信小程序相机api的使用
微信小程序授权登录
实现小鱼租房首页
WePY介绍
插件演示

微信小程序API

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

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

官方文档

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

服务器域名配置注意

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

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

官方文档

网络相关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.<string>

开发者服务器返回的 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

代码语言：html复制
<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数组，默认空

代码语言：javascript复制
  /**
   * 页面的初始数据
   * 默认设置 images 空的数组
   */ 
data: {
    images:[] 
    },

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

代码语言：javascript复制
  //加载广告数据
  loadDate() {
        },

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

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

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

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

<img src="2023微信小程序图片/image-20230807154716007.png" alt="image-20230807154716007" style="zoom:50%;" />

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

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

index.js

代码语言：javascript复制
//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 页面

代码语言：json复制
{
  "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/

代码语言：html复制
<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中调整样式

代码语言：css复制
/* pages/im/im.wxss */

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

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

效果图

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

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

代码语言：javascript复制
// 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]
    });
  }
})

效果图

我正在参与2023腾讯技术创作特训营第三期有奖征文，组队打卡瓜分大奖！

2023腾讯·技术创作特训营第三期

0 人点赞