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

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

文章目录

• 微信小程序API
• • 服务器域名配置注意
  • 网络相关API
  • • request
    • WebSocket

微信小程序API

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

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

官方文档

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

服务器域名配置注意

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

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

官方文档

网络相关API

request

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

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

• 用法：RequestTask wx.request(Object object)

• 参数 Object object wx.request

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)...）

object.method 的合法值

object.dataType 的合法值

object.responseType 的合法值

object.success 回调函数

Object res

object.fail 回调函数

Object err

案例代码（实现轮播图）

• 轮播广告页面代码

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

效果图