微信小程序首页后台交互

最新推荐文章于 2024-05-07 09:14:43 发布

每一个难熬的夜晚

最新推荐文章于 2024-05-07 09:14:43 发布

阅读量200

点赞数 2

文章标签：微信小程序小程序前端

本文链接：https://blog.csdn.net/hjzhzhshhs/article/details/128473213

版权

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

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

<view class="meeting-imag">
      <image src="{{item.image?item.image:'/static/persons/1.jpg'}}"></image>
 </view>

2.6 参与人数和日期格式

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