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

news2024/9/22 2:10:14

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

文章目录

  • 微信小程序API
    • 服务器域名配置注意
    • 网络相关API
      • request
        • RequestTask 请求任务对象
        • object.success 回调函数
        • object.fail 回调函数
        • 案例代码（实现轮播图）
      • WebSocket
        • 案例代码（实现简易的聊天面板）

微信小程序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

属性类型默认值必填说明最低版本
urlstring是开发者服务器接口地址
datastring/object/ArrayBuffer否请求的参数
headerObject否设置请求的 header，header 中不能设置 Referer。 content-type 默认为 application/json
timeoutnumber否超时时间，单位为毫秒。默认值为 600002.10.0
methodstringGET否HTTP 请求方法
dataTypestringjson否返回的数据格式
responseTypestringtext否响应的数据类型1.7.0
enableHttp2booleanfalse否开启 http22.10.4
enableQuicbooleanfalse否开启 quic2.10.4
enableCachebooleanfalse否开启 cache2.10.4
enableHttpDNSbooleanfalse否是否开启 HttpDNS 服务。如开启，需要同时填入 httpDNSServiceId 。 HttpDNS 用法详见 移动解析HttpDNS2.19.1
httpDNSServiceIdstring否HttpDNS 服务商 Id。 HttpDNS 用法详见 移动解析HttpDNS2.19.1
enableChunkedbooleanfalse否开启 transfer-encoding chunked。2.20.2
forceCellularNetworkbooleanfalse否wifi下使用移动网络发送请求2.21.0
successfunction否接口调用成功的回调函数
failfunction否接口调用失败的回调函数
completefunction否接口调用结束的回调函数（调用成功、失败都会执行）

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 的合法值

合法值说明
OPTIONSHTTP 请求 OPTIONS
GETHTTP 请求 GET
HEADHTTP 请求 HEAD
POSTHTTP 请求 POST
PUTHTTP 请求 PUT
DELETEHTTP 请求 DELETE
TRACEHTTP 请求 TRACE
CONNECTHTTP 请求 CONNECT

object.dataType 的合法值

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

object.responseType 的合法值

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

object.success 回调函数

Object res

属性类型说明最低版本
datastring/Object/Arraybuffer开发者服务器返回的数据
statusCodenumber开发者服务器返回的 HTTP 状态码
headerObject开发者服务器返回的 HTTP Response Header1.2.0
cookiesArray.开发者服务器返回的 cookies，格式为字符串数组2.10.0
profileObject网络请求过程中一些调试信息，查看详细说明2.10.4
exceptionObject网络请求过程中的一些异常信息，例如httpdns重试等3.0.0

object.fail 回调函数

Object err

属性类型说明最低版本
errMsgString错误信息
errnoNumbererrno 错误码，错误码的详细说明参考 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();方法逻辑

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

在这里插入图片描述

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

  • 首先是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;
}

效果图

在这里插入图片描述

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

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

在这里插入图片描述

// 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]
    });
  }
})

效果图

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/936672.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Vue:插槽，与自定义事件

Vue:插槽，与自定义事件

1.插槽slot <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>Title</title> </head> <body> <div id"app"><!-- <p>列表书籍</p>--> <!-- …
阅读更多...
【【STM32分析IO该设置什么模式的问题】】

【【STM32分析IO该设置什么模式的问题】】

STM32分析IO该设置什么模式的问题 我们分析而言 我们对于PA0 的设计就从此而来 对于边沿触发的选择我们已经有所了解了 我们下拉&#xff0c;但是当我们摁下开关的时候 从0到1 导通了 所以这个是下拉 上升沿触发 而对于KEY0 我们摁下是使得电路从原来悬空高阻态到地就是0 所以…
阅读更多...
如何选择合适的损失函数

如何选择合适的损失函数

目录 如何选择合适的损失函数 1、均方误差&#xff0c;二次损失&#xff0c;L2损失&#xff08;Mean Square Error, Quadratic Loss, L2 Loss&#xff09; 2、平均绝对误差&#xff0c;L1损失&#xff08;Mean Absolute Error, L1 Loss&#xff09; 3、MSE vs MAE &#xff…
阅读更多...
C++--两个数组的dp问题(2)

