2024年【小程序实战系列】电商平台源码及功能实现，2024年最新字节跳动Android架构师学习笔记

本文链接：https://blog.csdn.net/2401_84538884/article/details/138883382

最后

题外话，我在一线互联网企业工作十余年里，指导过不少同行后辈。帮助很多人得到了学习和成长。

我意识到有很多经验和知识值得分享给大家，也可以通过我们的能力和经验解答大家在IT学习中的很多困惑，所以在工作繁忙的情况下还是坚持各种整理和分享。但苦于知识传播途径有限，很多程序员朋友无法获得正确的资料得到学习提升，故此将并将重要的Android进阶资料包括自定义view、性能优化、MVC与MVP与MVVM三大框架的区别、NDK技术、阿里面试题精编汇总、常见源码分析等学习资料。

【Android思维脑图（技能树）】

知识不体系？这里还有整理出来的Android进阶学习的思维脑图，给大家参考一个方向。

Android开发8年，阿里、百度一面惨被吊打！我是否应该转行了？

【Android进阶学习视频】、【全套Android面试秘籍】

希望我能够用我的力量帮助更多迷茫、困惑的朋友们，帮助大家在IT道路上学习和发展

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化学习资料的朋友，可以戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

====================================================================

零售行业模版小程序是个经典的单店版电商小程序，涵盖了电商的黄金链路流程，从商品->购物车->结算->订单等。小程序总共包含 28 个完整的页面，涵盖首页，商品详情页，个人中心，售后流程等基础页面。采用 mock 数据进行展示，提供了完整的零售商品展示、交易与售后流程。页面详情：

模版小程序页面详情

主要页面截图如下：

example-home example-sort example-cart example-user-center example-goods-detail example-pay example-order example-order-detail

二、项目构成

====================================================================

零售行业模版小程序采用基础的 JavaScript + WXSS + ESLint 进行构建，降低了使用门槛。

项目目录结构如下：

在这里插入图片描述


|-- mall-starter

    |-- README.md

    |-- app.js    //JavaScrip文件

    |-- app.json   // 项目配置文件，负责窗口颜色等等

    |-- app.wxss   //类似CSS文件

    |-- components  //  公共组件库

    |-- config  //  基础配置

    |-- custom-tab-bar  //  自定义 tabbar

    |-- model //  mock 数据

    |-- pages

    |   |-- cart  //  购物车相关页面

    |   |-- coupon  //  优惠券相关页面

    |   |-- goods //  商品相关页面

    |   |-- home  //  首页

    |   |-- order //  订单售后相关页面

    |   |-- promotion-detail  //  营销活动页面

    |   |-- usercenter  //  个人中心及收货地址相关页面

    |-- services  //  请求接口

    |-- style //  公共样式与iconfont

    |-- utils //  工具库

三、数据模拟

=====================================================================

零售小程序采用真实的接口数据，模拟后端返回逻辑，在小程序展示完整的购物场景与购物体验逻辑。

四、项目部分源码

======================================================================

4.1、页面路由及tabBar


