小程序前端开发基础框架,可直接用于开发
项目介绍
对于微信小程序开发,一直想开源一个可以直接拿来使用的开源框架,这样可以方便大家在此基础上可以迭代开发,简化了写样式,发起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
锄头够硬,没有挖不倒的墙。