目录
小程序是一个易上手的东西, 对于新手来说,多看官方文档,可以初步做出比较完整的小程序,正是因为简单上手,功能实现简单,小程序是越来越火,商业价值也越来越大。本文我们将教大家一种微信小程序-仿盒马鲜生。
项目初览
项目功能
小程序设计过程
1.项目工具和文档
2.项目开发
3.项目发布
部分功能解析
1.首页轮播图
2.分类商品管理
3.购物车操作
4.weui框架引入
总结
项目地址:
个人简介
首页 微信小程序 小程序开发 微信小程序-仿盒马鲜生

微信小程序-仿盒马鲜生

Dec 05, 2017 pm 04:39 PM
小程序 程序

小程序是一个易上手的东西, 对于新手来说,多看官方文档,可以初步做出比较完整的小程序,正是因为简单上手,功能实现简单,小程序是越来越火,商业价值也越来越大。本文我们将教大家一种微信小程序-仿盒马鲜生。

项目初览

盒马鲜生是阿里巴巴对线下超市完全重构的新零售业态,热度十分。

微信小程序-仿盒马鲜生

微信小程序-仿盒马鲜生

微信小程序-仿盒马鲜生

微信小程序-仿盒马鲜生
微信小程序-仿盒马鲜生

项目功能

* 用户信息注册
* 首页几个轮播和界面交互
* 分类商品管理购买
* 购物车界面交互及其操作
* 个人信息界面
登录后复制
登录后复制

小程序设计过程

小程序是一个易上手的东西, 对于新手来说,多看官方文档,可以初步做出比较完整的小程序,正是因为简单上手,功能实现简单,小程序是越来越火,商业价值也越来越大。

1.项目工具和文档

  1. 微信web开发者工具:微信小程序官网  这是个比较好用的编辑器,对于小程序编辑很方便。

  2. 开发文档:微信小程序宝典秘籍 通过这个查找微信小程序的API,组件,框架等等。

  3. 图标库: Iconfont-阿里巴巴矢量图标库 这个可以找到自己想要的几乎所有的小图标,十分方便。

  4. Easy Mork: easy-mock 用于后台的模拟,得到JSON数据;

  5. weui框架引入, 例如个人信息界面,用weui可以很快很方便的做

2.项目开发

微信小程序开发和传统的H5开发还是有些不同的, 容易踩坑。
小程序是基于MVVM的的框架,合理利用数据绑定实现界面的更新是很关键的
开发时不要一股脑的写写写,多看看文档,你会发现你不小心原生写了个组件。。

3.项目发布

进入开发平台,注册项目信息->在编辑器中上传版本->在开发版本中选择提交审核->审核通过->项目上线

部分功能解析

先看看我的项目目录

    "pages": [
     "pages/index/index",  //主界面
      "pages/person/person", //个人界面
     "pages/classify/classify", //分类商品界面
     "pages/class/myFruits/myFruits", //水果商店
     "pages/class/myMeat/myMeat", //肉类食品商店
     "pages/myCart/myCart"    //购物车
     ],
登录后复制
登录后复制

1.首页轮播图

轮播有几种形式, 比如常见的横向海报图片展示, 还有横纵向商品列表展示,头条信息框轮换
siwper组件很好的实现了横向海报图片展示,比如

        <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
            <block wx:for="{{imgUrls}}" wx:key="index">
                <swiper-item>
                    <image src="{{item}}" class="slide-image"  />
                </swiper-item>
            </block>
        </swiper>
登录后复制
登录后复制

然而横向滑动需要注意些别的细节  
首先要给swiper组件加上scroll-x-="true"  
然后给轮播的子元素父容器设置display: inline-block; white-space: nowrap;

头条信息框转换采用上下轮换, 使用scroll-view嵌套swiper完成

    <scroll-view scroll-y-="true"  >
                <swiper autoplay="{{autoplay}}" interval="{{interval1}}" duration="{{duration}}" vertical="true">
                    <block wx:for="{{something}}" wx:key="index">
                         //内容 
                    </block>
                </swiper>
    </scroll-view>
登录后复制
登录后复制

2.分类商品管理

首先在index界面通过onLoad生命周期函数 ,
通过easy-moc获取后台数据,将必要的信息送给全局的globalData

wx.request({
      url: 'http://www.easy-mock.com/mock/5a1ffb42583969285ab22bb7/orderOnline/orderOnline',
      complete: res => {
        this.globalData.classifyList = res.data;
      },
    })
登录后复制
登录后复制

对于数据处理,需要理清哪些是全局信息, 哪些是局部信息
比如所有商品的信息,购物车里的商品,就得放到全局中 ,而有些比如当前界面的状态,一般放到当前界面的Data里面保存

而有些个人信息,比如出生年月,账号信息   则可以通过wx.setStorage 和wx.getStorage放入本地存储

