zoukankan      html  css  js  c++  java
  • 小程序前端开发基础框架,可直接用于开发

    项目介绍

    对于微信小程序开发,一直想开源一个可以直接拿来使用的开源框架,这样可以方便大家在此基础上可以迭代开发,简化了写样式,发起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

  • 相关阅读:
    设置导航条上的主题一颜色
    luogu_2158【题解】欧拉函数
    luogu_1313【题解】二项式定理
    【数论学习笔记】高斯消元
    luogu_2524【题解】康托展开
    luogu_1495【题解】中国剩余定理
    【数论学习笔记】 约数
    luogu_4430 luogu_4981【题解】 Cayley定理
    【数论学习笔记】质数
    【数论学习笔记】同余
  • 原文地址:https://www.cnblogs.com/moyhui/p/8446498.html
Copyright © 2011-2022 走看看