分析一个项目（微信小程序篇）二

目录

首页：

发现：

购物车：

我的：

分析一个项目讲究的是如何进行对项目的解析分解，进一步了解项目的整体结构，熟悉项目的结构，能够知道每个组件所处在哪个位置，发挥什么作用。

接下来我们进一步分析本次项目：

各个页面的分布情况：

首页：

<!--pages/index/index.wxml-->
<page id="page">
  <t-nav-bar title="首页" visible="{{false}}" background="#FFF" btn-color="{{nav_bar_btn_color}}" text-color="#333" />
  <t-search-bar placeholder="搜索商城内所有商品" is-border="{{false}}" fixed></t-search-bar>
  <view class="bg-white pl-20 pr-20">
    <t-swiper list="{{swiperList}}" bind:click="handleSwiperClick" border-radius="10rpx" shape="square" height="230rpx" active-color="{{sub_color}}"></t-swiper>
    <t-menu list="{{menuList}}" bind:click="handleMenuClick"></t-menu>
  </view>
  <view class="p-20">
    <view class="flex justify-between flex-wrap">
      <goods url="{{item.url}}" name="{{item.name}}" price="¥{{item.price}}" wx:for="{{goodsList}}" wx:key="unique" data-url="/pagesGoods/detail/index" bindtap="routeToNext"></goods>
    </view>
  </view>
</page>

其页面如下： 

  •  搜索框使用了 “t-search-bar”组件
  • 轮播图方面使用了“t-swiper”组件
  • 菜单方面使用了“t-menu”组件
  • 商品方面使用了分包中 data-url="/pagesGoods/detail/index" ，点击事件进行跳转

分类页面：

<!--pages/classify/index.wxml-->
<page id="page">
  <view class="header">
    <t-nav-bar title="分类" visible="{{false}}" background="#FFF" btn-color="{{nav_bar_btn_color}}" text-color="#333" />
    <t-search-bar placeholder="搜索商城内所有商品" is-border="{{false}}"></t-search-bar>
  </view>
  <t-tabs direction="vertical" offset="{{offset}}" current="{{current}}" color="{{main_color}}" bindchange="handleChange">
    <t-tab key="{{item.key}}" wx:for="{{tabList}}" title="{{item.name}}" wx:key="unique"></t-tab>
    <view class="p-10" slot="content">
      <view class="bg-white p-20 border-radius">
        <view>
          <view class="classify-title">精品茶具</view>
          <view class="flex flex-wrap">
            <view class="classify-cell" wx:for="{{list}}" wx:key="unique">
              <t-image src="{{item.url}}" t-class="classify-image"></t-image>
              <view class="classify-name">{{item.name}}</view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </t-tabs>
</page>

其页面如下：

  •  搜索框使用了“t-search-bar”组件
  • 侧边框使用了“t-tab”组件

发现：

<!--pages/discover/index.wxml-->
<page id="page">
  <t-nav-bar title="发现" visible="{{false}}" background="#FFF" btn-color="{{nav_bar_btn_color}}" text-color="#333" />
  <t-search-bar placeholder="搜索文章" is-border="{{false}}"></t-search-bar>
  <t-tabs current="{{ current }}" color="{{main_color}}" bindchange="handleChange">
    <t-tab key="{{item.key}}" wx:for="{{tabList}}" title="{{item.name}}" wx:key="unique"></t-tab>
  </t-tabs>
  <view class="p-20">
    <paging page-count="{{1}}" emptyText="暂无找到相关文章" emptyImage="/images/common/empty_discover.png">
      <view>
        <t-cell t-class='border-radius-t pt-20 pb-20'>
          <t-image class="discover-avatar" t-class="discover-avatar" slot="icon" src="/images/common/logo.png"></t-image>
          <view class="flex align-center justify-between" slot='content'>
            <view class='flex align-center'>
              <view class="text-gray text-df ellipsis">
                甑选商城
              </view>
            </view>
            <view class="text-sm text-gray">68 浏览</view>
          </view>
        </t-cell>
        <view class="bg-white pl-20 pr-20 pt-10 pb-20 border-radius-b">
          <view class="text-df text-black">品茶，品的是茶味还是人生</view>
          <view class="discover-content">
            <view class="discover-desc">茶，只是一杯茶，晨起日落，生命有它陪伴不曾离开，不可或缺。</view>
            <t-image class="discover-image" src="{{images.goods1}}"></t-image>
          </view>
        </view>
      </view>
    </paging>
  </view>
