资讯专栏INFORMATION COLUMN

盒马微信小程序

kid143 / 1668人阅读

摘要:功能介绍好奇微信小程序是如何制作的,也对盒马感兴趣,就尝试写了这个盒马小程序。微信的提供了很多样式,只要引入样式库,照着使用文档写,能少很多事。还有就是微信小程序的,里面有很多微信小程序自带的,很方便。

盒马app刚出现,就吸足了眼球。最近看了看盒马界面,很Q,就想着仿照app写个小程序。

功能介绍

好奇微信小程序是如何制作的,也对盒马app感兴趣,就尝试写了这个盒马小程序。实现了app的部分功能,还有部分功能未实现,和大家一起学习?
文章末有GitHub源项目代码地址

已实现的功能

购物车的操作。添加商品、删除商品

新增收货地址

点击二维码图片能扫一扫

图片轮播效果

滚动视图展示商品详情

项目效果图 页面简介

购物车的操作

添加收货地址

部分功能点实现介绍 将商品加入购物车

我使用easymock构建了一些数据,用于商品在列表展示。
这是wxml,用于商品的展示。

</>复制代码

  1. {{item.name}}
  2. ¥{{item.price}}/{{item.unit}}
  3. +

在执行for循环遍历数据内容的时候,为每一个商品添加了index,用于确定用户将哪一件商品加入了购物车。给加号添加了一个绑定事件,用户点击加号,能将该商品放入购物车列表。
js部分代码:
这里最重要的是在app.js中添加了一个全局变量cardList,用于存储用户加入购物车的商品。这样,就能实现多个页面都能对购物车列表的数据进行操作了。

</>复制代码

  1. globalData: {
  2. cardList: []
  3. }

商品展示界面:页面开始加载的时候,就请求数据,用于商品列表的显示。

</>复制代码

  1. wx.request({
  2. url: "https://www.easy-mock.com/mock/5a223b51707056548f086d8b/hema/getGoods",
  3. success: (res) => {
  4. console.log(res.data.data.goods);
  5. this.setData({
  6. goods: res.data.data.goods
  7. })
  8. }
  9. })

用户将商品加入购物车执行的操作

</>复制代码

  1. addInCart: function(e) {
  2. const good = this.data.goods[e.currentTarget.id]; // 根据index,判断用户点击了哪个商品加入购物车
  3. const cart = app.globalData.cardList; // 获取购物车列表
  4. cart.push(good); // 用户选择商品加入购物车后,将该商品加入购物车列表
  5. },
调整商品的购买数量

将商品加入购物车后,还有可能对添加的商品进行加减,调整购买数量。
购物车wxml界面:

</>复制代码

  1. {{item.name}}
  2. ¥{{item.price}}/{{item.unit}}
  3. -
  4. {{item.count}}
  5. +

给加号减号分别添加了点击事件,循环时还要用index标出用户对购物车的哪一件商品进行了加减操作。
js部分:

</>复制代码

  1. onLoad: function (options) {
  2. this.setData({
  3. // 页面加载时就给购物车显示商品数量
  4. goodsList: app.globalData.cardList
  5. });
  6. this.sumMoney();
  7. },
  8. // 增加商品数量
  9. addCount:function (e) {
  10. var that = this;
  11. console.log(e);
  12. const goodId = e.currentTarget.id;
  13. console.log(that.data.goodsList[goodId]);
  14. that.data.goodsList[goodId].count++;
  15. console.log(that.data.goodsList[goodId]);
  16. this.setData({
  17. goodsList: that.data.goodsList
  18. })
  19. this.sumMoney();
  20. },
  21. // 减少商品数量
  22. reduceCount: function(e) {
  23. var that = this;
  24. const goodId = e.currentTarget.id;
  25. // console.log(that.data.goodsList[goodId]);
  26. if(that.data.goodsList[goodId].count <= 1) {
  27. that.data.goodsList[goodId].count = 1;
  28. wx.showModal({
  29. title: "数量小于1",
  30. content: "不允许操作",
  31. duration: 2000
  32. })
  33. } else {
  34. that.data.goodsList[goodId].count--;
  35. }
  36. // console.log(that.data.goodsList[goodId]);
  37. this.setData({
  38. goodsList: that.data.goodsList
  39. })
  40. this.sumMoney();
  41. },
  42. // 计算所有商品的钱数
  43. sumMoney: function() {
  44. var count = 0;
  45. const goods = this.data.goodsList;
  46. console.log(goods);
  47. for(let i = 0; i < goods.length; i++) {
  48. // console.log(goods[i].count);
  49. // console.log(goods[i].price);
  50. count += goods[i].count*goods[i].price;
  51. }
  52. // console.log(count);
  53. this.setData({
  54. sum: count
  55. })
  56. },

