封装、暴露方法供全局使用

export暴露封装的方法、import引用封装的方法

一般我们会创建一个文件夹，里面放封装的方法，简化代码（比如封装一下请求API、时间格式化函数等）

微信小程序的请求API封装可以看下这篇博客：微信小程序-封装请求API_五速无头怪的博客-CSDN博客https://blog.csdn.net/black_cat7/article/details/120451986

---

在最外层目录下创建一个utils文件夹 ，以util.js文件为例

你可以直接声明一个函数，然后当场用export 把它暴露出去

export const requestPayment = (pay) => {
  return new Promise((resolve, reject) => {
    wx.requestPayment({
      ...pay,
      success: (result) => {
        resolve(result)
      },
      fail: (err) => {
        reject(err);
      }
    });

  })
}

那么，用这种直接暴露出去的格式，在要引用的地方，就只能用这种方法引入

import { requestPayment } from '../../utils/util'

---

你也可以声明一个函数，但是不立刻暴露，而是在最后统一成一个对象再暴露出去

// 将wx.login方法封装成promise类型
const cjLogin = () => {
  return new Promise((resolve, reject) => {
    wx.login({
      timeout: 10000,
      success: (result) => {
        resolve(result);
      },
      fail: (err) => {
        reject(err);
      }
    });
  })
}


const formatNumber = (n) => {
  n = n.toString();
  return n[1] ? n : `0${n}`;
};


// 暴露方法出去
module.exports = {
  formatNumber,
  cjLogin
};

此时，你可以在要引用的页面中使用两种方式来引入这个文件

import { cjLogin } from '../../utils/util'

然后在需要用到的地方直接使用cjLogin({xxxx}).then(..)

import myUtils from '../../utils/util'

然后使用  myUtils.cjLogin({xxxx}).then(..)使用
相当于将整个util.js文件作为一个对象 myUtils  引入，然后使用对象中方法

---

注意：

如果在util.js文件中使用两种格式来暴露方法，也是可以的，就是在引用的时候，单独暴露的只能用第一种方法引入，而无法通过 【 myUtils.方法名 】来获取和使用

1.export与export default均可用于导出常量、函数、文件、模块等
2.在一个文件或模块中，export、import可以有多个，export default仅有一个
3.通过export方式导出，在导入时要加{ }，export default则不需要

4. 

        (1) 输出单个值，使用export default

        (2) 输出多个值，使用export

  (3) export default与普通的export不要同时使用

        使用export default时，对应的import语句不需要使用大括号；不使用export default时，对应的import语句需要使用大括号。

   export default命令用于指定模块的默认输出。显然，一个模块只能有一个默认输出，因此export default命令只能使用一次。所以，import命令后面才不用加大括号，因为只可能唯一对应export default命令。

疑惑：​​​​​​

module.exports 、exports、export、export default的区别 - 云+社区 - 腾讯云 (tencent.com)https://cloud.tencent.com/developer/article/1410703#:~:text=module.exports%E5%92%8Cexports%E6%98%AF%E5%B1%9E%E4%BA%8E%20CommonJS%20%E6%A8%A1%E5%9D%97%E8%A7%84%E8%8C%83%EF%BC%8Cexport%E5%92%8Cexport%20default%E6%98%AF%E5%B1%9E%E4%BA%8EES6%E8%AF%AD%E6%B3%95%E3%80%82%20module.exports%20%E5%92%8C%20exports%20%E5%AF%BC%E5%87%BA%E6%A8%A1%E5%9D%97%EF%BC%8C%E7%94%A8,%E5%BC%95%E5%85%A5%E6%A8%A1%E5%9D%97%E3%80%82%20export%20%E5%92%8C%20export%20default%20%E5%AF%BC%E5%87%BA%E6%A8%A1%E5%9D%97%EF%BC%8C%20import%20%E5%AF%BC%E5%85%A5%E6%A8%A1%E5%9D%97%E3%80%82这篇博客里说，

但是我上面用import也能成功引入并使用，不知道为啥？