博客

微信小程序提供的一个发起HTTPS网络请求的request方法。

1.在app.js里 配置 apiBase：”写你的基地址”，

// app.js
App({
  onLaunch() {
    // // 展示本地存储能力
    // const logs = wx.getStorageSync('logs') || []
    // logs.unshift(Date.now())
    // wx.setStorageSync('logs', logs)

    // // 登录
    // wx.login({
    //   success: res => {
    //     // 发送 res.code 到后台换取 openId, sessionKey, unionId
    //   }
    // })
  },
  globalData: {
    userInfo: null
  },
    //新加的
  config:{
    apiBase:"https://locally.uieee.com"
  }

})

2.在utils里 配置（创建）一个自定义的 .js的文件，（在这儿我们就写一个reques.js 这么一个文件。）

3.在reques.js里面

//对wx.request二次封装
const app = getApp();
// console.log(app);
module.exports =(url,data,method="get",header={})=>{
  //loading动画
  wx.showLoading({
    title: 'Loading...',
    mask:true
  })
  return new Promise((resolve,reject)=>{
    wx.request({
      //拼全地址
      url:app.config.apiBase + url,
      data,
      header,
      dataType:'json',
      success:resolve,
      fail:reject,
      complete:wx.hideLoading,
    })
  })
} 

4.页面中使用（index组件引入的话）

const request =require('../../utils/reques')

Page({
  onShareAppMessage() {
   
  },
  /**
   * 页面的初始数据
   */
  data: {
    slides:[]，
  },



  /**
   * 生命周期函数--监听页面加载
   */

  onLoad: function (options) {

    //请求一个轮播图，/slides是一个地址你可以换成自己的，
    request('/slides').then(res=>{
      console.log(res.data);
      this.setData({
        slides:res.data
      })
    }).catch(err=>{
      console.log(err);
    })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    
  }
})

引入

const request =require('../../utils/reques')

例如：如下图所示：

轮播图案例：index.js文件

//引入封装的reques

const request =require('../../utils/reques')

Page({
  onShareAppMessage() {
   
  },
  /**
   * 页面的初始数据
   */
  data: {
    slides:[],
    categories:[],
  },



  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    //第一种方式(不封装的方法)
    // var thas=this
    // wx.request({
    //   url: 'https://locally.uieee.com/slides',
    //   methed:"get",
    //   header:{
    //     "content-type":"application/jsonn"
    //   },
    //   success (res) {
    //     console.log(res.data)
    //     thas.setData({
    //     slides=res.data
    //     })
       
    //   }, 
    //   fail(error){
    //     console.log(error)
    //   }

    // })
    
    //第二种方式(封装的方法)
    request('/slides').then(res=>{
      console.log(res.data);
      this.setData({
        slides:res.data
      })
    })
    .catch(err=>{
      console.log(err);
    })

    request('/categories ').then(res=>{
      console.log(res.data);
      this.setData({
        categories:res.data
      })
    })
    .catch(err=>{
      console.log(err);
    })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    
  }
})

轮播图案例：index.wxml文件，

注意这里的navigator是页面跳转路由的，你可以换成block，去掉url和第二个image标签就好了。

<swiper class="slides" indicator-dots="{{slides.length>0}}" 
autoplay="{{autoplay}}" indicator-color="#bcc0ac" indicator-active-color="#ccc">
  
    <swiper-item  wx:for="{{slides}}"  wx:key="{{id}}">
      <!-- 页面路由跳转 -->
      <navigator wx:if="{{item.link}}" url="{{item.link}}">
        <image src='{{item.image}}' mode="aspectFill"></image>
      </navigator>
      <image wx:else src='{{item.image}}' mode="aspectFill"></image>
    </swiper-item>
</swiper>