基本架构

项目结构

src

api 定义实现api接口

model.ts 定义接口数据结构

assets 样式及图片资源

components 公共基本部件

pages 页面

Home

Child 本页面用的部件

pipes 自定义过滤器

router 注册的页面路由

store 保存的状态及跨页面传递的数据

utils 辅助方法，http 请求

代码约定

1. 页面及部件文件夹名使用首字母大写的驼峰写法
2. 函数方法名使用驼峰写法
3. 页面及部件全部使用class 类的写法，属性使用驼峰命名
4. 语句结束必须使用;
5. 代码一行不超过120 个字符
6. 对象内部必须使用,结束
7. html 标签class 类名使用 小写加 -
8. css 尽量不使用 !important
9. scss 嵌套层数不超过5层

具体typescript 规范请查看 tslint.json

网络请求

先定义相应数据模型，基本的模型

// 分页数据
export interface IPaging {
    limit: number;
    offset: number;
    total: number;
    more: boolean;
}
// 页面数据
export interface IPage<T> {
    paging: IPaging;
    data: T[];
}
// 全局相应
export interface IBaseResponse {
    appid?: string;
    sign?: string;
    sign_type?: string;
    timestamp?: string;
    encrypt?: string;
    encrypt_type?: string;
}
// 失败响应
export interface IErrorResponse {
    code: number;
    message?: string;
    errors?: any;
    description?: string;
}

export interface IData<T> extends IBaseResponse {
    data?: T[];
}

export interface IDataOne<T> extends IBaseResponse {
    data?: T;
}

接着封装一个http 请求，包括注入appid 及sign，设置请求头，处理一些全局响应包括token 过期

暴露几个常用的请求方式 get post delete 最后返回一个 Promise<T>

具体页面

[√] 首页

[√] 分类页

[√] 搜索页

[√] 商品详情页

[√] 商品评论显示页

[√] 购物车页

[√] 结算页

[√] 支付页

[√] 个人中心页

[√] 浏览记录页

[√] 个人账户页（包含提现、充值弹窗）

[√] 个人账户记录页

[√] 银行卡页

[√] 银行卡绑定页

[√] 发票页

[√] 发票申请页

[√] 发票抬头页

[√] 发票抬头编辑页

[√] 发票记录页

[√] 登录注册页

[√] 订单列表页

[√] 订单详情页

[√] 商品收藏页

[√] 消息页

[√] 账号关联页

[√] 个人信息页

[√] 账户注销页

[√] 登陆设备管理页

[√] 修改密码页

[√] 实名认证页

[√] 收货地址页

[√] 收货地址编辑页

[√] 评论商品页

[√] 发表评论页

[√] 退换货页

[√] 退换货申请页

[√] 文章列表页

[√] 文章分类页

[√] 文章详情页

[√] 推荐页

[√] 推荐规则页

[√] 推荐订单页

[√] 推荐会员页

[√] 推荐二维码页

[√] 优惠券领取页

[√] 我的优惠券页

[√] 签到页

转载请保留原文链接： https://zodream.cn/blog/id/63.html