</page>

其页面如下：

  •  搜索框使用了“t-search-bar”组件
  • tab框使用了“t-tab”组件
  • 内容部分使用了“t-cell”组件，“t-image”组件

购物车：

<!--pages/shopping-cart/index.wxml-->
<page id="page">
  <t-nav-bar title="购物车" visible="{{false}}" background="#FFF" btn-color="{{nav_bar_btn_color}}" text-color="#333" />
  <paging page-count="{{3}}" top="{{0}}" emptyText="购物车还是空的" emptyImage="/images/common/empty_shopping_cart.png">
    <view class="mt-20">
      <t-cell wx:for="{{shoppingCartList}}" wx:key="unique">
        <view slot='icon' class="flex align-center">
          <view class="pl-5 pr-5">
            <radio color="{{main_color}}" checked='{{item.checked}}' data-index="{{index}}" catchtap="radioChange"></radio>
          </view>
          <t-image class="shopping-cart-image" src="{{item.url}}"></t-image>
        </view>
        <view class="shopping-cart-content flex flex-direction justify-between ml-10" slot='content'>
          <view>
            <view class='flex align-center cell text-lg ellipsis-l2'>{{item.name}}</view>
            <view class='flex align-center cell text-sm'>{{item.spec}}</view>
          </view>
          <view class='shopping-cart-price flex justify-between text-lg'>
            <text class="text-red">￥{{item.price}}</text>
            <view>
              <t-input-number visible custom-color='{{main_color}}' data-index="{{index}}" value='{{item.num}}' min="0" max="1000" bindchange="bindInputNumber" inputType='number'></t-input-number>
            </view>
          </view>
        </view>
      </t-cell>
    </view>
    <t-submit-bar t-class='button-submit' text='去结算(1)' bgcolor='{{main_color}}' z-index='9999' border bind:submit='confirm'>
      <view slot='left' class="flex align-center text-df">
        <radio color="{{main_color}}" checked='{{item.checked}}' catchtap="checkAll"></radio>
        <view class="ml-20 mr-20">全选</view>
        <view class="flex align-center">
          <text>合计：</text>
          <text class="text-red text-lg">¥198.00</text>
        </view>
      </view>
    </t-submit-bar>
  </paging>
</page>

其页面如下：

内容部分使用了“t-cell”组件，“t-input-number”组件

我的：

