微信小程序 与后台进行信息交流

一切代码都需要尽可能的复用

方式一

step 1 记录下这个接口的地址

以下放在一个单独的js文件中，取名api.js

// 主地址
const api = 'https://store.chezhu.xin/';

给每一个不同的接口加上分地址

// 登录
const v1 = 'api/wx/openId';
function login() {
  return api + v1;
};
// 保存用户信息
const v2 = 'check_login';
function checkLogin() {
  return api + v2;
};
// 个人中心
const v3 = 'getUser';
function getUser() {
  return api + v3;
};

将接口暴露出去以便使用

module.exports = {
  login: login,
  checkLogin: checkLogin,
  getUser: getUser
};

step 2 发起请求

以下放在一个单独的js文件中，取名request.js
引入：

var api = require('./api.js');

只需要写两个请求的函数，一个get 一个post,其他的都使用这两个函数

function requestData(url, data0, successCallback, errorCallback) {
    wx.request({
        url: url,
        method: 'POST',
        data: data0,
        header: {
          'content-type': 'application/x-www-form-urlencoded' 
        },
        success: function (res) {
            successCallback(res);
        },
        error: function (res) {
            errorCallback(res);
        },
    });
}
function requestData2(url, data0, successCallback, errorCallback) {
  wx.request({
    url: url,
    method: 'GET',
    data: data0,
    success: function (res) {
      successCallback(res);
    },
    error: function (res) {
      errorCallback(res);
    },
  });
}
这两个函数不需要暴露出去

其他获取其他接口的函数就可以写了

// 个人中心
function getUser(data, successCallback, errorCallback) {
    requestData(api.getUser(), data, successCallback, errorCallback);
}
// 列表
function list(data, successCallback, errorCallback) {
  requestData2(api.list(), data, successCallback, errorCallback);
}

将功能性函数暴露出去

module.exports = { 
    getMarkerInfo: getMarkerInfo,
    getSystemInfo: getSystemInfo,
    getCalculateWay: getCalculateWay,
    getCalculateList: getCalculateList,
    getPhoneNumber: getPhoneNumber
};
与api.js文件的方式一摸一样

step 3 在page.js中使用

需要以回调函数的形式使用

 request.getGoodsDetail(data,(res)=>{
      console.log(res);
      if(res.data.status==0){//返回的是正确的信息
          
      }else if(res.data.status==1){//返回的是错误的信息
        
      }
      
    })

目前不够圆满，因为对请求出错的情况没有进行处理。

方式二

step 1 定义使用promise

/**
 * 作用：使用影响力兑换老师点评次数
 * 传输过去的数据：
 * userId->wx.getStorageSync("userId")
 * inviteCommentNum->要兑换的数量
 * 返回的数据：res.data
 * 返回的状态：200 400
 */
function getUserStudyNum() {
  return new Promise((resolve, reject) => {
    wx.request({
      url: app.globalData.host + '/jxcapp/myInfo/getUserStudyNum',
      data: {
        userId: wx.getStorageSync("userId")
      },
      success: res => {
        if (res.data.code == 200) {
          resolve(res.data)
        } else if (res.data.code == 400) {
          wx.showToast({
            title: res.data.message,
            icon: none
          })
        }
      },
      fail: err => {
        wx.showToast({
          title: '请检查网络后重试！',
          icon: "none"
        })
      }
    })
  })
}
module.exports={
  getUserStudyNum,
}

step 2 在页面上使用

先引入：var req=require("../../utils/req.js");
然后使用：

req.getUserStudyNum().then(res=>{
  console.log(res)
})

此处的res是resolve的参数传过来的值。

控制台报错

小程序报错:
如果是4xx的错误，那么一般是前端这边的问题；
如果是5xx报错，那么一般是服务器的问题。

状态位：[不同后端定义的不同，皆可]
如果status是0，如果res.data.code==200那么代表返回了正确的信息。
如果status是1，如果res.data.code==400那么代表返回了错误的信息。

如果单个请求的话：一个典型的post请求。

  tapSignin: function () {
    var that = this;
    var data = {
      openId: wx.getStorageSync('openId')
    }
    wx.request({
      url: 'http://172.16.32.101:7443/api/sign',
      header: {
        'content-type': 'application/x-www-form-urlencoded'
      },
      method: 'POST',
      data: data,
      success: function (res) {
        if (res.data.status == 0) {
          that.setData({
            signDay: that.data.signDay+1
          })
          if (that.data.signDay + 1>=10){
            wx.showModal({
              title: '恭喜',
              content: '已将10元加油券收入囊中，成功省下一包水果钱',
              showCancel:false,
              confirmText:'我知道了'
            })
          }
        }else if(res.data.status==1){//返回的是错误的信息
        
        }
        console.log(res, 'res');
      }
    })
  },

一个典型的get请求：

  getSignin:function(){
    var that=this;
    var data={
      openId: wx.getStorageSync('openId')
    }
    wx.request({
      url: 'http://172.16.32.101:7443/api/sign/count',
      data:data,
      success:function(res){
        if(res.data.status==0){
          that.setData({
            signDay: res.data.data
          })
        }else if(res.data.status==1){//返回的是错误的信息
        
        }
        console.log(res,'res'); 
      }
    })
  },

data-绑定数据：

即使此处的couponId是大写，但是转过去之后：依然是：
e.currentTarget.dataset.couponid小写的。

临界值的确定

正如吴军的谷歌方法论所说，按照计算机思维考虑无穷大和无穷小的数值，考虑代码运行无数次的后果，那么这样子的才是健康的代码。

重要的是0，类型，如果是数字，那么需要知道正数还是负数，如果是对象，那么需要知道对象的某一个属性是否有，

• number: 值为0应该传过来

• 对象的属性如果没有，那么可以传 空字符串，但是不能不传，因为这边默认有，那样就会报undefiened的错。一种是让后台返，一种是自己定义的时候可以使用"userInfo.startStudyTime": res.result.startStudyTime||"",||运算符可以给默认值，这样就不会报错，判断的时候，{{userInfo.startStudyTime}}就可以判断是否是存在的值，如果是赋值的""那么就会是false.所以就可以判断了。

• 样式的显示：
  超出可以显示的无穷大位数的显示。