小程序开发之小米商城Lite

1.刚接触小程序不久，感觉相对来说比较简单，就自己花了五六天做了一个项目，因为本身也是米粉，就看中了小米的微信小程序(可怜国庆撸了几天的代码，哈哈)，话不多说，先上效果图吧。算了算了。本来还打算上gif图，但是太难搞了，说明一下吧。要看效果的等下我贴出项目github地址来，自己去看吧

1.项目模块

2.整个项目大致分为首页，分类，发现，购物车，我的五个模块，其实就是底部导航条的五块，

1）首页

3.首页的重点也就是一个轮播图，然后一个全局的底部导航条，其实微信小程序都给我们提供的组件。像轮播图组件swiper-item,然后底部导航条在app.json中设置tabBar都可以实现，前面我还在纠结自己如何实现一个底部导航条，然后后面各种纠结，其实就简简单单的配置就行，所以说文档很重要。贴一张首页图吧

2）分类

4.分类这一个模块，其实是挺让我难下手的，先给张图你就明白了看上面图就知道，第一个是数据的问题，对于一个学前端的人来讲，数据是非常重要的，因为前端人员就是要对后台提供的数据，以各种形式，各种界面来显示，让用户更好的去使用，去体验，所以摆在我前面的第一个问题就是我没有数据，然后第二个问题，布局问题，我侧导航条可以自己移动，右边也可以自己移动，互不干扰，然后我琢磨了一段时间，将左边侧导航栏设置为positoin:absolute；脱离文档流，再加上overflow:scroll；就可以了，然后::-webkit-scrollbar{display:none;}把滚动条样式去除，就都实现了，做出来之后满足感爆棚，然后第一个问题我新建了一个js文件，在里面造json数据，这个json数据挺复杂了，太多括号，就不贴出来了，然后再使用小程序提供的模板template组件循坏放入，这个时候，难点又出现了，因为小程序对于循坏渲染的例子太单一而且简单，就只有对单一josn的渲染，什么是单一的json，就比如：

[{name:'张三'，age:24},{name:’李四'，age:23}]

5.这种就是单一的json，就一层

[{name:'张三'，age:24,interest:[{sports:'足球'},{sports:'篮球'}]},{name:’李四'，age:23，interest:[{sports:'足球'},{sports:'篮球'}]}]

6.差不多就这个意思，多层的在文档中是没有说明的。

viewstyle='padding-top:10rpx;'wx:for='{{list}}'wx:key='{{index}}'id='nav-{{index}}'wx:for-item="itemName"viewwx:for='{{itemName.content}}'wx:key='{{index}}'templateis='categoryItem'data='{{...item}}'/template/view/view

7.纠结了好久，传入了模版，我这里循坏了两次，去获得里面的值，详细看json数据结果，反正意思就是不断去调试，循坏一次，只能获得第一层的数据，循环了两次，获得第二层的，加入你说我只循环一次，然后通过点（.）去吧数据点出来，这是不可能的，我试过了。然后布局都出来了，又碰到了怎么锚点滑动，然后搞了好久，发现小程序有这个东西，通过scroll-view组件里面的scroll-into-view的属性，然后通过设置id，绑定

scroll-viewscroll-y="true"style='height:100%'scroll-with-animation="true"scroll-into-view='{{toview}}'viewstyle='padding-top:10rpx;'wx:for='{{list}}'wx:key='{{index}}'id='nav-{{index}}'wx:for-item="itemName"viewwx:for='{{itemName.content}}'wx:key='{{index}}'templateis='categoryItem'data='{{...item}}'/template/view/view/scroll-view

8.其中scroll-y="true"允许竖向滚动height要设置，你可以试试不加这个scroll-with-animation=“true”滑动动画，这里面同通过js动态绑定id，使id值给上面的toview相同时，就会锚定定位，搞了好久，心累，不过效果出来了还是很爽的，哈哈哈。

3）发现

9.

10.发现模块没什么讲的，也加入一个template

4）购物车

11.

5）我的

12.

13.我的这里使用了小程序的API获得用户头像，名字，挺简单的

14.整体的结果上述所讲，其实就大部分都是布局问题，没有很多的用到小程序的API，后续慢慢的加上去，因为那才是小程序的重点，然后ajax也没有用到，只是模拟数据什么的，以后加吧。

2.项目结构

15.如上图所示，datas放一些模拟的数据，json。pages------------页面static------------静态资源（图片）util--------------工具

最后奉上git小米商城Lite（觉得不错，帮我star一下，万分感谢！）