商城页面

  1. 完成了首页和detail页面。
    首页界面

    布局
  • Detail界面
  • 使用了云端开发控制台里面的存储和数据库功能。

    使用储存来上传存放图片。
    用数据库来存储数据,把每个对应的id和图片以及每个商品的信息对应。可以用js格式导入。
  • 使用云函数

    来完成对云端(对数据库)的操作,
  • 使用db.js和util.js来完成对一些固定的函数进行统一

    实训4
    1.完成了个人中心页面。

    在个人中心里面视频中的代码和完成的效果不同。
    这是按照视频写的代码。下面的直接显示出来了。要加一个对是否有获取到info的判断


    2.对onshow生命周期和onLoad生命周期的解释:
    onshow表示页面被打开是触发的函数(可以被触发多次)
    onload表示页面被加载时触发的函数(只可被触发一次)
    这里与android中的onCreate()和onStart()的类似生命周期。
    3.写了订单页面。

    订单页面里把db.js和云函数
    和页面中的detail.js相结合,
    在云函数内写一个数据库的函数,用异步任务的方式作添加,或是查询数据库。

    然后再db.js调用声明。


    最后在实际的page中使用

    4.完成了购物车
    对购物车onTapCheck函数的逻辑理解:

    5.对购物车内的数量修改和将修改的数据返回给数据库。
    通过这个函数实现。

    对数据的上传用的也是云函数和db.js结合来使用


实训5-1:
1.完成了购物车结账功能。

在完成购物车结账功能中有一个小坑,我找了好久都没有找到问题的原因。
就是在我选择了商品之后用购物车里的Edit按钮进添加数量之后,在提交商品就会导致
提交的商品不会清空,然后也选择不了。就像是卡在那了一样。
然后我就去找Bug。
因为如果我不去用Edit那按钮去修改商品的数量的话直接提交是可以的。而且在detail页面中去反复addcart数量增加后也是可以成功添加的。
所以我把问题锁定在了Edit按钮上。去查看了Edit按钮的代码后发现也没有问题。

后来找到这段代码中的db.command.in(productList.map(product => product.productId))

发现其返回的是空值。
然后找到其源头productList。
发现我传进去productList在我没有使用Edit按钮之前是有productId这个值的,
但是在我使用了Edit按钮之后就没了。
好了,发现问题的根源了。
找到了updataCart这个云函数。
发现也没有什么问题。

但是就是每次调用了这个函数后,我的数据库中的productId就没了。
我再去查看这个函数里的传入值。发现在这个函数里的productList中的对应的
productId应该为productId而不是id。然后修改了后就好了,再次调用Edit按钮也没事了。

实训5-2:

已完成实训任务商城平台的所有功能:

心得:
学完了整个商城实训后,学到了很多的布局上面的方法,学到了WX小程序上很多很自带的很方便的一些例如上传图片,预览图片等的方法。
学会到了对后端数据库的管理和布局方式。

程序源码:

http://faye.website/wp-content/uploads/2020/07/Shopping.zip

最后修改日期:2020年7月20日

作者

留言

撰写回覆或留言

发布留言必须填写的电子邮件地址不会公开。