1. Toy模板网首页
  2. > Toy博客

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

8月前 作者：前端VC 分类：Toy博客 阅读(26) 违法举报

这篇具有很好参考价值的文章主要介绍了分析一个项目（微信小程序篇）二。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

目录

首页：

发现：

购物车：

我的：

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

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

各个页面的分布情况：

首页：

<!--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>

其页面如下： 

分析一个项目（微信小程序篇）二,解析项目,微信小程序,windows,前端

  •  搜索框使用了 “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>

其页面如下：

分析一个项目（微信小程序篇）二,解析项目,微信小程序,windows,前端

  •  搜索框使用了“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>

其页面如下：

分析一个项目（微信小程序篇）二,解析项目,微信小程序,windows,前端

  •  搜索框使用了“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>

其页面如下：

分析一个项目（微信小程序篇）二,解析项目,微信小程序,windows,前端

内容部分使用了“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>

其页面如下：

分析一个项目（微信小程序篇）二,解析项目,微信小程序,windows,前端文章来源地址https://www.toymoban.com/news/detail-777669.html

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

到了这里，关于分析一个项目（微信小程序篇）二的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序篇3 谈谈如何提高小程序的应用速度

    小程序在首次启动前，微信会在小程序启动前为小程序准备好通用的运行环境，如运行中的线程和一些基础库的初始化。在进入启动状态时，微信需要完成几项工作：下载小程序代码包、加载小程序代码包、初始化（渲染）小程序首页。所以，我们可以从加载、渲染两个维度

    2024年02月10日
    浏览(29)
  • 【微信小程序开发】微信小程序集成腾讯位置项目配置

    【微信小程序开发】微信小程序集成腾讯位置项目配置

    腾讯位置服务官网 当然没账号的要先注册一个账号 在我的应用里创建一个新的应用，印象中需要小程序ID，去微信开发者工具里面找到自己的小程序ID填入即可 添加 key 中勾选勾选 WebServiceAPI 从官网里下载，我这里下载的是 v1.2 打开微信开发者工具 在查找小程序ID的地方下滑

    2024年02月02日
    浏览(45)
  • 微信小程序开发教程：项目一微信小程序入门 课后习题

    微信小程序开发教程：项目一微信小程序入门 课后习题

    《微信小程序开发教程》主编/黄寿孟 易芳 陶延涛 湖南大学出版社 目录 一、单选题 二、多选题 三、判断题 四、填空题 五、简答题 1.请简述微信开发者工具中调试器功能。 2.请简述微信小程序开发环境的搭建过程。 六、编程题 1.请创建一个空白项目，在页面中输出Hello W

    2024年02月11日
    浏览(33)

  • 微信小程序开发15 项目实战 基于云开发开发一个在线商城小程序

    在学完前 4 个模块之后，我相信你会对微信小程序的开发有一个全新的认识。在前面 3 个模块中，俊鹏分别从微信小程序内在的运行原理，小程序工程化开发以及具体实践层面，深度讲解了微信小程序开发所必要的知识和能力。而第 4 个模块里，我带你认识了微信小程序的云

    2024年02月11日
    浏览(35)
  • 基于微信小程序平台实现二手物品交易小程序设计【附项目源码】

    基于微信小程序平台实现二手物品交易小程序设计【附项目源码】

    基于微信小程序平台实现二手物品交易小程序设计演示 随着二手物品交易市场的不断扩大，越来越多的人开始寻找更加便捷、高效的交易方式。基于微信小程序平台实现的二手物品交易系统便应运而生，为人们提供了一个方便快捷的交易平台。 平台概述 该交易系统基于微信

    2024年02月09日
    浏览(45)
  • uniapp-微信小程序篇

    uniapp-微信小程序篇

    一、创建项目(以Vue3+TS 项目为示例) 可以通过命令行的方式创建也可以通过HBuilderX进行创建（通过HBuilderX创建的项目建议选择最简单的模板），个人建议使用命令行方式。 (1) 命令行方式： 如下载失败：可以直接去gitee官网下载 (2) HBuilderX 创建 通过HBuilderX没有默认的Vue3+Ts模板

    2024年02月12日
    浏览(30)

  • 【微信小程序篇】-请求封装

    最近自己在尝试使用AIGC写一个小程序，页面、样式、包括交互函数AIGC都能够帮我完成(不过这里有一点问题AIGC的上下文关联性还是有限制，会经常出现对于需求理解跑偏情况，需要不断的重复强调，并纠正错误，才能得到你想要的内容)。 因为最近某些原因，所处的环境网络

    2024年02月13日
    浏览(24)

  • 【微信小程序篇】- 多环境（版本）配置

    最近自己在尝试使用AIGC写一个小程序，页面、样式、包括交互函数AIGC都能够帮我完成(不过这里有一点问题AIGC的上下文关联性还是有限制，会经常出现对于需求理解跑偏情况，需要不断的重复强调，并纠正错误，才能得到你想要的内容)。 因为最近某些原因，所处的环境网络

    2024年02月11日
    浏览(25)
  • 【前端高频面试题--微信小程序篇】

    【前端高频面试题--微信小程序篇】

    🚀 作者 ：“码上有前” 🚀 文章简介 ：前端高频面试题 🚀 欢迎小伙伴们 点赞👍、收藏⭐、留言💬 【前端高频面试题–HTML篇】 【前端高频面试题–CSS上篇】 【前端高频面试题–CSS下篇】 【前端高频面试题–JS上篇】 【前端高频面试题–JS下篇】 【前端高频面试题–

    2024年02月20日
    浏览(25)
  • 微信小程序篇之与vue有何不同

    微信小程序篇之与vue有何不同

    大家好！又怀着兴奋的心情去学习了微信小程序，框架这个东西嘛，随着时代的新潮一波又一波的到来，一波又一波的被冲走。为什么要拿vue与小程序开发做对比呢？ 这是因为我相信大家不会在没有学习到vue之前就把小程序给学习了，哈哈哈。这篇文章最好给已经接触过别的

    2024年02月09日
    浏览(31)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包