C++--两个数组的dp问题(2)

1.交错字符串 力扣&#xff08;LeetCode&#xff09;官网 - 全球极客挚爱的技术成长平台 给定三个字符串 s1、s2、s3&#xff0c;请判断 s3 能不能由 s1 和 s2 交织&#xff08;交错&#xff09; 组成。 两个字符串 s 和 t 交织 的定义与过程如下&#xff0c;其中每个字符串都…
阅读更多...
matlab使用教程(26)—常微分方程的求解

matlab使用教程(26)—常微分方程的求解

1.求解非刚性 ODE 本页包含两个使用 ode45 来求解非刚性常微分方程的示例。MATLAB 提供几个非刚性 ODE 求解器。 • ode45 • ode23 • ode78 • ode89 • ode113 对于大多数非刚性问题&#xff0c;ode45 的性能最佳。但对于允许较宽松的误差容限或刚度适中的问题&…
阅读更多...
前端vue3+typescript架构

前端vue3+typescript架构

1、vue creat 项目名称 选择自定义 选择需要的依赖 选择vue3 一路enter&#xff0c;选择eslistprettier 继续enter&#xff0c;等待安装 按步骤操作&#xff0c;项目启动成功 2、vscode安装5款插件 2、代码保存自动格式化&#xff0c;保证每个开发人员代码一致&#xff0c;根目…
阅读更多...
关于devos勒索病毒，这些是你应该了解的，勒索病毒解密

关于devos勒索病毒，这些是你应该了解的，勒索病毒解密

Devos 勒索病毒是一种近年来引起广泛关注的恶意软件&#xff0c;它通过加密用户文件来实施勒索&#xff0c;给用户带来了极大的困扰。本文将介绍 Devos 勒索病毒的特征、危害、防范措施及案例分析&#xff0c;帮助大家更好地了解和应对这一威胁。 一、Devos 勒索病毒的特点 加密…
阅读更多...
C语言——指针进阶（一）

C语言——指针进阶（一）

目录 ​编辑 一.字符指针 1.1 基本概念 1.2 面试题 二.指针数组 三.数组指针 3.1 数组指针的定义 3.2 &数组名VS数组名 3.3 数组指针的使用 四.数组参数、指针参数 4.1 一维数组传参 ​编辑 4.2 二维数组传参 4.3 一级指针传参 4.4 二级指针传参 ​编辑 五.…
阅读更多...
ScheduleJS Crack,新的“信息列”水平滚动功能

ScheduleJS Crack,新的“信息列”水平滚动功能

ScheduleJS Crack,新的“信息列”水平滚动功能 增加了对Angular 16的支持 新的“信息列”水平滚动功能。 新的“信息列”固定功能。 添加了输入属性以处理组件模板中的偶数和奇数ScheduleRowPlainBackgroundColor以及CSS变量。 改进了“信息列”和角度甘特组件的类型。 Schedul…
阅读更多...
Linux内核学习（十一）—— 进程地址空间（基于Linux 2.6内核）

Linux内核学习（十一）—— 进程地址空间（基于Linux 2.6内核）

目录 一、地址空间 二、内存描述符 三、虚拟内存区域 四、操作内存区域 find_vma() mmap() 和 do_mmap()&#xff1a;创建地址区间 五、页表 一、地址空间 进程地址空间由进程可寻址并且允许进程使用的虚拟内存组成&#xff0c; 每个进程都有一个 32 位或 64 位的平坦&…
阅读更多...
HTB Getting Started

HTB Getting Started

HackTheBox Getting Started 练习解析 1.Basic Tools 直接用知识点 sjhdvjshtb[/htb]$ netcat 10.10.10.10 22SSH-2.0-OpenSSH_8.4p1 Debian-32.Service Scanning 这题需要连接vpn进行扫描 kail连接VPN sudo openvpn academy-regular.opvn #kail 没安装openvpn需要进行安装…
阅读更多...
文本分类任务

文本分类任务

