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

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

效果图

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

C++数据结构学习——栈

C++数据结构学习——栈

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、栈二、C语言实现1.声明代码2.实现增删查改代码3.测试代码 总结 前言 栈&#xff08;Stack&#xff09;是计算机科学中一种常见的数据结构&#xff0c;它是…
阅读更多...
PHP敬老院管理系统Dreamweaver开发mysql数据库web结构php编程计算机网页

PHP敬老院管理系统Dreamweaver开发mysql数据库web结构php编程计算机网页

一、源码特点 PHP 敬老院管理系统&#xff08;养老&#xff09;是一套完善的web设计系统&#xff0c;对理解php编程开发语言有帮助&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模式开发。 论文 https://download.csdn.net/download/qq_41221322/…
阅读更多...
Wlan——STA上线流程与802.11MAC帧讲解以及报文转发路径

Wlan——STA上线流程与802.11MAC帧讲解以及报文转发路径

目录 802.11MAC帧基本概念 802.11帧结构 802.11MAC帧的分类 管理帧 控制帧 数据帧 STA接入无线网络流程 信号扫描—管理帧 链路认证—管理帧 用户关联—管理帧 用户上线 不同802.11帧的转发路径 802.11MAC帧基本概念 802.11协议在802家族中的角色位置 其中802.3标…
阅读更多...
数据结构——栈和队列OJ题

数据结构——栈和队列OJ题

栈和队列小提升&#xff01; 前言一、用队列实现栈队列接口实现&#xff08;1&#xff09;栈的接口定义&#xff08;2&#xff09;栈的初始化&#xff08;3&#xff09;入栈函数的定义&#xff08;4&#xff09;出栈函数的定义&#xff08;5&#xff09;查找栈顶元素&#xff0…
阅读更多...
Python“牵手”当当网商品详情API接口运用场景及功能介绍,当当网API接口申请指南

Python“牵手”当当网商品详情API接口运用场景及功能介绍,当当网API接口申请指南

当当网是全球知名的综合性网上购物商城&#xff0c;由国内著名出版机构科文公司、美国老虎基金、美国IDG集团、卢森堡剑桥集团、亚洲创业投资基金&#xff08;原名软银中国创业基金&#xff09;共同投资成立。当当网是北京当当网信息技术有限公司营运的一家中文购物网站&#x…
阅读更多...
QT版权查询

QT版权查询

文章目录 QT工具版权QT模块版权查询 根据条件自动筛选&#xff1a; Qt Features, Framework Essentials, Modules, Tools & Add-Ons QT工具版权 Licensing QT模块版权查询 在 All Modules 中点击进入每个模块&#xff0c;在详细内容中一般有Lisence相关内容。 Licens…
阅读更多...
uniapp - 实现卡片式胶囊单选后右上角出现 “√“ 对勾对号选中效果功能，适用于小程序h5网页app全平台通用（一键复制组件源码，开箱即用！）

uniapp - 实现卡片式胶囊单选后右上角出现 “√“ 对勾对号选中效果功能，适用于小程序h5网页app全平台通用（一键复制组件源码，开箱即用！）

效果图 uniapp全平台兼容（小程序/h5网页/app）实现点击选择后，右上角出现 √ 对号效果（角标形式展现），功能组件， 改个样式，直接复制使用该组件。 组件源码 在 components 组件文件夹下，随便建立一个 .vue 文件，一键复制下方源码。
阅读更多...
DockerFile解析

DockerFile解析

1. 是什么 Dockerfile是田来构建Docker镜像的文本文件&#xff0c;是由一条条构建镜像所需的指令和参数构成的脚本 1.1 概述 1.2 官网 Dockerfile reference | Docker Documentation 1.3 构建三步骤 1. 编写dockerfile文件 2. docker build命令构建镜像 3. docker run依镜像运…
阅读更多...
文本分类任务

文本分类任务

文章目录 引言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…
阅读更多...
go学习之流程控制语句

go学习之流程控制语句

文章目录 流程控制语句1.顺序控制2.分支控制2.1单分支2.2双分支单分支和双分支的四个题目switch分支结构 3.循环控制for循环控制while 和do...while的实现 4.跳转控制语句breakcontinuegotoreturngotoreturn 流程控制语句 介绍&#xff1a;在程序中&#xff0c;程序运行的流程…
阅读更多...
【LeetCode75】第三十七题 二叉树中的最长交错路径

【LeetCode75】第三十七题 二叉树中的最长交错路径

目录 题目&#xff1a; 示例&#xff1a; 分析&#xff1a; 代码&#xff1a; 题目&#xff1a; 示例&#xff1a; 分析&#xff1a; 给我们一棵二叉树&#xff0c;问我们在这棵树里能找到的最长交错路径。最长交错路径就是在二叉树里一左一右一左一右这样走&#xff0c;最…
阅读更多...
Windows下搭建Tomcat HTTP服务，发布外网远程访问