3.购物车操作

购物车中的操作无非是些加加减减,需要自己不断调试,找出哪里不合常理
通过view,button里的bindtap等操作,实现对商品信息的修改,购物车状态的处理

举个例子  减少购物车中的商品的数量操作

reduceItems: function (e) {
    let carts = app.globalData.carts;    //获取购物车的信息
    let classifyList = app.globalData.classifyList;  //获取商品的信息
    for (let key of carts) {                        //遍历购物车数组
      if (key.id === e.target.dataset.id) {         //通过WXML中 view里面的bind-id传过来的参数进行查找
        key.cartSelected = true;
        if (key.num === 1) {                  //如果数量为1还要减
          key.num--;
          key.cartSelected = false;           //购物车不选中
          key.selected = false;               //商品中不选中
          app.globalData.carts = carts.filter((item) => {    //进行购物车中商品剔除
            return item.id != e.target.dataset.id;
          })
        } else {
          key.num--;
        }
      }
    }
    let num = 0;                                 //实时更新购物车小计界面显示
    let totalPrice = 0;
    for (let key of carts) {
      if (key.cartSelected) {
        num += key.num;
        totalPrice += key.num * key.price;
      }
    }
    this.setData({                          //通过setData进行当前页面Data数据管理
      cart: app.globalData.carts,
      cartTotal: num,
      cartTotalPrice: totalPrice,
    })
  },
登录后复制
登录后复制

4.weui框架引入

在全局CSS样式中 添加的CSS适配于所有的页面,由此可以引入weui ,做一些界面真的很方便

@import './styles/weui.wxss';
登录后复制
登录后复制

总结

  1. 微信小程序的组件,API很强大,需要不断的探索,不断的学习,多看文档

  2. 善于利用有效资源, 比如iconfont  esay-moc weui等

  3. 切页面要细心,善于利用弹性布局等布局方法,小程序的rpx确实很好用

  4. 不要一股脑的写代码, 当函数具有复用性,应该抽象出来,封装好,这样代码才易于维护,易读

项目地址:

https://github.com/fishman17/...   内含详细注释

个人简介

github : https://github.com/fishman17
邮箱 : 734583898@qq.com

最后 如果您喜欢这个项目的话,给个star哦 谢谢!


项目初览

仿造盒马鲜生,实现了部分功能。


盒马鲜生是阿里巴巴对线下超市完全重构的新零售业态,热度十分

微信小程序-仿盒马鲜生

微信小程序-仿盒马鲜生

微信小程序-仿盒马鲜生

微信小程序-仿盒马鲜生
微信小程序-仿盒马鲜生

项目功能

* 用户信息注册
* 首页几个轮播和界面交互
* 分类商品管理购买
* 购物车界面交互及其操作
* 个人信息界面
登录后复制
登录后复制

小程序设计过程

小程序是一个易上手的东西, 对于新手来说,多看官方文档,可以初步做出比较完整的小程序,正是因为简单上手,功能实现简单,小程序是越来越火,商业价值也越来越大。

1.项目工具和文档

  1. 微信web开发者工具:微信小程序官网  这是个比较好用的编辑器,对于小程序编辑很方便。

  2. 开发文档:微信小程序宝典秘籍 通过这个查找微信小程序的API,组件,框架等等。

  3. 图标库: Iconfont-阿里巴巴矢量图标库 这个可以找到自己想要的几乎所有的小图标,十分方便。

  4. Easy Mork: easy-mock 用于后台的模拟,得到JSON数据;

  5. weui框架引入, 例如个人信息界面,用weui可以很快很方便的做

2.项目开发

微信小程序开发和传统的H5开发还是有些不同的, 容易踩坑。
小程序是基于MVVM的的框架,合理利用数据绑定实现界面的更新是很关键的
开发时不要一股脑的写写写,多看看文档,你会发现你不小心原生写了个组件。。

3.项目发布

进入开发平台,注册项目信息->在编辑器中上传版本->在开发版本中选择提交审核->审核通过->项目上线

部分功能解析

先看看我的项目目录

    "pages": [
     "pages/index/index",  //主界面
      "pages/person/person", //个人界面
     "pages/classify/classify", //分类商品界面
     "pages/class/myFruits/myFruits", //水果商店
     "pages/class/myMeat/myMeat", //肉类食品商店
     "pages/myCart/myCart"    //购物车
     ],
登录后复制
登录后复制

1.首页轮播图

轮播有几种形式, 比如常见的横向海报图片展示, 还有横纵向商品列表展示,头条信息框轮换
siwper组件很好的实现了横向海报图片展示,比如

        <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
            <block wx:for="{{imgUrls}}" wx:key="index">
                <swiper-item>
                    <image src="{{item}}" class="slide-image"  />
                </swiper-item>
            </block>
        </swiper>
