微信小程序：搭建小程序环境

主要步骤：

1、store.js（储存信息）
2、router.js（路由相关配置、页面跳转）
3、request.js（网络相关配置）

1、store.js配置

在util下创建store.js
代码如下

/ 存储数据，获取uid等
module.exports = {
    // 设置数据
    setItem(key, value, set_name) {
        if (set_name) {
            let set_name_info = this.setItem(set_name);
            set_name_info[key] = value;
            wx.setStorageSync(set_name, set_name_info);
        } else {
            wx.setStorageSync(key, value)
        }
    },
    // 获取数据
    getItem(key, set_name) {
        if (set_name) {
            let val = this.getItem(set_name);
            if (val) return val[key];
            return "";
        } else {
            return wx.getStorageSync(key)
        }
    },
    // 删除数据
    clear(key) {
        key ? wx.removeStorageSync(key) : wx.clearStorageSync()
    },
    // 获取相关设备信息
    getSystemInfo() {
        return wx.getSystemInfoSync();
    }
}

2、router.js配置

在util下创建router.js；
代码如下：

// 路由配置
// 映射
const routerPath = {
    "index": "/pages/index/index", //首页
    "my": "/pages/my/my", //我的
    "login": "/pages/login/login", //登录
};
module.exports = {
    push(path, option = {}) {
        if (typeof path === "string") {
            option.path = path;
        } else {
            option = path;
        }
        //获取url
        let url = routerPath[option.path];
        //openType跳转类型
        let { query = {}, openType } = option;
        let params = this.parse(query);
        if (params) {
            url += "?" + params;
        }
        this.to(openType, url);
    },
    to(openType, url) {
        let obj = { url } //{ url: "..."}
        if (openType === "redirect") {
            wx.redirectTo(obj);
        } else if (openType === "relaunch") {
            wx.reLaunch(obj);
        } else if (openType === "back") {
            wx.navigateBack({
                delta: 1,
            })
        } else if (openType === "switchTab") {
            wx.switchTab(obj)
        } else {
            wx.navigateTo(obj)
        }
    },
    parse(data) {
        let arr = [];
        for (let key in data) {
            arr.push(key + '=' + data[key]);
        }
        return arr.join("&")
    }
}

3、request.js配置

（1）在http文件夹（pages同级）下创建request.js
代码如下：

// 网络请求
//获取数据状态：loading、toast
// 请求头处理（机型、大小、系统、屏幕......）
let store = require("../utils/store.js")
let system = store.getSystemInfo()
const clienInfo = {
    "clientType": "mp",
    "appnm": "myapplet",
    "model": system.model,
    "os": system.system,
    "screen": system.screenWidth + "*" + system.screenHeight,
    "version": App.version,
    "chennel": "miniprogram"
}
module.exports = {
    fetch: (url, data = {}, option = {}) => {
        let { loading = true, toast = true, method = 'get' } = option
        return new Promise((resolve, reject) => {
            if (loading) {
                wx.showLoading({
                    title: '努力加载中...',
                    mask: true
                })
            }
            let env = App.config.baseApi;
            wx.request({
                url: env + url,
                data,
                method,
                header: {
                    "clienInfo": JSON.stringify(clienInfo),
                },
                success: function(result) {
                    let res = result.data
                    if (res.code == 200 || res.code == 10000) {
                        if (loading) {
                            wx.hideLoading();
                        }
                        resolve(res);
                    } else {
                        if (toast) {
                            wx.showToast({
                                mask: true,
                                title: res.msg,
                                icon: 'none',
                                duration: 2000
                            })
                        } else {
                            wx.hideLoading();
                        }
                        resolve(res);
                    }
                },
                fail: function(e = { code: -1, msg: errMsg, errMeg }) {
                    let msg = e.errMsg;
                    if (msg == "request: fail timeout") {
                        msg = '请求超时，请稍后处理';
                    }
                    wx.showToast({
                        title: msg,
                        icon: "none"
                    })
                    rejects(e)
                }
            })
        })
    },
}

（2）在http文件夹下创建api.js
代码如下：

module.exports = {
    getUserId: "/index/index/appletsLogin", //登录接口
}

4、app.js引入

//app.js
let Api = require("./http/api");
let request = require("./http/request");
let config = require("./env/index.js");
let router = require("./utils/router.js");
let env = "Dev";
App.version = "1.4.2";
App.config = config[env];

App({
    config: config[env], 
    Api,
    router,
    get: request.fetch,
    post: (url, data, option) => {
        option.method = "post";
        return request.fetch(url, data, option);
    },
    onLaunch: function() {

    },
});

5、静态页面应用

在需要的xx.js页面中引入

const app = getApp()
let store = require("../../utils/store.js")
let router = require("../../utils/router.js")
let Api = app.Api

（1）储存信息

store.setItem("uid", this.data.uid) //储存信息
store.getItem("uid") //获取信息

（2）request.js引用

getUser() {//方法名
        var that = this
        app.postToken(Api.getUserId, { //请求接口
            id: store.getItem("uid"),
            type: 3
        }, {}).then(res => {
            if (res.code == 200) {
                that.setData({
                    name: res.data.name,
                })
            }

        })
    },

（3）页面跳转

router.push("index")     //不带参数（“index”路由映射）
router.push({path:'index',query:{id: 1, name: '54xiaojuan'}})    //带参数

emmm 大概这样吧（欢迎大家相互讨论，一起进步！！！）