微信小程序常用配置

微信小程序 request.js 封装请求

请求参数options

根据我们的业务需求，设置以下参数，其他参数可按项目业务需求添加。

• url 请求url
• method 请求方式，默认GET
• data 请求数据
• timeout 请求最长时间(ms)，默认20000，即20s
• needLogin 是否需要登录，默认为true，需要登录并且未登录状态直接跳转到登录页面
• showLoading 是否展示loading，默认为true

export default function createRequest(options){
    // util/request.js
    return new Promise((resolve,reject) => {
        const token = wx.getStorageSync('token')
        // 未登录状态，跳转到登录页面
        if (options.needLogin !== false && !token) {
        wx.showToast({
            title: '请先登录',
            icon: 'none'
        })
        setTimeout(() => {
            wx.redirectTo({
            url: '/pages/login/index',
            })
        }, 1000);
        return
    }
    // 构建请求url
    // 这里暂时配置本地环境域名
    // 等我们把环境配置讲了，再进一步优化
    const baseUrl = "http://localhost:3000"
    const url = `${baseUrl}${options.url}`
    // 构建请求header，把token放到header
    const header = {
        token
    }
    // 设置showLoading
    // 因为showLoading要配合hideLoading使用，因此需要记录这个变量
    let showLoading = false
    if (options.loading !== false) {
        showLoading = true
        wx.showLoading({
        title: '正在加载',
        mask: true
        })
    }
    // 发送请求
wx.request({
    url,
    method: options.method || 'GET',
    timeout: options.timeout || 20000,
    header,
    data: options.data || {},
    success(res) {
        res = res.data
        switch(res.code) {
          // 请求没问题
          case 0:
            return resolve(res)
          // 异常信息
          case -1:
            wx.showToast({
              title: res.msg,
              icon: 'none'
            })
            break;
          // 登录已失效，需要重新登录
          case 403:
            wx.showToast({
              title: '登录已失效，请重新登录',
              icon: 'none'
            })
            setTimeout(() => {
              wx.redirectTo({
                url: '/pages/login/index',
              })
            }, 1000);
            break;
          // 其他异常
          default:
            wx.showToast({
              title: '服务开小差啦！',
              icon: 'none'
            })
            break
        }
    },
    fail(res) {
        wx.showToast({
            title: '服务开小差啦！',
            icon: 'none'
          })
    },
    complete(res) {
      // 如果有loading，就隐藏
      if (showLoading) {
        wx.hideLoading()
      }
    }
  })
  })
}

---

微信小程序设置环境变量

在项目根目录新建config.js文件，用来存放我们的环境变量。以请求的域名baseUrl为例，配置不同环境的域名。

这里我们只配置两个环境，

• 开发环境develop

• 生产环境production

let env = "develop"

// 防止我们在上传代码的时候，没有将env改成production
const envVersion = wx.getAccountInfoSync().miniProgram.envVersion
if (envVersion === "release" && env !== "production") {
  env = "production"
}

export default {
  // 当前环境
  env,
  // 请求接口域名
  baseUrl: {
    develop: 'http://localhost:3000', 
    production: 'http://api.xxx.com',
  },
}

这个文件导出一个配置对象，env变量是当前的环境，baseUrl是网络请求域名，已每个环境作为key，分别配置参数。

为了防止我们在上传代码的时候，没有将env改成production，我们可以这样解决这个问题。

通过wx.getAccountInfoSync()获取当前小程序环境，如果是release并且env=develop，那我们就设置env为production

微信小程序有三个版本，具体如下：

develop	开发版，扫码预览二维码进去就是开发版
trial	体验版，上传代码后设置为体验版
release	正式版，上传代码-提交审核-发布，正式版小程序生效

获取环境变量

我们在app.js的App实例化对象中新建一个getConfig方法

import localConfigs from "./config"

App({
  // 获取配置
  getConfig(key = "") {
    // 不指定key，返回全部
    if (key === "") {
      return localConfigs
    }
    // 不存在配置
    if (!localConfigs[key]) {
      console.warn(`${key} config is no exist`)
      return undefined
    }
    // 配置是否区分环境
    if (typeof localConfigs[key] === "object" && typeof localConfigs[key] !== null) {
      // 获取当前环境类型
      const env = this.getConfig("env")
      return localConfigs[key][env]
    }
    return localConfigs[key]
  }
})

首先导入我们的配置文件，然后判断是否存在，之后判断是否是一个对象，是的话就返回当前环境的变量。

使用案例

util/request.js中，我们要获取baseUrl环境变量。

// 获取app对象
const app = getApp()

const baseUrl = app.getConfig("baseUrl")

---

提取身份证信息

• 参数

  • idCard: 身份证号码
  • separator: 出生年月日的分割字符，默认为 /

• 返回值

  • age: 年龄（实岁）
  • birthday: 出生年月日
  • gender: 性别（0 女 1 男）

function getIdCardInfo(idCard, separator = '/') {
  if (
    !/^[1-9]\d{5}(?:18|19|20)\d{2}(?:0[1-9]|10|11|12)(?:0[1-9]|[1-2]\d|30|31)\d{3}[\dXx]$/.test(
      idCard
    )
  ) {
    throw Error(`${idCard}不是一个身份证号码`)
  }
  // 提取 idCard 中的字符
  const idSubstr = (s, e) => idCard.substr(s, e)
  // 拼接日期
  const splice = (d) => d.join(separator)
  // 获取出生年月日 性别（0 女 1 男）
  let birthday, gender
  if (idCard.length === 18) {
    birthday = splice([idSubstr(6, 4), idSubstr(10, 2), idSubstr(12, 2)])
    gender = idSubstr(-2, 1) & 1
  } else {
    birthday = splice(idSubstr(6, 2), idSubstr(8, 2), idSubstr(10, 2))
    gender = idSubstr(-1, 1) & 1
  }
  // 获取年龄（实岁）
  const birthDate = new Date(birthday)
  const newDate = new Date()
  const year = newDate.getFullYear()
  let age = year - birthDate.getFullYear()
  if (newDate < new Date(splice([year, birthday.substring(5)]))) {
    age--
  }
  return {
    age,
    birthday,
    gender
  }
}