各平台小程序( uni-app也适用 )项目搭建
适用范围
uni-app, 微信、支付宝、钉钉等平台小程序搭建项目
项目结构搭建
一个好的项目结构有利于多人协作开发、后期维护、代码复用等众多优点
基础项目结构如下
api ( 存放项目所用 api 接口 )
components ( 存放项目组件，组件区分模块，利于管理 )
config ( 存放项目配置，将请求配置文件统一管理 )
assets ( 也可用 static 命名，用于存放项目静态资源，如 image，style，iconfont 等 )
pages ( 存放项目页面文件 )
utils ( 存放项目公用(常用)方法 )
( 其他自定义文件夹，或平台文件 )
基础项目结构图
api 接口统一封装 ( 以微信 wx.request 为例, 仅供参考 )
- 定义 user.js (区分模块)
// api/user.js
import http from "./request";
export const login = (data) => {
return http("/login", "post", data, {});
};
- 定义 config 的 baseURL
// config/index.js
export default {
baseURL: "https://127.0.0.1",
};
- request 的 Promise 封装
// api/request
import config from "/config/index.js";
const { baseURL } = config;
const METHOD = {
GET: "GET",
POST: "POST",
PUT: "PUT",
DELETE: "DELETE",
};
export default (url, method, data = {}, header = {}) => {
return new Promise((resolve, reject) => {
wx.request({
url: `${baseURL}${url}`,
data: data,
method: method || METHOD.GET,
header: {
"content-type": "application/json",
...header,
},
success(res) {
// 自行增加,修改状态判断逻辑
if (res.statusCode === 200) {
resolve(res.data);
} else {
reject(res.data);
}
},
fial(error) {
reject(error);
},
});
});
};
- api 调用 (登陆)
// app.js
import { login } from "./api/user.js";
App({
getLogin() {
return new Promise((resolve, reject) => {
wx.login({
success: (res) => {
login({
code: res.code,
}).then((cb) => {
resolve(cb);
});
},
});
});
},
});
Powered by Waline v2.15.8