微信小程序使用export和import

小程序支持模塊化開發，能夠將一些公共的代碼抽離成爲一個單獨的 js 文件，做爲一個模塊。模塊只有經過 module.exports 或者 exports 才能對外暴露接口。引入模塊經過require方式。

建立模塊

function sayHello(name) {
  console.log(`Hello ${name} !`)
}
function sayGoodbye(name) {
  console.log(`Goodbye ${name} !`)
}

module.exports.sayHello = sayHello
exports.sayGoodbye = sayGoodbye

引入模塊

var common = require('common.js')
Page({
  helloMINA: function() {
    common.sayHello('MINA')
  },
  goodbyeMINA: function() {
    common.sayGoodbye('MINA')
  }
})

這是官方提供的方法，我我的仍是比較喜歡使用export和import，使用起來比較順手，多是由於我一直用Vue開發的緣由，下面拿一個實際例子，講一講export和import。

最近在開發的一個小程序項目，打算使用Promise對API這塊作下封裝，統一管理API請求。

新建request.js，提取公共請求路徑

// 公共路徑
const path = "http://172.16.50.83:82"

定義promise化接口

/**
 * promise化接口
 */
function wxRequest(url, method, params) {
  return new Promise((resolve, reject) => {
    wx.request({
      url: path + url,
      method: method,
      data: params,
      header: {
        'content-type': 'application/json'
      },
      success: res => resolve(res),
      fail: res => reject(res)
    })
  });
}

登陸接口

function login(params = {}) {
  return wxRequest('/wechatuser', 'post', params);
}

導出

// 導出
module.exports = {
  login
}

上面這些代碼都在一個文件中，完整代碼就不展現了。

接下來就是導入新建接口文件，

import {login} from '../../api/request'

調用

login().then(res=>{
  console.log(res)
})

注意一點的是，在引入模塊時，要使用相對路徑，若是使用絕對路徑，在編譯後會致使文件找不到。