項目介紹

對於微信小程序開發，一直想開源一個可以直接拿來使用的開源框架，這樣可以方便大家在此基礎上可以叠代開發，簡化了寫樣式，發起Http請求以及和簡化調用微信接口的麻煩，其中對於樣式采用了WeUI,HTTP的請求使用ES6的Promise對象分裝，可以直接使用。

項目的目錄結構

這裏主要介紹幾個文件：
utils/apiUtil.js存放所有的接口地址，host是域名信息

let host = "localhost:15572"
let config = {
    host,
    // 登錄地址，用於建立會話
    getSessionKey: `http://${host}/api/WxMini/GetSessionKey`,
}
module.exports = config
 

utils/httpUtil.js分裝了Post,Get成Promise對象返回，前端可以直接調用

import Promise from "../plugin/promise"

let wxPromisify = fn => {
    return function (obj = {}) {
        return new Promise((resolve, reject) => {
            obj.success = function (res) {
                resolve(res)
            }
            obj.fail = function (res) {
                reject(res)
            }
           
            fn(obj)
        })
    }
}
//無論promise對象最後狀態如何都會執行
Promise.prototype.finally = callback => {
    let P = this.constructor;
    return this.then(
        value => P.resolve(callback()).then(() => value),
        reason => P.resolve(callback()).then(() => { throw reason })
    );
}

/**
 * 微信請求get方法
 * url
 * data 以對象的格式傳入
 */
let getRequest = (url, data) => {
    var getRequest = wxPromisify(wx.request)
    return getRequest({
        url: url,
        method: 'GET',
        data: data,
        header: {
            'Cookie':  wx.getStorageSync("sessionid")
        }
    })
}

/**
 * 微信請求post方法封裝
 * url
 * data 以對象的格式傳入
 */
let postRequest = (url, data) => {
    var postRequest = wxPromisify(wx.request)
    return postRequest({
        url: url,
        method: 'POST',
        data: data,
        header: {
            'Cookie': wx.getStorageSync("sessionid")
        }
    })
}

module.exports = {
    postRequest: postRequest,
    getRequest: getRequest
}
 

調用方式

util文件的內容就到這裏，然後介紹一下src目錄的文件夾層次結構：

樣式如下：

最後開源地址：miniBasic

小程序前端開發基礎框架，可直接用於開發