登录后复制
登录后复制

然而横向滑动需要注意些别的细节  
首先要给swiper组件加上scroll-x-="true"  
然后给轮播的子元素父容器设置display: inline-block; white-space: nowrap;

头条信息框转换采用上下轮换, 使用scroll-view嵌套swiper完成

    <scroll-view scroll-y-="true"  >
                <swiper autoplay="{{autoplay}}" interval="{{interval1}}" duration="{{duration}}" vertical="true">
                    <block wx:for="{{something}}" wx:key="index">
                         //内容 
                    </block>
                </swiper>
    </scroll-view>
登录后复制
登录后复制

2.分类商品管理

首先在index界面通过onLoad生命周期函数 ,
通过easy-moc获取后台数据,将必要的信息送给全局的globalData

wx.request({
      url: 'http://www.easy-mock.com/mock/5a1ffb42583969285ab22bb7/orderOnline/orderOnline',
      complete: res => {
        this.globalData.classifyList = res.data;
      },
    })
登录后复制
登录后复制

对于数据处理,需要理清哪些是全局信息, 哪些是局部信息
比如所有商品的信息,购物车里的商品,就得放到全局中 ,而有些比如当前界面的状态,一般放到当前界面的Data里面保存

而有些个人信息,比如出生年月,账号信息   则可以通过wx.setStorage 和wx.getStorage放入本地存储

3.购物车操作

购物车中的操作无非是些加加减减,需要自己不断调试,找出哪里不合常理
通过view,button里的bindtap等操作,实现对商品信息的修改,购物车状态的处理

举个例子  减少购物车中的商品的数量操作

reduceItems: function (e) {
    let carts = app.globalData.carts;    //获取购物车的信息
    let classifyList = app.globalData.classifyList;  //获取商品的信息
    for (let key of carts) {                        //遍历购物车数组
      if (key.id === e.target.dataset.id) {         //通过WXML中 view里面的bind-id传过来的参数进行查找
        key.cartSelected = true;
        if (key.num === 1) {                  //如果数量为1还要减
          key.num--;
          key.cartSelected = false;           //购物车不选中
          key.selected = false;               //商品中不选中
          app.globalData.carts = carts.filter((item) => {    //进行购物车中商品剔除
            return item.id != e.target.dataset.id;
          })
        } else {
          key.num--;
        }
      }
    }
    let num = 0;                                 //实时更新购物车小计界面显示
    let totalPrice = 0;
    for (let key of carts) {
      if (key.cartSelected) {
        num += key.num;
        totalPrice += key.num * key.price;
      }
    }
    this.setData({                          //通过setData进行当前页面Data数据管理
      cart: app.globalData.carts,
      cartTotal: num,
      cartTotalPrice: totalPrice,
    })
  },
登录后复制
登录后复制

4.weui框架引入

在全局CSS样式中 添加的CSS适配于所有的页面,由此可以引入weui ,做一些界面真的很方便

@import './styles/weui.wxss';
登录后复制
登录后复制

总结

  1. 微信小程序的组件,API很强大,需要不断的探索,不断的学习,多看文档

  2. 善于利用有效资源, 比如iconfont  esay-moc weui等

  3. 切页面要细心,善于利用弹性布局等布局方法,小程序的rpx确实很好用

  4. 不要一股脑的写代码, 当函数具有复用性,应该抽象出来,封装好,这样代码才易于维护,易读。

以上内容就是仿盒马鲜生微信小程序,希望能帮助到大家。

相关推荐:

微信小程序开发入门实例

微信小程序视频,音乐,图片组件详解

微信小程序如何实现获取微信运动步数的案例(图)

以上是微信小程序-仿盒马鲜生 的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

如何在iPhone中使Google地图成为默认地图 如何在iPhone中使Google地图成为默认地图 Apr 17, 2024 pm 07:34 PM

iPhone上的默认地图是Apple专有的地理位置提供商“地图”。尽管地图越来越好,但它在美国以外的地区运行不佳。与谷歌地图相比,它没有什么可提供的。在本文中,我们讨论了使用Google地图成为iPhone上的默认地图的可行性步骤。如何在iPhone中使Google地图成为默认地图将Google地图设置为手机上的默认地图应用程序比您想象的要容易。请按照以下步骤操作–先决条件步骤–您必须在手机上安装Gmail。步骤1–打开AppStore。步骤2–搜索“Gmail”。步骤3–点击Gmail应用旁

如何通过C++编写一个简单的倒计时程序? 如何通过C++编写一个简单的倒计时程序? Nov 03, 2023 pm 01:39 PM