{

  "pages": [

    "pages/home/home",

    "pages/usercenter/index",

    "pages/usercenter/person-info/index",

    "pages/usercenter/address/list/index",

    "pages/usercenter/address/edit/index",

    "pages/goods/list/index",

    "pages/goods/details/index",

    "pages/goods/category/index",

    "pages/goods/search/index",

    "pages/goods/result/index",

    "pages/cart/index",

    "pages/order/order-confirm/index",

    "pages/order/receipt/index",

    "pages/order/pay-result/index",

    "pages/order/order-list/index",

    "pages/order/order-detail/index",

    "pages/goods/comments/index",

    "pages/order/apply-service/index",

    "pages/order/after-service-list/index",

    "pages/order/after-service-detail/index",

    "pages/goods/comments/create/index",

    "pages/coupon/coupon-list/index",

    "pages/coupon/coupon-detail/index",

    "pages/coupon/coupon-activity-goods/index",

    "pages/promotion-detail/index",

    "pages/order/fill-tracking-no/index",

    "pages/order/delivery-detail/index",

    "pages/order/invoice/index",

    "pages/usercenter/name-edit/index"

  ],

  "tabBar": {

    "custom": true,

    "color": "#666666",

    "selectedColor": "#FF5F15",

    "backgroundColor": "#ffffff",

    "borderStyle": "black",

    "list": [

      {

        "pagePath": "pages/home/home",

        "text": "首页"

      },

      {

        "pagePath": "pages/goods/category/index",

        "text": "分类"

      },

      {

        "pagePath": "pages/cart/index",

        "text": "购物车"

      },

      {

        "pagePath": "pages/usercenter/index",

        "text": "我的"

      }

    ]

  },

  "lazyCodeLoading": "requiredComponents",

  "usingComponents": {},

  "window": {

    "backgroundTextStyle": "light",

    "navigationBarBackgroundColor": "#fff",

    "navigationBarTitleText": "Weixin",

    "navigationBarTextStyle": "black"

  },

  "sitemapLocation": "sitemap.json",

  "permission": {

    "scope.userLocation": {

      "desc": "你的位置信息将用于小程序位置接口的效果展示"

    }

  }

}

4.2、home 首页




// home.js



import { fetchHome } from '../../services/home/home';

import { fetchGoodsList } from '../../services/good/fetchGoods';

import Toast from 'tdesign-miniprogram/toast/index';



Page({

  data: {

    imgSrcs: [],

    tabList: [],

    goodsList: [],

    goodsListLoadStatus: 0,

    pageLoading: false,

    current: 1,

    autoplay: true,

    duration: 500,

    interval: 5000,

    navigation: { type: 'dots' },

  },



  goodListPagination: {

    index: 0,

    num: 20,

  },



  privateData: {

    tabIndex: 0,

  },



  onShow() {

    this.getTabBar().init();

  },



  onLoad() {

    this.init();

  },



  onReachBottom() {

    if (this.data.goodsListLoadStatus === 0) {

      this.loadGoodsList();

    }

  },



  onPullDownRefresh() {

    this.init();

  },



  init() {

    this.loadHomePage();

  },



  loadHomePage() {

    wx.stopPullDownRefresh();



    this.setData({

      pageLoading: true,

    });

    fetchHome().then(({ swiper, tabList }) => {

      this.setData({

        tabList,

        imgSrcs: swiper,

        pageLoading: false,

      });

      this.loadGoodsList(true);

    });

  },



  tabChangeHandle(e) {

    this.privateData.tabIndex = e.detail;

    this.loadGoodsList(true);

  },



  onReTry() {

    this.loadGoodsList();

  },



  async loadGoodsList(fresh = false) {

    if (fresh) {

      wx.pageScrollTo({

        scrollTop: 0,

      });

    }



    this.setData({ goodsListLoadStatus: 1 });



    const pageSize = this.goodListPagination.num;

    let pageIndex =

      this.privateData.tabIndex * pageSize + this.goodListPagination.index + 1;

    if (fresh) {

      pageIndex = 0;

    }



    try {

      const nextList = await fetchGoodsList(pageIndex, pageSize);

      this.setData({

        goodsList: fresh ? nextList : this.data.goodsList.concat(nextList),

        goodsListLoadStatus: 0,

      });



      this.goodListPagination.index = pageIndex;

      this.goodListPagination.num = pageSize;

    } catch (err) {

      this.setData({ goodsListLoadStatus: 3 });

    }

  },



  goodListClickHandle(e) {

    const { index } = e.detail;

    const { spuId } = this.data.goodsList[index];

    wx.navigateTo({

      url: `/pages/goods/details/index?spuId=${spuId}`,

    });

  },



  goodListAddCartHandle() {

    Toast({

      context: this,

      selector: '#t-toast',

      message: '点击加入购物车',

    });

  },



  navToSearchPage() {

    wx.navigateTo({ url: '/pages/goods/search/index' });

  },



  navToActivityDetail({ detail }) {

    const { index: promotionID = 0 } = detail || {};

    wx.navigateTo({

      url: `/pages/promotion-detail/index?promotion_id=${promotionID}`,

    });

  },

});


