#小程序云开发挑战赛#-柠檬商城-过于执
发布于 4 年前 作者 juan56 3783 次浏览 来自 分享

介绍

这是一款可以在微信上直接运行的商城。用户在输入用户名、密码成功登录后,即可进入商品页面。单击商品缩略图,就可进入到商品详情页面。在这个页面可以浏览到商品的具体细节,同时也可实现加入购物车的功能。

应用场景

适用于忙碌的上班族或者学生族在闲暇之余可以通过简单的点击小程序浏览商品,并购买,操作轻便简捷,小巧灵活。

目标用户

该项目适用于各个年龄段的不同人群。

实现思路:

数据库

通过Collection.get方法对云数据库的数据进行获取,从而实现及时的获取数据。同时,数据库设计方面做了很多的调整。将统一类型的数据存放在一个一维数组中,从而大大提高了存储空间的利用率。

云函数

云函数的设计,为了在各种情况都能在数据上达到同步,在一定程度上增强了程序的健壮性。同时,也提高了代码的简洁度。

效果截图

功能代码展示

<view class="search" style="background-color:{{color}}" >
  <view class="search_info" bindtap="toSearch">
    <view>
      <input placeholder="请输入您喜欢的商品" placeholder-style="color:white"></input>
    </view>
    <van-icon name="search" style="font-size:50rpx;padding-right:30rpx" />
  </view>
</view>
<swiper autoplay indicator-dots circular>
  <swiper-item wx:for="{{banners}}" wx:key="_id">
    <navigator url="{{item.url}}">
      <image src="{{item.src}}"></image>
    </navigator>
  </swiper-item>
</swiper>
<view class="menu">
  <view class="menuSub" wx:for="{{menu}}" wx:key="_id">
    <image src="{{item.src}}"></image>
    <text>{{item.name}}</text>
  </view>
</view>
<view class="wrap_product">
<view class="product" wx:for="{{products}}" wx:key="_id">
  <navigator url="../detail/detail?id={{item._id}}">
    <image src="{{item.ImageSrc}}"></image>
    <text class="product_name">{{item.name}}</text>
      <view class="info">
      <view class="priceInfo">
      <text>¥{{item.price}}.00</text>
      </view>
      </view>
    </navigator>
      </view>
      </view>
<van-tabbar active="{{ active }}" bind:change="onChange">
  <van-tabbar-item icon="home-o">主页</van-tabbar-item>
  <van-tabbar-item icon="shopping-cart-o" >购物车</van-tabbar-item>
  <van-tabbar-item icon="todo-list-o">订单</van-tabbar-item>
  <van-tabbar-item icon="user-circle-o">我的</van-tabbar-item>
</van-tabbar>
2 回复

看好你哦,参考一下别的商城,努力做得更好

u1s1,这ui真的丑

回到顶部