前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >小程序前端开发基础框架,可直接用于开发

小程序前端开发基础框架,可直接用于开发

作者头像
牛嗷嗷
发布2018-03-30 10:36:01
1K0
发布2018-03-30 10:36:01
举报
文章被收录于专栏:微服务微服务

项目介绍

对于微信小程序开发,一直想开源一个可以直接拿来使用的开源框架,这样可以方便大家在此基础上可以迭代开发,简化了写样式,发起Http请求以及和简化调用微信接口的麻烦,其中对于样式采用了WeUI,HTTP的请求使用ES6的Promise对象分装,可以直接使用。

项目的目录结构

这里主要介绍几个文件: utils/apiUtil.js存放所有的接口地址,host是域名信息

代码语言:javascript
复制
let host = "localhost:15572"
let config = {
    host,
    // 登录地址,用于建立会话
    getSessionKey: `http://${host}/api/WxMini/GetSessionKey`,
}
module.exports = config

utils/httpUtil.js分装了Post,Get成Promise对象返回,前端可以直接调用

代码语言:javascript
复制
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

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 项目介绍
相关产品与服务
云开发 CloudBase
云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务,可用于云端一体化开发多种端应用(小程序、公众号、Web 应用等),避免了应用开发过程中繁琐的服务器搭建及运维,开发者可以专注于业务逻辑的实现,开发门槛更低,效率更高。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档