<!--pages/mine/index.wxml-->
<page id="page">
	<t-nav-bar title="我的" visible="{{false}}" background="{{main_color}}" btn-color="{{nav_bar_btn_color}}" text-color="{{nav_bar_text_color}}" />
	<view class="mine-wrap">
		<view class="mine__bg" style="background-color:{{main_color}};background-image: url('/images/mine/header.png');">
			<view class="mine__info">
				<image class="mine__bg--avatar" style="background: {{main_color}}" src="../../images/mine/avatar.png"></image>
				<view class="mine__info--cell" bindtap="{{userInfo.userId?'':'routeToLogin'}}">
					<view class="mine__info--name">{{userInfo.userId?userInfo.nickname:'立即登录'}}</view>
					<view class="mine__info--desc">{{userInfo.userId?today:'登录体验完整功能'}}</view>
				</view>
			</view>
		</view>
		<view class="mine__cell-wrap">
			<view class="mine__order mine__cell border-radius">
				<view class="flex justify-between align-center pl-30 pr-30 pt-20 pb-20 border-b">
					<view class="text-lg">我的订单</view>
					<view class="text-sm text-gray border border-radius pl-10 pr-10 pt-5 pb-5">查看全部</view>
				</view>
				<view class="flex justify-around pt-30 pb-30">
					<view class="flex flex-direction align-center">
						<view class="text-xl mb-5">100</view>
						<view class="text-sm text-gray">待付款</view>
					</view>
					<view class="flex flex-direction align-center">
						<view class="text-xl mb-5">0</view>
						<view class="text-sm text-gray">待发货</view>
					</view>
					<view class="flex flex-direction align-center">
						<view class="text-xl mb-5">0</view>
						<view class="text-sm text-gray">待收货</view>
					</view>
					<view class="flex flex-direction align-center">
						<view class="text-xl mb-5">0</view>
						<view class="text-sm text-gray">已完成</view>
					</view>
				</view>
			</view>
			<view class="mine__cell mt-20">
				<t-cell open-type="{{item.openType}}" title="{{item.name}}" data-isauth="{{item.isauth}}" data-url="{{item.url}}" bindtap="routeToNext"	t-class="{{index===0?'border-radius-t':(index+1===moduleList.length?'border-radius-b':'')}}" border isLink wx:for="{{moduleList}}" wx:key="unique">
					<iconfont slot="icon" icon="{{item.icon}}" color="{{main_color}}" size="40rpx" />
				</t-cell>
			</view>
			<view class="mine__cell mt-20">
				<t-cell open-type="{{item.openType}}" title="{{item.name}}" data-isauth="{{item.isauth}}" data-url="{{item.url}}" bindtap="routeToNext" t-class="{{index===0?'border-radius-t':(index+1===moduleList.length?'border-radius-b':'')}}" border isLink wx:for="{{moduleExtraList}}" wx:key="unique">
					<iconfont slot="icon" icon="{{item.icon}}" color="{{main_color}}" size="40rpx" />
				</t-cell>
			</view>
		</view>
	</view>
</page>

其页面如下：

  • 内容部分使用了“t-cell”组件

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/305367.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

U盘、硬盘无法打开，修复RAW磁盘或分区，硬盘变成raw格式如何恢复，数据恢复

U盘、硬盘无法打开，修复RAW磁盘或分区，硬盘变成raw格式如何恢复，数据恢复

本文持续更新&#xff0c;针对遇到的数据丢失问题进行详细记录 磁盘变成RAW的可能原因 突然断电或关机文件系统丢失或损坏病毒或恶意软件感染坏扇区磁盘损坏 以下解决方案针对非病毒损坏 通过Windows自带的工具进行恢复&#xff08;CHKDSK命令&#xff09; 1.连接硬盘 2.…
阅读更多...
自动化测试框架搭建（流程详解）

自动化测试框架搭建（流程详解）

说起自动化测试&#xff0c;我想大家都会有个疑问&#xff0c;要不要做自动化测试&#xff1f; 自动化测试给我们带来的收益是否会超出在建设时所投入的成本&#xff0c;这个嘛别说是我&#xff0c;即便是高手也很难回答&#xff0c;自动化测试的初衷是美好的&#xff0c;而测试…
阅读更多...
用PreMaint引领先进的预测性维护

用PreMaint引领先进的预测性维护

在设备维护领域&#xff0c;预测性维护成为一项利用先进技术和巧妙工具的数据驱动战略。这一战略通过条件监控和数据分析&#xff0c;以主动维护的方式识别潜在的设备缺陷&#xff0c;避免问题升级。高效使用PreMaint预测性维护工具可不仅节省时间和成本&#xff0c;更显著提升…
阅读更多...
信息时代的品牌危机与应对之道：迅腾文化的价值“从心所欲不逾矩”

信息时代的品牌危机与应对之道：迅腾文化的价值“从心所欲不逾矩”

在瞬息万变的信息时代&#xff0c;企业品牌面临着时代的危机与挑战。在这个时代&#xff0c;自诩能穿透未来迷雾的先知已然无法满足企业的需求&#xff0c;而居安思危、行死而生的“惶者”才是企业所需要的。迅腾文化正是这样的存在&#xff0c;积极倾听企业&#xff0c;融汇未…
阅读更多...
Linux第22步_安装CH340驱动和串口终端软件MobaXterm