C++是一种广泛使用的编程语言,在编写倒计时程序方面非常方便和实用。倒计时程序是一种常见的应用,它能为我们提供非常精确的时间计算和倒计时功能。本文将介绍如何使用C++编写一个简单的倒计时程序。实现倒计时程序的关键就是使用计时器来计算时间的流逝。在C++中,我们可以使用time.h头文件中的函数来实现计时器的功能。下面是一个简单的倒计时程序的代码

iPhone中缺少时钟应用程序:如何修复 iPhone中缺少时钟应用程序:如何修复 May 03, 2024 pm 09:19 PM

您的手机中缺少时钟应用程序吗?日期和时间仍将显示在iPhone的状态栏上。但是,如果没有时钟应用程序,您将无法使用世界时钟、秒表、闹钟等多项功能。因此,修复时钟应用程序的缺失应该是您的待办事项列表的首位。这些解决方案可以帮助您解决此问题。修复1–放置时钟应用程序如果您错误地从主屏幕中删除了时钟应用程序,您可以将时钟应用程序放回原位。步骤1–解锁iPhone并开始向左侧滑动,直到到达“应用程序库”页面。步骤2–接下来,在搜索框中搜索“时钟”。步骤3–当您在搜索结果中看到下方的“时钟”时,请按住它并

如何使用任务计划程序打开网站 如何使用任务计划程序打开网站 Oct 02, 2023 pm 11:13 PM

您是否每天在大约相同的时间频繁访问同一网站?这可能会导致花费大量时间打开多个浏览器选项卡,并在执行日常任务时使浏览器充满混乱。好吧,打开它而不必手动启动浏览器怎么样?这非常简单,不需要您下载任何第三方应用程序,如下所示。如何设置任务计划程序以打开网站?按键,在搜索框中键入任务计划程序,然后单击打开。Windows在右侧边栏上,单击“创建基本任务”选项。在名称字段中,输入要打开的网站的名称,然后单击下一步。接下来,在触发器下,单击时间频率并点击下一步。选择您希望活动重复多长时间并点击下一步。选择启

无法允许访问 iPhone 中的摄像头和麦克风 无法允许访问 iPhone 中的摄像头和麦克风 Apr 23, 2024 am 11:13 AM

您在尝试使用应用程序时是否收到“无法允许访问摄像头和麦克风”?通常,您可以在需要提供的基础上向特定对象授予摄像头和麦克风权限。但是,如果您拒绝权限,摄像头和麦克风将无法工作,而是显示此错误消息。解决这个问题是非常基本的,你可以在一两分钟内完成。修复1–提供相机、麦克风权限您可以直接在设置中提供必要的摄像头和麦克风权限。步骤1–转到“设置”选项卡。步骤2–打开“隐私与安全”面板。步骤3–在那里打开“相机”权限。步骤4–在里面,您将找到已请求手机相机权限的应用程序列表。步骤5–打开指定应用的“相机”

iOS 17:如何在'信息”中组织iMessage应用程序 iOS 17:如何在'信息”中组织iMessage应用程序 Sep 18, 2023 pm 05:25 PM

在iOS17中,苹果不仅增加了几个新的消息功能,而且还调整了消息应用程序的设计,使其外观更干净。现在,所有iMessage应用程序和工具(如相机和照片选项)都可以通过点击键盘上方和文本输入字段左侧的“+”按钮来访问。点击“+”按钮会弹出一个菜单列,该列具有默认的选项顺序。从顶部开始,有相机,照片,贴纸,现金(如果可用),音频和位置。最底部是一个“更多”按钮,点击该按钮时会显示任何其他已安装的消息应用程序(您也可以向上滑动以显示此隐藏列表)。如何重新组织您的iMessage应用程序您可以通过以下方

C语言中的身份矩阵程序 C语言中的身份矩阵程序 Aug 30, 2023 am 10:45 AM

给定一个方阵M[r][c],其中“r”是一定数量的行,“c”是列,使得r=c,我们必须检查“M”是否是单位矩阵。恒等矩阵恒等矩阵也称为大小为nxn方阵的单位矩阵,其中对角元素的整数值为1,非对角元素的整数值为0就像下面给定的示例-$$I1=\begin{bmatrix}1\end{bmatrix},\I2=\begin{bmatrix}1&0\0&1\end{bmatrix},\I3=\begin{bmatrix}1&0&0\0&1&0\0&amp

实现微信小程序中的卡片翻转特效 实现微信小程序中的卡片翻转特效 Nov 21, 2023 am 10:55 AM

实现微信小程序中的卡片翻转特效在微信小程序中,实现卡片翻转特效是一种常见的动画效果,可以提升用户体验和界面交互的吸引力。下面将具体介绍如何在微信小程序中实现卡片翻转的特效,并提供相关代码示例。首先,需要在小程序的页面布局文件中定义两个卡片元素,一个用于显示正面内容,一个用于显示背面内容,具体示例代码如下:&lt;!--index.wxml--&gt;&l

See all articles