1.首页

轮播图

大菜单

公告

本周上新

商品分类

商品列表

2.分类

左右分类布局

3.我的

头像

购物订单/置换服务

经销服务

用户服务

源码下载

以上就是功能点分析，下面看效果图：

官方截图：

3.项目目录结构

home：首页

my：我的

product：商品详情（未实现）

每个页面都分为四个文件：

index.js js脚本文件，方法、参数都在这里，与vue一个样。。。

index.json 声明组件，也类似vue组件一样，可以自己写的页面定义为一个组件（共用的意思）

index.wxml 可以理解为和普通的html一样，div换成view

index.wxss 就是css文件

app.json 小程序根目录下的 app.json 文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。

app.json：

{
  "pages": [
    "pages/home/index",
    "pages/my/index",
    "pages/product/index"
  ],
  "window": {
    "backgroundColor": "#F6F6F6",
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#F6F6F6",
    "navigationBarTitleText": "唯聚时代",
    "navigationBarTextStyle": "black"
  },
  "tabBar": {
    "selectedColor": "#ff6700",
    "borderStyle": "black",
    "list": [
      {
        "pagePath": "pages/home/index",
        "text": "首页",
        "iconPath": "images/home.png",
        "selectedIconPath": "images/home_active.png"
      },
      {
        "pagePath": "pages/my/index",
        "text": "我的",
        "iconPath": "images/my.png",
        "selectedIconPath": "images/my_active.png"
      }
    ]

  },
  "sitemapLocation": "sitemap.json",
  "style": "v2"
}

首页代码长成这样：

<!--index.wxml-->
<view class="container">
  <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
    <block wx:for="{{imgUrls}}" wx:key="item">
      <swiper-item>
        <image src="{{item}}" class="slide-image" bindtap="productDetail"/>
      </swiper-item>
    </block>
  </swiper>
  <view class="box-top">
    <view style="display: flex;white-space: nowrap;">
      <view style="text-align: center;margin-left: 10px;">
        <view class="img-box">
          <image src="../../images/gift.png"></image>
        </view>
        <view class="img-box-text">
        用户中心
        </view>
      </view>
      <view style="text-align: center;margin-left: 10px;">
        <view class="img-box">
          <image src="../../images/gift.png"></image>
        </view>
        <view class="img-box-text">
        换包教程
        </view>
      </view>
      <view style="text-align: center;margin-left: 10px;">
        <view class="img-box">
          <image src="../../images/gift.png"></image>
        </view>
        <view class="img-box-text">
        专卖店
        </view>
      </view>
      <view style="text-align: center;margin-left: 10px;">
        <view class="img-box">
          <image src="../../images/gift.png"></image>
        </view>
        <view class="img-box-text">
        唯聚女鞋
        </view>
      </view>
      <view style="text-align: center;margin-left: 10px;margin-right: 10px;">
        <view class="img-box">
          <image src="../../images/gift.png"></image>
        </view>
        <view class="img-box-text">
        每日签到
        </view>
      </view>
    </view>
    <view class="tip-line"></view>
  </view>

  <view class="adv-img">
    <image src="../../images/adv.jpg" bindtap="productDetail"></image>
  </view>

  <view class="news-box">
    <view class="news-title">
      唯聚头条
    </view>
    <view class="laba">
      <image src="../../images/laba.png"></image>
    </view>
  </view>

  <view class="big-title">
    <view class="big-title-left">本周上新</view>
    <view class="big-title-right">周周上新 引领潮流风尚</view>
  </view>

  <view class="product-container">
    <view class="product-row" wx:for="{{productsOfWeek}}" wx:key="item" wx:for-item="item">
      <view class="week-product-box product-box-margin" wx:for="{{item}}" wx:key="name" wx:for-item="product" wx:for-index='index' bindtap="productDetail">
      <view class="week-product-img">
        <image src="{{product.imgPath}}"></image>
      </view>
      <view class="product-title">
        {{product.name}}
      </view>
      <span class="product-des">
        {{product.des}}
      </span>
    </view>
    </view>
  </view>

  <view class="type-out-box">
    <view class="type-in-box">
      <view wx:for="{{types}}" wx:key="name" wx:for-item="item" wx:for-index='index' class="type-box">
        <view class="type-zh">
          {{item.name}}
        </view>
        <view class="type-en {{index == 0?'type-active':''}}">
          {{item.en}}
        </view>
      </view>
    </view>
  </view>

  <view class="adv-img-two">
    <image src="../../images/adv2.jpg" bindtap="productDetail"></image>
  </view>

  <view class="product-container">
    <view class="product-row" wx:for="{{products}}" wx:key="item" wx:for-item="item">
      <view class="product-box product-box-margin" wx:for="{{item}}" wx:key="name" wx:for-item="product" wx:for-index='index' bindtap="productDetail">
      <view class="product-img">
        <image src="{{product.imgPath}}"></image>
      </view>
      <view class="product-title">
        {{product.name}}
      </view>
      <span class="product-des">
        {{product.des}}
      </span>
    </view>
    </view>
  </view>

</view>

4.题外话

微信做的东西一个字：非常棒。微信追求的东西都是极简和用户体验的，所以小程序也不例外，小程序提供了很多api、ui等，真的好用，而且简洁，只要你会写vue、html、css、js这些，那么你也会写小程序

框架

小程序开发框架的目标是通过尽可能简单、高效的方式让开发者可以在微信中开发具有原生 APP 体验的服务。

整个小程序框架系统分为两部分：逻辑层（App Service）和 视图层（View）。小程序提供了自己的视图层描述语言 WXML 和 WXSS，以及基于 JavaScript 的逻辑层框架，并在视图层与逻辑层间提供了数据传输和事件系统，让开发者能够专注于数据与逻辑。

响应的数据绑定

框架的核心是一个响应的数据绑定系统，可以让数据与视图非常简单地保持同步。当做数据修改的时候，只需要在逻辑层修改数据，视图层就会做相应的更新。

微信小程序官方文档：微信开放文档

5.源码下载

原文链接：https://blog.csdn.net/lucky_fang/article/details/124949289