文章目录 引言1. 文本分类-使用场景2. 自定义类别任务3. 贝叶斯算法3.1 预备知识3.2 贝叶斯公式3.3 贝叶斯公式的应用3.4 贝叶斯公式在NLP中的应用3.5 贝叶斯公式-文本分类3.6 代码实现3.7 贝叶斯算法的优缺点 4. 支持向量机4.1 支持向量机-核函数4.2 支持向量机-解决多分类4.3…
阅读更多...
设计模式入门：解密优雅的代码构建

设计模式入门：解密优雅的代码构建

从本篇文章开始&#xff0c;我们将开启一个设计模式的系列文章&#xff0c;主要用来介绍常用的设计模式&#xff0c;使用场景和代码案例&#xff0c;对设计模式不熟悉的老铁可以关注一下&#xff0c;可以快速让你入门设计模式。 在软件开发的世界中&#xff0c;设计模式是一种…
阅读更多...
1.神经网络基础知识

1.神经网络基础知识

所有有用的计算机系统都有一个输入和一个输出&#xff0c; 并在输入和输出之间进行某种类型的计算。 神经网络也是如此。 当我们不能精确知道一些事情如何运作时&#xff0c; 我们可以尝试使用模型来估计其运作方式&#xff0c; 在模型中&#xff0c; 包括了我们可以调整的参数…
阅读更多...
4-1-netty

4-1-netty

非阻塞io 服务端就一个线程&#xff0c;可以处理无数个连接 收到所有的连接都放到集合channelList里面 selector是有事件集合的 对server来说优先关注连接事件 遍历连接事件
阅读更多...
list(介绍与实现)

list(介绍与实现)

目录 1. list的介绍及使用 1.1 list的介绍 1.2 list的使用 1.2.1 list的构造 1.2.2 list iterator的使用 1.2.3 list capacity 1.2.4 list element access 1.2.5 list modififiers 1.2.6 list的迭代器失效 2. list的模拟实现 2.1 模拟实现list 2.2 list的反向迭代器 1.…
阅读更多...
Python 潮流周刊#17：Excel 终于支持 Python 了、Meta 重磅开源新项目、Mojo 新得 1 亿美元融资...

Python 潮流周刊#17：Excel 终于支持 Python 了、Meta 重磅开源新项目、Mojo 新得 1 亿美元融资...

△点击上方“Python猫”关注 &#xff0c;回复“1”领取电子书 你好&#xff0c;我是猫哥。这里每周分享优质的 Python、AI 及通用技术内容&#xff0c;大部分为英文。标题取自其中三则分享&#xff0c;不代表全部内容都是该主题&#xff0c;特此声明。 本周刊由 Python猫 出品…
阅读更多...
内核模块添加功能及使用（静态、动态）

内核模块添加功能及使用（静态、动态）

一、向内核添加新功能 1.1 静态加载法&#xff1a; 即新功能源码与内核其它代码一起编译进uImage文件内 新功能源码与Linux内核源码在同一目录结构下 在linux-3.14/driver/char/目录下编写myhello.c&#xff0c;文件内容如下&#xff1a; #include <linux/module.h> #i…
阅读更多...
如何使用腾讯云服务器搭建网站？

如何使用腾讯云服务器搭建网站？

使用腾讯云服务器搭建网站全流程&#xff0c;包括轻量应用服务器和云服务器CVM建站教程&#xff0c;轻量可以使用应用镜像一键建站&#xff0c;云服务器CVM可以通过安装宝塔面板的方式来搭建网站&#xff0c;腾讯云服务器网分享使用腾讯云服务器建站教程&#xff0c;新手站长搭…
阅读更多...
【深度学习】Pytorch训练过程中损失值出现NaN

【深度学习】Pytorch训练过程中损失值出现NaN

项目场景 利用Pytorch框架&#xff0c;结合FEDformer开源代码&#xff08;https://github.com/MAZiqing/FEDformer&#xff09;&#xff0c;将自己的数据集作为输入训练模型。 问题描述 训练过程中&#xff0c;发现打印出来的Train loss, Test loss, Test loss中&#xff0c…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023