微信小程序开发——函数方法定义

WeChat小程序交流（QQ群：769977169）

微信小程序里的事件绑定，即方法定义，有三种情况。

情况1 

可以在当前xxx.js文件里直接定义，并使用，如下代码示例：

searchClick: function(even) {
    console.log(this.data.expressNumber)

    // 方法1 直接写请求方法
    if (this.data.expressNumber.length == 0)
    {
      wx.showToast({
        title: '请输入快递单号',
        image: '/images/icon/error.png',
      });

      return;
    }

    wx.showLoading({
      title: '请稍后',
    })

    wx.request({
      url: 'http://apis.baidu.com/kuaidicom/express_api/express_api?muti=0&order=desc&nu='+this.data.expressNumber,
      header: {
        'apikey': '2e24c33be1e7f7dafebc496c07441138'
      },
      success: function(res) {
        console.log("查找成功：");
        console.log(res);
        wx.hideLoading();
      },
      fail: function(res) {
        console.log("查找失败：");
        console.log(res);
        wx.hideLoading();
      }
    })
}

情况2

可以在app.js文件里定义，然后在被使用的文件中调用，如下代码示例：

在app.js中的定义

App({

  ......

  // 查询方法
  searchExpressInfo: function(expressNumber, callBack) {
    if (expressNumber.length == 0)
    {
      wx.showToast({
        title: '请输入快递单号',
        image: '/images/icon/error.png',
      });

      callBack(null);
      return;
    }

    wx.showLoading({
      title: '正在查找',
    });

    wx.request({
      url: 'http://apis.baidu.com/kuaidicom/express_api/express_api?muti=0&order=desc&nu=' + expressNumber,
      header: {
        'apikey': '2e24c33be1e7f7dafebc496c07441138'
      },
      success: function (res) {
        console.log("查找成功：");
        wx.hideLoading();
        // 回调
        callBack(res);
      },
      fail: function (res) {
        console.log("查找失败：");
        wx.hideLoading();
        // 回调
        callBack(res);
      }
    })
  }
})

在xxx.js中的使用，注意：使用app.js中定义的方法或属性时，必须先获取全局变量var app = getApp()

var app = getApp()

Page({

  .....

  searchClick: function(even) {
    console.log(this.data.expressNumber)

    // 方法2 调用在app.js中的封装方法
    app.searchExpressInfo(this.data.expressNumber, function(res){
      console.log(res);
    })
  }
})

情况3

在自定义的工具类文件中定义方法，然后在需要使用的文件中调用。如在util.js文件中定义，然后在xxx.js中使用。注意：在util.js中定义的方法，需要通过module.exports={xxxMethord: xxxMethord}公开暴露出来，否则被调用时识别不出来会出现；同时，在xxx.js文件中使用时，需要通过require("路径/util.js")导入util.js文件，再进行调用。

在util.js中的定义

module.exports = {
  formatTime: formatTime,
  request: request
}

// 请求方法
function request(url, header, params, callBack) {

  wx.showLoading({
    title: '请稍后',
  })

  wx.request({
    url: url,
    header: header,
    success: function(res) {
      wx.hideLoading();
      callBack(res);
    },
    fail: function(res) {
      wx.hideLoading();
      callBack(res);
    }
  })
}

在xxx.js中的使用

var util = require("../../utils/util.js")

Page({

  ......

  searchClick: function(even) {
    console.log(this.data.expressNumber)

    // 方法3 调用在util.js中的封装方法
    if (this.data.expressNumber.length == 0) {
      wx.showToast({
        title: '请输入快递单号',
        image: '/images/icon/error.png',
      });

      return;
    }
    var url = 'http://apis.baidu.com/kuaidicom/express_api/express_api?muti=0&order=desc&nu=' + this.data.expressNumber;
    var header = {'apikey': '2e24c33be1e7f7dafebc496c07441138'};
    var params = null;
    util.request(url, header, params, function(res){
      console.log(res);
    })
  }
}

其它注意事项

1、在util.js中定义后，如果未通过moudle.exports公开的话，会报错，如下所示

2、util.js的方法被调用时，如果引用require的路径不正确，会报错，如下所示