微信小程序首页后台交互

1. 后台准备

2. 封装request

2.1 什么是Promise

Promise 是异步编程的一种解决方案,比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现,ES6 将其写进了语言标准,统一了用法,原生提供了Promise对象。

所谓Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果。从语法上说,Promise 是一个对象,从它可以获取异步操作的消息。Promise 提供统一的 API,各种异步操作都可以用同样的方法进行处理。

  • promise运行中有三个状态:

    • pending: 等待 (进行中) promise一创建出来,就是pending进行中
    • fulfilled: 成功 (已完成), 调用 resolve, 就会将状态从pending改成fulfilled, 且将来就会执行.then
    • rejected: 失败 (拒绝), 调用 reject, 就会将状态从pending改成rejected, 且将来就会执行.catch
  • 注意点:

    • 一旦promise的状态发生变化, 状态就会被凝固
    • 如果再调用reject或resolve,进行状态修改就没有意义了

2.2 封装request

/**
 * 封装微信的request请求
 */
function request(url, data = {}, method = "GET") {
  return new Promise(function (resolve, reject) {
    wx.request({
      url: url,
      data: data,
      method: method,
      header: {
        'Content-Type': 'application/json',
      },
      success: function (res) {
        if (res.statusCode == 200) {
            resolve(res.data);//会把进行中改变成已成功
        } else {
          reject(res.errMsg);//会把进行中改变成已失败
        }
      },
      fail: function (err) {
        reject(err)
      }
    })
  });
}

2.3 config/api


// 以下是业务服务器API地址
 // 本机开发API地址
 var WxApiRoot = 'http://localhost:8080/oapro/wx/';
 // 测试环境部署api地址
 // var WxApiRoot = 'http://192.168.0.101:8070/oapro/wx/';
 // 线上平台api地址
 //var WxApiRoot = 'https://www.oa-mini.com/oapro/wx/';
 
 module.exports = {
   IndexUrl: WxApiRoot + 'home/index', //首页数据接口
   SwiperImgs: WxApiRoot+'swiperImgs', //轮播图
   MettingInfos: WxApiRoot+'meeting/list', //会议信息
 }; 

2.4 index/index.js


  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    this.getMeetingMember();
  },
    /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
    this.getMeetingMember();
  },
  getMeetingMember() {
    util.request(api.IndexUrl).then(res=>{
      this.setData({
        lists:res.data.infoList
      })
    });
  },
  • 注意:需要将mock功能关闭

2.5 index/index.wxml

为简单实现先将会议列表的图片写死,项目中需要将此项放入数据库中配置


      
 

2.6 参与人数和日期格式

  • 定义一个wxs, 请参考参考项目中的 utils/pages.wxs
  • 在index/index.wxml中引入wxs使用,请参考源码中的功能实现

你可能感兴趣的:(微信小程序,小程序,前端)