这个界面,我不确定获得的数据是什么,就反复测试了多次。

新增默认收货地址

在输入地址的界面,为每一个输入框都添加了监听输入的事件,用于监听用户输入的内容。
例如:

</>复制代码

  1. 收货地址
  2. // 绑定的监听输入框事件 bindinput="getAddress"

我将获得的用户输入的默认地址存储到了storage中。
【划重点:微信小程序的storage存储大小是由限制的,不能将大量数据放在storage中】
js部分:

</>复制代码

  1. // 页面的初始数据,用户输入的收货地址、门牌号、姓名、联系电话
  2. data: {
  3. address: "",
  4. num: "",
  5. name: "",
  6. phone: ""
  7. },
  8. backToChooseAddr: function() {
  9. wx.navigateTo({
  10. url: "../chooseAddress/chooseAddress"
  11. });
  12. },
  13. getAddress: function(e) {
  14. this.setData({
  15. address: e.detail.value
  16. })
  17. },
  18. getNum: function(e) {
  19. this.setData({
  20. num: e.detail.value
  21. })
  22. },
  23. getName: function(e) {
  24. this.setData({
  25. name: e.detail.value
  26. })
  27. },
  28. getPhone: function(e) {
  29. this.setData({
  30. phone: e.detail.value
  31. })
  32. },
  33. // 用户点击保存后,对输入的数据进行存储,并反馈存储状态
  34. saveInfo: function() {
  35. wx.setStorage({
  36. key: "name",
  37. data: [{address:this.data.address}, {num: this.data.num}, {name: this.data.name}, {phone: this.data.phone}],
  38. success: function() {
  39. wx.showToast({
  40. title: "地址保存成功",
  41. icon: "success",
  42. duration: 2000
  43. })
  44. setTimeout(function(){
  45. wx.navigateTo({
  46. url: "../chooseAddress/chooseAddress"
  47. })
  48. },1000);
  49. }
  50. })

用户默认收货地址的显示,就从storage中按照key-value的方式取出用户存在storage中的地址信息。
js部分:

</>复制代码

  1. onShow: function () {
  2. var that = this;
  3. wx.getStorage({
  4. key: "name",
  5. success: function(res) {
  6. console.log(res);
  7. if(res.data.length > 0) {
  8. that.setData({
  9. address: res.data[0].address,
  10. num: res.data[1].num,
  11. name: res.data[2].name,
  12. phone: res.data[3].phone
  13. })
  14. }
  15. }
  16. })
图片轮播和滚动视图部分

图片轮播
给swiper组件添加current="{{activeIndex}}"就能判断当前展示图片的下标,再根据下标该表小圆点的展示状态(给相应的小圆点一个active类,有不同的样式)。小圆点也绑定了点击事件,能根据用户点击不同的小圆点,动态改变图片的展示状态。

</>复制代码

js部分:

</>复制代码

  1. // activeIndex 是当前播放图片的下标
  2. data: {
  3. activeIndex: 0
  4. },
  5. // 点击不同的小圆点切换不同的图片
  6. changeTag: function(e){
  7. var type = e.target.dataset.index;
  8. this.setData({
  9. activeIndex: type
  10. });
  11. },
  12. // 滑动切换图片,获取点击的下标,改变相应小圆点的状态
  13. swiperTab: function(e){
  14. var type = e.detail.current;
  15. this.setData({
  16. activeIndex: type
  17. });
  18. },
遇到的问题

1、在写静态界面的时候,给子元素一个margin值,一直会影响父元素的margin值,纠结了好久才知道这个问题可以用bfc的知识解决。给父元素添加一个overflow: hidden,通过这种方法创建一个bfc,就能避免子元素的margin样式影响到父元素。
2、从后台或者从其他地方获取数据时,很难一眼看出来传值的内容是什么,我就把数据输出到控制台,一点点判断。
3、异步问题。js是异步执行的。比如执行到取数据的时候,程序不会等着取到数据再执行下一步,而是立即执行下一步。这点在输出数据和设置数据时要尤为注意。

收获

写完这些还是收获满满的。
感触最大的就是要善于查文档。微信的weui提供了很多样式,只要引入样式库,照着使用文档写,能少很多事。还有就是微信小程序的api,里面有很多微信小程序自带的api,很方便。
面对bug心理承受也更大了。学会了一些调试技巧。使用easymock构建模拟数据。
对底层的盒子模型、异步等东西有了更深一层的理解。
项目地址:
https://github.com/TeanLee/hema
如果觉得还不错的话,给个小星星start鼓励一下哦
比心

联系方式:

如果有建议,欢迎联系我,一起学习。
wechat: ltt598625763
email: 598625763@qq.com

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/112825.html

相关文章

  • 盒马信小程序

    摘要:功能介绍好奇微信小程序是如何制作的,也对盒马感兴趣,就尝试写了这个盒马小程序。微信的提供了很多样式,只要引入样式库,照着使用文档写,能少很多事。还有就是微信小程序的,里面有很多微信小程序自带的,很方便。 盒马app刚出现,就吸足了眼球。最近看了看盒马界面,很Q,就想着仿照app写个小程序。 功能介绍 好奇微信小程序是如何制作的,也对盒马app感兴趣,就尝试写了这个盒马小程序。实现了ap...

    Julylovin 评论0 收藏0
  • 盒马信小程序

    摘要:功能介绍好奇微信小程序是如何制作的,也对盒马感兴趣,就尝试写了这个盒马小程序。微信的提供了很多样式,只要引入样式库,照着使用文档写,能少很多事。还有就是微信小程序的,里面有很多微信小程序自带的,很方便。 盒马app刚出现,就吸足了眼球。最近看了看盒马界面,很Q,就想着仿照app写个小程序。 功能介绍 好奇微信小程序是如何制作的,也对盒马app感兴趣,就尝试写了这个盒马小程序。实现了ap...

    eccozhou 评论0 收藏0
  • 信小程序资源汇总

    awesome-github-wechat-weapp 是由OpenDigg整理并维护的微信小程序开源项目库集合。我们会定期同步上的项目到这里,也欢迎各位 UI组件开发框架实用库开发工具服务端项目实例Demo UI组件 weui-wxss ★1873 - 同微信原生视觉体验一致的基础样式库zanui-weapp ★794 - 好用易扩展的小程序 UI 库wx-charts ★449 - 微信小程...

    Olivia 评论0 收藏0
  • 为了30分钟配送,盒马工程师都有哪些“神操作”?

    摘要:阿里妹导读提到盒马鲜生,除了新鲜的大龙虾以外,大家印象最深的就是快速配送门店附近公里范围内,分钟送货上门。系统异常业务异常的处理,上线时门店灰度方案一个门店出问题,不影响整个盒马门店,缓存机制柔性可用重试机制事务处理串并行打日志等等。 showImg(https://segmentfault.com/img/remote/1460000018587196); 阿里妹导读:提到盒马鲜生...

    Me_Kun 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<