Windows下搭建Tomcat HTTP服务，发布外网远程访问

文章目录 前言1.本地Tomcat网页搭建1.1 Tomcat安装1.2 配置环境变量1.3 环境配置1.4 Tomcat运行测试1.5 Cpolar安装和注册 2.本地网页发布2.1.Cpolar云端设置2.2 Cpolar本地设置 3.公网访问测试4.结语 前言 Tomcat作为一个轻量级的服务器&#xff0c;不仅名字很有趣&#xff0…
阅读更多...
港联证券|燃气板块午后走高，美能能源涨停，水发燃气大幅拉升

港联证券|燃气板块午后走高，美能能源涨停，水发燃气大幅拉升

燃气板块21日午后快速拉升&#xff0c;到发稿&#xff0c;美能动力涨停&#xff0c;水发燃气涨超7%&#xff0c;蓝天燃气涨超5%&#xff0c;贵州燃气涨逾4%。 消息面上&#xff0c;受澳大利亚LNG工厂罢工忧虑影响&#xff0c;欧洲基准天然气价格一度大涨18%。 有报导称&#x…
阅读更多...
Zenity 简介

Zenity 简介

什么使 Zenity Zenity 是一个开源的命令行工具&#xff0c;它提供了一种简单的方式来创建图形化的用户界面&#xff08;GUI&#xff09;对话框&#xff0c;以与用户进行交互。它基于 GTK 库&#xff0c;可以在 Linux 和其他 UNIX-like 系统上使用。 Zenity 可以通过命令行或脚…
阅读更多...
使用windeployqt和InstallShield打包发布Qt软件的流程

使用windeployqt和InstallShield打包发布Qt软件的流程

前言 Qt编译之后需要打包发布&#xff0c;并且发布给用户后需要增加一个安装软件&#xff0c;通过安装软件可以实现Qt软件的安装&#xff1b;用于安装软件的软件有很多&#xff0c;这里主要介绍InstallShield使用的流程&#xff1b; 使用windeployqt打包Qt编译后的程序 Qt程序…
阅读更多...
Linux操作系统--文件与目录结构

Linux操作系统--文件与目录结构

我们初步认识了Linux操作系统，下面我们进一步看看linux的文件与目录结构。 1.文件系统和挂载点 (1).当前的操作系统中查看文件系统 位置 > 计算机 这样你就可以看见当前操作系统中的所有目录和文件。如下所示: (2).挂载点 挂载点实际上就是linux中的磁盘文件系统的入口…
阅读更多...
Unittest 笔记：unittest拓展生成HTM报告发送邮件

Unittest 笔记：unittest拓展生成HTM报告发送邮件

HTMLTestRunner 是一个unitest拓展可以生成HTML 报告 下载地址&#xff1a;GitHub: https://github.com/defnnig/HTMLTestRunner HTMLTestRunner是一个独立的py文件&#xff0c;可以放在Lib 作为第三方模块使用或者作为项目的一部分。 方式1&#xff1a; 验证是否安装成功&…
阅读更多...
STM32f103入门（2）流水灯蜂鸣器

STM32f103入门（2）流水灯蜂鸣器

流水灯 /* #define GPIO_Pin_0 ((uint16_t)0x0001) /*!< Pin 0 selected */ #define GPIO_Pin_1 ((uint16_t)0x0002) /*!< Pin 1 selected */ #define GPIO_Pin_2 ((uint16_t)0x0004) /*!< Pin 2 selected */ #de…
阅读更多...
无涯教程-机器学习 - Jupyter Notebook函数

无涯教程-机器学习 - Jupyter Notebook函数

Jupyter笔记本基本上为开发基于Python的数据科学应用程序提供了一个交互式计算环境。它们以前称为ipython笔记本。以下是Jupyter笔记本的一些功能,使其成为Python ML生态系统的最佳组件之一- Jupyter笔记本可以逐步排列代码,图像,文本,输出等内容,从而逐步说明分析过程。 它有…
阅读更多...
带你启用window10专业版系统自带的远程桌面

带你启用window10专业版系统自带的远程桌面

启用window10专业版系统自带的远程桌面 文章目录 启用window10专业版系统自带的远程桌面前言1.找到远程桌面的开关2. 找到“应用”项目3. 打开需要远程操作的电脑远程桌面功能 总结 前言 Windows操作系统作为应用最广泛的个人电脑操作系统&#xff0c;在我们身边几乎随处可见。…
阅读更多...
最新文章

Copyright @ 2022~2023