微信小程序的请求封装

封装头部请求后的程序

第一步我们需要在utils的文件家中创建config.js

//config.js 
const env='prod'
let baseUrl=""
if (env=='dev'){
  baseUrl = "https://huruqing.cn:3009"
}else if(env=='prod'){
  baseUrl = "https://huruqing.cn:3009"
}
export {
  baseUrl
}

config.js是我们配置头部地址，主要是对不同的环境配置不同的地址
一般一个软件产品从开发到用户使用都涉及到开发环境、测试环境、回归环境、预发布环境、生产环境。
下面说说我个人对这些环境的理解：

1、开发环境
顾名思义，开发同学开发时使用的环境，每位开发同学在自己的dev分支上干活，提测前或者开发到一定程度，各位同学会合并代码，进行联调。

2、测试环境
也就是我们测试同学干活的环境啦，一般会由测试同学自己来部署，然后在此环境进行测试。bug修复后，需要发版更新测试环境来回归bug。

3、回归环境
回归bug的环境，其实就是我们的测试环境，在测试环境上测试、回归验证bug。

4、预发布环境
测试环境到生产环境的过渡。测试环境可能会受到一些限制，一些流程或者数据没有测试到，就可以在预发布环境进行验证，从而保证产品上线质量。

预发布环境和生产环境区别：
1）预发环境中新功能为最新代码，其他功能代码和生产环境一致。
2）预发环境和生产环境的访问域名不同。

注意事项：
1）预发布环境一般会连接生产环境的数据库，测试时要注意，以免产生脏数据，影响生产环境的使用。

5、生产环境
即线上环境，用户使用的环境。由特定人员来维护，一般人没有权限去修改。

另外，还有个灰度发布，发生在预发布环境之后，生产环境之前。
生产环境一般会部署在多台机器上，以防某台机器出现故障，这样其他机器可以继续运行，不影响用户使用。灰度发布会发布到其中的几台机器上，验证新功能是否正常。如果失败，只需回滚这几台机器即可。
第二步我们需要在utils的文件家中创建request.js文件
request.js文件是我们向服务器发起请求以及对数据进行拦截

//我们上一个步骤已经写好了config.js文件，在这里我们引入
import { baseUrl} from './config.js'

function serve(url, data, method){
//设置请求方式，默认为get请求
  method=method||'get'
//请求头地址与url进行拼接
  url = baseUrl+url 
  let token = wx.getStorageSync("token");//获取我们在登录成功存储的token
//小程序的请求是通过Promise进行请求的，请求的命令是wx.request
  return new Promise((resolve,rejuct)=>{      
      //发起数据请求
      wx.request({
        url,
        data,
        method,
        header: { //这是把token给header头部
          "user-token": token
        },
        //成功的时候
        success(res) {     
          if (res.data.code===666) {//登录成功的情况
            resolve(res.data)

          } else if (res.data.code === 603){
//如果不是登录的状态，当我们要去的页面需要登录，此时就提示用户去登陆        
          //这个时候有两种情况，一种是用户点击登录，另一种是用户点击取消
            wx.showModal({
              title: "提示",
              content: "登录已过期，是否重新登录",
              success(res) {
                if (res.confirm) {
                  // 跳转到个人中心页面
                  wx.switchTab({
                    url: "/pages/my/index"
                  });
                } else if (res.cancel) {
                  console.log("用户点击取消");
                }
              }
            });//提示框结束
          }
          else {    //其他的错误提示        
            rejuct(res.data.msg)
          }
        },
        //失败的时候，使我们发起请求失败
        fail(err) {        
            rejuct("获取数据失败", err)
        },        
      })   
  })
}

function get(url,method){
  return serve(url,method,'get')
}

function post(url, method) {
  return serve(url, method,'post')
}

export default {
  get,
  post
}

第三步就是写我们的登录页面的js文件

//index.js
//获取应用实例
const app = getApp()

