「这是我参与2022首次更文挑战的第24天，活动详情查看：2022首次更文挑战」。

QQ图片20220210161634.png

在我们开发小程序的过程中，经常需要封装公共的js，其中几个经常用到的js，有api.js,env.js,port.js,request.js,util.js,common.js,store.js等，本文选择一些公共js我们一起看看吧。

1、api.js

这个js是用来统一管理后台所有接口的，集中一管理，按需引入，不易出现当后台修改接口名时候，需要全局搜索，全局修改名字的情况（导致修改的页面较多）。统一之后有利于做到一处改，处处改，更加节约时间，更加高效。

import {
    baseURL,
} from './env.js'

export const wxLogin = baseURL + '/wxlogin/v1/login'; // 登录
export const registerLogin = baseURL + '/wxlogin/v1/registerLogin'; // 微信注册并登录
export const getPhoneCode = baseURL + '/wxlogin/v1/getPhoneCode'; // 获取验证码
export const phoneLogin = baseURL + '/wxlogin/v1/phoneLogin'; // 手机登录

2、env.js

这个js是用来设置一些常用的环境变量的js，一般我们提交的时候不勾选（前端常常需要连接某位后台的ip，联调，提交会造成代码冲突，其他人可能不需要），作为本地的一个连接后台的api。根据当前的开发环境选择对应的后台地址。

// 根据开发环境配置请求地址
// 获取当前帐号信息
const accountInfo = wx.getAccountInfoSync();
// env类型
const env = accountInfo.miniProgram.envVersion;
const baseApi = {
    // 开发版
    develop: "http://192.168.110.110:8080",
    // 体验版
    trial: "https://baidu.com/api-test",
    // 正式版
    release: "https://baidu.com/api"
};
// request请求baseURL
export const baseURL = baseApi[env] || 'http://192.168.10.58:8086';

3、port.js 在我们开发项目中经常遇到多个页面都需要调用同一个接口的时候，如果在每个页面都写一边逻辑就会很冗余，当后台突然需要修改返回参或者传参的时候，会有很多不必要的劳动力，所以我们可以将一些公共的常用的接口放在这个js中，需要用的页面直接调用，这样当后台修改接口的时候，只需要改一个地方，就可以轻松解决了。

封装学年下拉框

export const portCommon = {
    // 学年下拉
    getGrade(callback) {
        $postParam(getGrade, {}).then(res => {
            if (res && res.length > 0) {
                let index = 0;
                for (let i = 0; i < res.length; i++) {
                    res[i].text = res[i].name;
                    res[i].value = res[i].id;
                    if (res[i].isNowFlag == 1) {
                        index = i;
                    }
                }
                return callback(res, index);
            }
            if (res.length == 0) return;
            callback(res, 0);
        })
    },
}

调用学年下拉接口

getGrade() {
    return new Promise(resolve => {
        let param = {
            isValid: 1,
        }
        portCommon.getGrade((res, index) => {
            this.setData({
                yearList: res,
                year: res && res[index].id
            })
            resolve();
        }, param)
    })
},

4.request.js

封装请求方式，get，post等

5.utils.js

一些常用的工具类，例如，时间转化，数字前面加0等

微信小程序常用api封装