Linux第22步_安装CH340驱动和串口终端软件MobaXterm

开发板输出信息通常是采用串口&#xff0c;而计算机通常是USB接口&#xff0c;为了让他们之间能够交换数据&#xff0c;我们通常采用USB转串口的转换器来实现。目前市场上的串口转换器大多是采用CH340芯片来实现的&#xff0c;因此我们需要在计算中安装一个CH340驱动程序&#…
阅读更多...
LabVIEW在设备状态监测与故障诊断中的应用

LabVIEW在设备状态监测与故障诊断中的应用

在现代工业自动化领域&#xff0c;LabVIEW的系统设计平台在设备状态监测与故障诊断中扮演着举足轻重的角色。通过提供一个可视化和数据流编程语言&#xff0c;LabVIEW大大提升了设备安全监测的效率&#xff0c;减少了系统维护成本&#xff0c;同时增强了设备的可靠性和可维护性…
阅读更多...
时序预测 | Matlab基于灰色隐马尔可夫模型(HMMP-GM11)的时间序列预测

时序预测 | Matlab基于灰色隐马尔可夫模型(HMMP-GM11)的时间序列预测

时序预测 | Matlab基于灰色隐马尔可夫模型(HMMP-GM11)的时间序列预测 目录 时序预测 | Matlab基于灰色隐马尔可夫模型(HMMP-GM11)的时间序列预测预测效果基本介绍程序设计参考资料 预测效果 基本介绍 灰色HMMP-GM11改进模型,通过引入隐马尔可夫模型(HMM)来对原始数据进行状态分…
阅读更多...
QT第二天

QT第二天

使用手动连接&#xff0c;将登录框中的取消按钮使用qt4版本的连接到自定义的槽函数中&#xff0c;在自定义的槽函数中调用关闭函数将登录按钮使用qt5版本的连接到自定义的槽函数中&#xff0c;在槽函数中判断ui界面上输入的账号是否为"admin"&#xff0c;密码是否为&…
阅读更多...
STM32---WWDG（窗口看门狗）超详细

STM32---WWDG（窗口看门狗）超详细

写在前面&#xff1a;上节我们学习了独立看门狗&#xff08;IWDG&#xff09;相关知识&#xff0c;本节我们来学习另外一个看门狗——WWDG窗口看门狗&#xff0c;内容并不难&#xff0c;但是目前这些看门狗的具体内容&#xff0c;还没有得到一个很好的应用&#xff0c;还是先学…
阅读更多...
基于apache的http文件服务配置

基于apache的http文件服务配置

背景&#xff1a; 公司的产品使用的第三方模组可以OTA&#xff0c;厂家提供的是window开启软件&#xff0c;这样就可以在本机做http下载服务器&#xff0c;然后使用端口映射的方式&#xff0c;公开到外网&#xff0c;这样就可以进行4G网络访问内网服务器了。但这个有个弊端&am…
阅读更多...
【前沿技术杂谈：ChatGPT】ChatGPT——热潮背后的反思

【前沿技术杂谈：ChatGPT】ChatGPT——热潮背后的反思

【前沿技术杂谈&#xff1a;ChatGPT】ChatGPT——热潮背后的反思 缘起&#xff1a;无中生有&#xff0c;涅槃重生人工智能技术人工智能的发展史无中生有内容自动生成技术的发展代表企业OpenAI-GPT系列技术的发展历程ChatGPT新特点 热潮&#xff1a;万众瞩目&#xff0c;群雄逐鹿…
阅读更多...
YOLOv5改进 | 主干篇 | EfficientNetV2均衡缩放网络改进特征提取层

YOLOv5改进 | 主干篇 | EfficientNetV2均衡缩放网络改进特征提取层