Page({
  data: {
    motto: 'Hello World',
    userInfo: {},
    hasUserInfo: false,
    canIUse: wx.canIUse('button.open-type.getUserInfo'),
    isLogin: false, //登录的转态
    nickName: "",
    headImg: "", //头像
    code: "", //登录凭证
  },

  // /////////////获取凭证code，我们是通过wx.login()的方法获取到登录需要的凭证
  getCode() {
    wx.login({
      success: (code) => {
        this.setData({
          code: code.code,        
        })
        
        ////////////获取用户信息,当我们重新刷新页面的时候，需要获取我们缓存的用户信息，这样当我们刷新的时候数据依旧存在
        let userInfo = wx.getStorageSync("userInfo")
        console.log("用户信息：", userInfo)
        this.setData({
          nickName: userInfo.nickName,
          headImg: userInfo.avatarUrl
        })
      }
    })
  },

  // /////////登录的方法，当我们点击登录按钮的时候，就会触发该事件
  login(event) { 
    //////判断是否已经登录了，如果已经登录了，就不执行以下的程序
    let token = wx.getStorageSync('token')
    if (token) { //如果已经有登录就不执行以下程序，并提示已经登录
      wx.showToast({
        title: '已经登录了',
      })
      return false //并退出
    } else {
////////////如果没有登录，我们需要登录
//首先我们知道，通过bindgetuserinfo绑定的方法我们可以通过回调参数获取到用户信息


//通过该回调参数，我们可以拿到用户的姓名以及头像
      let rawData = JSON.parse(event.detail.rawData)
      this.setData({
        nickName: rawData.nickName,
        headImg: event.detail.userInfo.avatarUrl
      })
//获取登录需要的一些重要参数，必须要有的参数有四个
      let {
        encryptedData,
        iv,
        userInfo
      } = event.detail

      let data = {
        code: this.data.code,
        encryptedData,
        iv,
        userInfo
      }
      let url = "/user/login"
      app.$get(url, data).then(res => {
        wx.showToast({
          title: '登录成功',
        })

        //保存登录状态
        this.setData({
          isLogin: true
        })
        let {
          token
        } = res.user
        wx.setStorageSync('token', token);
        wx.setStorageSync('userInfo', userInfo)
      }).catch(err => {
        console.log("登录失败", err)
      })
    }

  },


  ////////////////跳转到我的订单
  goOrderList() {
    wx.navigateTo({
      url: '/pages/order/list/list',
    })
  },
  onShow: function() {
    this.getCode();

  },
  onLoad: function() {
 
  }
})

第四步我们就需要定义一个登录的按钮了

//index.wxml
// bindgetuserinfo='login' 中的login是我们自定义的，然后在js中定义该函数就行了
  <button 
      open-type="getUserInfo" 
      bindgetuserinfo='login' 
      class="login">
      {{nickName?nickName:"立即登录"}}
</button>

第五步我们需要在app.js全局导入我们配置好的request.js文件

//app.js

//全局导入utils的request.js的文件，这是我们已经封装好的
import $https from './utils/request.js'
App(    
  {
  onLaunch: function () {
    //请求的封装，这是对get和post的方法赋给全局的$get和$post，这样我们只要在需要使用去调用getApp()就可以使用了  
    this.$get = $https.get;
    this.$post = $https.post;


    this.$categoryId="1111111111" //分类商品的Id

    // 展示本地存储能力
    var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)

    // 登录
    wx.login({
      success: res => {
        // 发送 res.code 到后台换取 openId, sessionKey, unionId
      }
    })
    // 获取用户信息
    wx.getSetting({
      success: res => {
        if (res.authSetting['scope.userInfo']) {
          // 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
          wx.getUserInfo({
            success: res => {
              // 可以将 res 发送给后台解码出 unionId
              this.globalData.userInfo = res.userInfo

              // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
              // 所以此处加入 callback 以防止这种情况
              if (this.userInfoReadyCallback) {
                this.userInfoReadyCallback(res)
              }
            }
          })
        }
      }
    })
  },})

第六步在我们需要的页面使用就行

//index.js
const app =getApp()


// pages/order/detail/detail.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    orderId:"",//订单Id
    isPay:false,//是否支付
    addressInfo:{},//地址信息
    carts:[],//商品
    totalPrice:0,//商品总价
    total_fee: 0,//实付金额    
    updateTime:0,//时间戳
    expressFee:0 ,//运费
    tiem:""

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    console.log("options.orderId", options.orderId)
    console.log("options.isPay", options.isPay)
    let isPay = options.isPay=='true'?true:false
    // wx.setStorageSync("orderId", options.orderId)
    this.setData({
      orderId:options.orderId,
      isPay:isPay,

    })
    /////////////////调用数据
    this.getList()
  },

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

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

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

  },

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

  },

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

  },

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

  },

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

  },
  //////////////////////////////方法部分
  getList(){
  
    let url ="/order/detail"
    let data ={
      orderId: this.data.orderId
    
    }
    app.$get(url,data).then(res=>{
      console.log("获取",res)

      this.setData({
        addressInfo: res.result.addressInfo,
        carts: res.result.carts,
        total_fee: res.result.total_fee,
        totalPrice: res.result.totalPrice,
        updateTime: res.result.updateTime,
        expressFee: res.result.expressFee
      })
     
      let date = new Date(this.data.updateTime)

      const year = date.getFullYear()
      const month = date.getMonth() + 1
      const day = date.getDate()
      const hour = date.getHours()
      const minute = date.getMinutes()
      const second = date.getSeconds()
      let tiem = `${year}-${month}-${day} ${hour}:${minute}:${second}`
      this.setData({
        tiem: tiem
      })
     
    }).catch(err=>{
      console.log("err",err)
    })
  },
  ///////////////////////////跳转到地址详情
  goAddress(){
    wx.navigateTo({
      url: '/pages/address/list/list',
    })
  },
  /////////////////跳转到订单列详情
  goOrderComfirm(){

wx.navigateTo({
  url: `/pages/order/orderConfirm/index`,
})
  },
})