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

目录

首页：

发现：

购物车：

我的：

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

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

各个页面的分布情况：

首页：

<!--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”组件

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

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

多符号表达式的共同子表达式提取教程

多符号表达式的共同子表达式提取教程

生成的符号表达式&#xff0c;可能会存在过于冗长的问题&#xff0c;且多个符号表达式中&#xff0c;有可能存在相同的计算部分&#xff0c;如果不进行处理&#xff0c;计算过程中会导致某些算式计算多次&#xff0c;从而影响计算效率。 那么多个符号表达式生成函数时&#xf…
阅读更多...
回合制游戏的战斗设计（一）

回合制游戏的战斗设计（一）

阅读更多...
echarts坐标轴文字样式

echarts坐标轴文字样式

https://echarts.apache.org/zh/option.html#xAxis.nameTextStyle xAxis. nameTextStyle、 yAxis: {type: value,// max: -0.15,name: 沉降累计值/mm,nameTextStyle: {padding: [0, 0, 0, 10],color: #93B8E2,fontSize: 12,fontFamily: Alibaba-PuHuiTi-R},splitLine: {show:…
阅读更多...
如何将mp3转m4a？3种方法帮你轻松转换

如何将mp3转m4a？3种方法帮你轻松转换

如何将mp3转m4a&#xff1f;在日常生活中&#xff0c;将MP3转换为M4A格式可以带来很多便利。M4A是苹果设备常用的音频格式&#xff0c;转换后可以方便地在iPhone、iPad等设备上播放。此外&#xff0c;M4A的音质通常优于MP3&#xff0c;提供更清晰、更丰富的声音。通过使用音频转…
阅读更多...
进京证12次不够用怎么办？（北京进京证探头分布，进京证365，进京365）外地车在京如何行驶——躲猫猫外地车在京地图导航

进京证12次不够用怎么办？（北京进京证探头分布，进京证365，进京365）外地车在京如何行驶——躲猫猫外地车在京地图导航

其实想要在北京驾驶外地牌照的车辆主要有两种方式&#xff0c;一种是办理进京证(六环内进京证一年只能办12次&#xff0c;一次有效期7天&#xff0c;所以大多数人是不够用的);另一种就是在非监控区域行驶&#xff0c;可以借助于一些摄像头定位工具&#xff0c;有效躲避摄像头&a…
阅读更多...
VirtualBox：安装提示缺少python core和win32 api

VirtualBox：安装提示缺少python core和win32 api

最近升级了Ubuntu22.04&#xff0c;查了一下&#xff0c;VirtualBox的增强功能&#xff0c;居然用时5分钟。 5min 18ms vboxadd.service 据说升级VirtualBox的增强功能能解决这个问题&#xff0c;于是先升级VirtualBox&#xff0c;但是安装VirtualBox却报缺少python core及win3…
阅读更多...
AHK学习，诡异的早起，舒畅地打篮球——2024 第4周总结

AHK学习，诡异的早起，舒畅地打篮球——2024 第4周总结

活神仙 引言颓 周六周日理清当前老问题新问题 总结当前之前的老问题 学习的AHKAHK历程AHK作用和适合人群 我帮别人解决的AHK例子我自用的AKH功能结尾 引言 今天才写周总结 是因为这两天有点颓 颓在哪里呢&#xff1f; 请听我细细说来 水文 技术有 AHK的&#xff0c;不想看可以…
阅读更多...
前端性能优化——图片压缩和懒加载

前端性能优化——图片压缩和懒加载

图片压缩 使用第三方工具手动压缩图片使用Webpack工具在打包时自动压缩图片 这里主要介绍第二种方法。 &#xff08;1&#xff09;将小于某个大小的图片转化成 data URI 形式&#xff08;Base64 格式&#xff09;&#xff0c;减少请求数量&#xff0c;但是体积变得更大 modu…
阅读更多...
IDEA 构建开发环境

IDEA 构建开发环境

本博客主要讲解了如何创建一个Maven构建Java项目。&#xff08;本文是创建一个用Maven构建项目的方式&#xff0c;所以需要对Maven有一定的了解&#xff09; IDEA 构建开发环境 一、创建一个空工程二、构建一个普通的Maven模块 一、创建一个空工程 创建一个空的工程 * 设置整…
阅读更多...
C++多线程1(复习向笔记)

C++多线程1(复习向笔记)

创建线程以及相关函数 当用thread类创建线程对象绑定函数后&#xff0c;该线程在主线程执行时就已经自动开始执行了,join起到阻塞主线程的作用 #include <iostream> #include <thread> #include <string> using namespace std; //测试函数 void printStrin…
阅读更多...
进阶-宏观.总体（二）失业、利率，税收、物价、供给侧政策、汇率

进阶-宏观.总体（二）失业、利率，税收、物价、供给侧政策、汇率

32&#xff0e;经济的跷跷板之一&#xff1a;成长与失业 失业是任何一个社会都会发生的现象。从某个观点来说&#xff0c;一定程度内的失业是正常的&#xff0c;也应是社会中被允许发生的现象&#xff1b;它是社会中正常的新陈代谢&#xff0c;也可能是社会进步的必然。 分析四…
阅读更多...
《HTML 简易速速上手小册》第6章：HTML 语义与结构（2024 最新版）

《HTML 简易速速上手小册》第6章：HTML 语义与结构（2024 最新版）

文章目录 6.1 语义化标签的重要性6.1.1 基础知识6.1.2 案例 1&#xff1a;使用 <article>, <section>, <aside>, <header>, 和 <footer>6.1.3 案例 2&#xff1a;构建带有嵌套语义化标签的新闻网站6.1.4 案例 3&#xff1a;创建一个带有 <mai…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023