// home.json

{

  "navigationBarTitleText": "首页",

  "onReachBottomDistance": 10,

  "backgroundTextStyle": "light",

  "enablePullDownRefresh": true,

  "usingComponents": {

    "t-search": "tdesign-miniprogram/search/search",

    "t-loading": "tdesign-miniprogram/loading/loading",

    "t-swiper": "tdesign-miniprogram/swiper/swiper",

    "t-swiper-item": "tdesign-miniprogram/swiper/swiper-item",

    "t-swiper-nav": "tdesign-miniprogram/swiper/swiper-nav",

    "t-image": "/components/webp-image/index",

    "t-icon": "tdesign-miniprogram/icon/icon",

    "t-toast": "tdesign-miniprogram/toast/toast",

    "t-tabs": "tdesign-miniprogram/tabs/tabs",

    "t-tab-panel": "tdesign-miniprogram/tabs/tab-panel",

    "goods-list": "/components/goods-list/index",

    "load-more": "/components/load-more/index"

  }

}




<!-- home.wxml -->

<view style="text-align: center" wx:if="{{pageLoading}}">

	<t-loading


### 最后

光有这些思路和搞懂单个知识的应用是还远远不够的，在Android开源框架设计思想中的知识点还是比较多的，想要搞懂还得学会整理和规划：我们常见的**Android热修复框架、插件化框架、组件化框架、图片加载框架、网络访问框架、RxJava响应式编程框架、IOC依赖注入框架、最近架构组件Jetpack等等Android第三方开源框架，**这些都是属于Android开源框架设计思想的。如下图所示：

![image](https://img-blog.csdnimg.cn/img_convert/45980b5732eec724e8a4f002be4c3787.webp?x-oss-process=image/format,png)

这位阿里P8大佬针对以上知识点，熬夜整理出了一本长达1042页的完整版**如何解读开源框架设计思想**PDF文档，内容详细，把**Android热修复框架、插件化框架、组件化框架、图片加载框架、网络访问框架、RxJava响应式编程框架、IOC依赖注入框架、最近架构组件Jetpack等等Android第三方开源框架**这些知识点**从源码分析到实战应用都讲的简单明了。**

>**由于文档内容过多，篇幅受限，只能截图展示部分**

![image](https://img-blog.csdnimg.cn/img_convert/858a47a8a24abeabf4e0ee9babdd5163.webp?x-oss-process=image/format,png)

![image](https://img-blog.csdnimg.cn/img_convert/b1e6753b55ae49c56a7606d7ae003e25.webp?x-oss-process=image/format,png)

整理不易，觉得有帮助的朋友可以帮忙点赞分享支持一下小编~

你的支持，我的动力；祝各位前程似锦，offer不断！！！



**网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。**

**[需要这份系统化学习资料的朋友，可以戳这里获取](https://bbs.csdn.net/topics/618156601)**

**一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**

存中...(img-MnfR2j4m-1715717963713)]

这位阿里P8大佬针对以上知识点，熬夜整理出了一本长达1042页的完整版**如何解读开源框架设计思想**PDF文档，内容详细，把**Android热修复框架、插件化框架、组件化框架、图片加载框架、网络访问框架、RxJava响应式编程框架、IOC依赖注入框架、最近架构组件Jetpack等等Android第三方开源框架**这些知识点**从源码分析到实战应用都讲的简单明了。**

>**由于文档内容过多，篇幅受限，只能截图展示部分**

[外链图片转存中...(img-83o1K8GT-1715717963713)]

[外链图片转存中...(img-W0AWmube-1715717963714)]

整理不易，觉得有帮助的朋友可以帮忙点赞分享支持一下小编~

你的支持，我的动力；祝各位前程似锦，offer不断！！！



**网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。**

**[需要这份系统化学习资料的朋友，可以戳这里获取](https://bbs.csdn.net/topics/618156601)**

**一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**