一、本文介绍 这次给大家带来的改进机制是EfficientNetV2，其在其V1版本通过均衡地缩放网络的深度、宽度和分辨率，以提高卷积神经网络的性能的基础上，又提出了一种改进的渐进式学习方法，通过在训练过程中逐步增加图像尺寸并适应性调整正则化来加快训练速度，同时保持准确性…
阅读更多...
Apollo基础 - Frenet坐标系

Apollo基础 - Frenet坐标系

Frenet与笛卡尔坐标系的转换详细推导见&#xff1a;b站老王 自动驾驶决策规划学习记录&#xff08;四&#xff09; Apollo相关代码&#xff1a; modules/common/math/cartesian_frenet_conversion.h #pragma once #include <array> #include "modules/common/mat…
阅读更多...
2024年，前端必会的console骚操作

2024年，前端必会的console骚操作

调试。程序员们努力地避免的东西,只为在代码中制造更多的错误。 编写无错误的代码是即使是最好的程序员也会觉得难以实现的。这就是为什么你应该总是调试代码。 而调试JavaScript代码的最好方法之一就是了不起的console.log()。除此之外,还有更好的方法。 这也正是本文的重点…
阅读更多...
网络多线程开发小项目--QQ登陆聊天功能（用户登陆功能实现）

网络多线程开发小项目--QQ登陆聊天功能（用户登陆功能实现）

9.1.1用户登陆功能实现 1、需求分析 2、代码实现 2.1、Client和Server端共有类 1&#xff09;cn.com.agree.qqcommon.Message package cn.com.agree.qqcommon;import lombok.Data; import lombok.extern.slf4j.Slf4j;import java.io.Serializable; Slf4j Data public class M…
阅读更多...
python 基础笔记

python 基础笔记

基本数据类型 函数 lamda 匿名函数 成员方法 类 类与对象 构造方法 魔术方法 私有成员 私有方法 继承 注解 变量注解 函数注解 Union类型 多态 参考链接&#xff1a;黑马程序员python教程&#xff0c;8天python从入门到精通&#xff0c;学python看这套就够了_哔哩哔哩_bilib…
阅读更多...
PTA✨C语言 求1到N的和

PTA✨C语言 求1到N的和

7-6 求1到N的和 分数 15 全屏浏览题目 切换布局 作者 颜晖 单位 浙大城市学院 本题要求编写程序&#xff0c;计算序列 1 2 3 ... 的前N项之和。 输入格式: 输入在一行中给出一个正整数N。 输出格式: 在一行中按照“sum S”的格式输出部分和的值S&#xff0c;请注意…
阅读更多...
HttpClient调用外部接口业务别忘了超时配置！公司工具类打包好啦

HttpClient调用外部接口业务别忘了超时配置！公司工具类打包好啦

前言 在工作中&#xff0c;往往会遇到需要对接外部接口的业务需求&#xff0c;根据接口文档确定请求IP以及相关的参数数据需求后&#xff0c;通过HttpClient进行第三方外部接口的调用。在这种业务中&#xff0c;也要考虑好请求超时导致的接口报错的处理。为什么呢&#xff1f;就…
阅读更多...
Python教程37：使用turtle画一个戴帽子的皮卡丘

Python教程37：使用turtle画一个戴帽子的皮卡丘

---------------turtle源码集合--------------- Python教程36&#xff1a;海龟画图turtle写春联 Python源码35&#xff1a;海龟画图turtle画中国结 Python源码31&#xff1a;海龟画图turtle画七道彩虹 Python源码30&#xff1a;海龟画图turtle画紫色的小熊 Python源码29&a…
阅读更多...
在Ubuntu中检查内存的五个命令，总有一种适合你

在Ubuntu中检查内存的五个命令，总有一种适合你

序言 作为Ubuntu用户，尤其是管理员，我们需要检查系统使用了多少内存资源，以及有多少是可用的。我们还知道，大多数管理任务最好从Linux命令行完成，而不是从图形用户界面完成。例如，服务器通常在shell上工作，没有图形用户界面。由于控制服务器上的内存资源是最重要的，因…
阅读更多...
最新文章

Copyright @ 2022~2023