安溪建设局网站,网站权限,网络推广培训网站,西地那非片多少钱一盒09-微信小程序API网络请求(实现轮播广告和简易的聊天窗口) 文章目录 微信小程序API服务器域名配置注意网络相关APIrequestRequestTask 请求任务对象object.success 回调函数object.fail 回调函数案例代码#xff08;实现轮播图#xff09; WebSocket案例代码#xff08;实现…09-微信小程序API网络请求(实现轮播广告和简易的聊天窗口) 文章目录 微信小程序API服务器域名配置注意网络相关APIrequestRequestTask 请求任务对象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否设置请求的 headerheader 中不能设置 Referer。 content-type 默认为 application/jsontimeoutnumber否超时时间单位为毫秒。默认值为 600002.10.0methodstringGET否HTTP 请求方法dataTypestringjson否返回的数据格式responseTypestringtext否响应的数据类型1.7.0enableHttp2booleanfalse否开启 http22.10.4enableQuicbooleanfalse否开启 quic2.10.4enableCachebooleanfalse否开启 cache2.10.4enableHttpDNSbooleanfalse否是否开启 HttpDNS 服务。如开启需要同时填入 httpDNSServiceId 。 HttpDNS 用法详见 移动解析HttpDNS2.19.1httpDNSServiceIdstring否HttpDNS 服务商 Id。 HttpDNS 用法详见 移动解析HttpDNS2.19.1enableChunkedbooleanfalse否开启 transfer-encoding chunked。2.20.2forceCellularNetworkbooleanfalse否wifi下使用移动网络发送请求2.21.0successfunction否接口调用成功的回调函数failfunction否接口调用失败的回调函数completefunction否接口调用结束的回调函数调用成功、失败都会执行
RequestTask 请求任务对象
data 参数说明
最终发送给服务器的数据是 String 类型如果传入的 data 不是 String 类型会被转换成 String 。转换规则如下
对于 GET 方法的数据会将数据转换成 query stringencodeURIComponent(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 请求 OPTIONSGETHTTP 请求 GETHEADHTTP 请求 HEADPOSTHTTP 请求 POSTPUTHTTP 请求 PUTDELETEHTTP 请求 DELETETRACEHTTP 请求 TRACECONNECTHTTP 请求 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.0cookiesArray.开发者服务器返回的 cookies格式为字符串数组2.10.0profileObject网络请求过程中一些调试信息查看详细说明2.10.4exceptionObject网络请求过程中的一些异常信息例如httpdns重试等3.0.0
object.fail 回调函数
Object err
属性类型说明最低版本errMsgString错误信息errnoNumbererrno 错误码错误码的详细说明参考 Errno错误码2.24.0
案例代码实现轮播图
轮播广告页面代码
index.wxml
swiper indicator-dotstrue autoplaytrue interval3000 duration500swiper-item wx:for{{images}}image src{{item.original}} width375 height150 //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?type1,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 nameurl valuews://127.0.0.1:18081/ws/1001 bindinputurlInput /
button sizemini typewarn断开连接/button
button sizemini typeprimary bindtapconnectSocket开启连接/button
textarea placeholder输入发送内容 bindinputmsgInput/textarea
button sizemini typeprimary bindtapsendMsg发送/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]});}
})
效果图
