微信小程序商品管理 第1篇
理解清楚了,那么接下来,打开微信开发者工具,新建一个项目,选择小程序,逻辑代码就选Javascript,项目创建好后,只需要做四个页面就好,在小程序项目的文件里,参考如下代码中的
pages
展开的四个页面路径,
在做页面之前,需要在中添加一段代码,代码如下,展开的tabBar
就是添加页面底部展示的分页选项卡,
清单页是扫码添加商品的列表页面,类似于购物车,也是用扫码枪记录的待结算商品清单,它的布局大致如下图所示,有两个按钮,一个扫码,另一个结算。
商品修改页,就是添加或修改商品信息的页面,用表单组件布局就可以,如下图所示,如果是添加商品,底下按钮是会变成添加按钮的
账单页,是记录结算产生的账单的列表展示页面,方便自己核实账单,它的布局大致如下图所示
商品页,是展示商品列表的,也是仓库的展示页面,它的布局大致如下图所示,如果商品太多,就点列表头部的搜索,方便找到
微信小程序商品管理 第2篇
当用户从下向上滑动屏幕时,需要加载更多的商品数据。
首先需要在 .js
文件中声明 onReachBottom
方法监听用户是否进行了上拉
当用户上拉时,需要对 page
页码进行加 1,代表要请求下一页的数据
当参数发生改变后,需要重新发送请求,拿最新的 page
向服务器发送请求获取数据。
在下一页的商品数据返回以后,将最新的数据和之前的数据进行合并
微信小程序商品管理 第3篇
➡️ /modules/goodsModule/pages/list/
下拉刷新是小程序中常见的一种刷新方式,当用户下拉页面时,页面会自动刷新,以便用户获取最新的内容。
小程序中实现上拉加载更多的方式:
在页面.json
中开启允许下拉,同时可以配置 窗口、loading 样式等
在页面.js
中定义 onPullDownRefresh
事件监听用户下拉刷新
微信小程序商品管理 第4篇
页面的逻辑其实很简单,如果按照之前做的流程图一路写下来,就会发现写得逻辑代码越来越多,就需要及时处理分离开,减少相互影响,把所有页面需要用到的公共变量放一个全局变量中,就在项目文件里的
globalData
去添加,参考代码如下
清单的页面逻辑,就是管理列表的增删改简单逻辑了,还有扫码和结算的逻辑需要写,代码如下,
代码是有点多,尽量省略了,在方法reloadList()
里,结算时用到了数组的函数reduce()
,写够一行就能算出总数,或者总金额,只要正确理解它就发现很好用,不用再写好几行代码,学到了吗
修改商品页面,逻辑很简单把,就处理表单和初始化和提交修改就可以
商品页面的逻辑,是一个操作列表的相关逻辑,比之前的要复杂一点,多了一个查询的逻辑,来看看怎么写得
就讲到这里,最后给看一下项目的整个目录截图,如下图所示,
整个项目写得文件不是很多的,能看懂吧,应该适合新手研究学习,上面只是展示了重要代码部分,方便理解,还有相关的页面布局wxml文件和样式wxss文件怎样弄,还有用到的自定义组件怎么写,都写在项目源码里的,在这里就不贴上去了,文章不能写得过长哈,