微信小程序开发之小米商城

桃扇骨 2022-05-09 06:33 475阅读 0赞

# 小程序开发之小米商城Lite #

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

### 1. 项目模块 ###

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

##### 1）首页 #####

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

##### 2）分类 #####

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

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

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

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

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

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

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

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

##### 3）发现 #####

![在这里插入图片描述][70 2]

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

##### 4）购物车 #####

![在这里插入图片描述][70 3]

##### 5）我的 #####

![在这里插入图片描述][70 4]

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

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

### 2.项目结构![在这里插入图片描述][70 5] ###

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

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

[70]: /images/20220509/ca04d6636b17496794096f2918ac15b8.png
[70 1]: /images/20220509/783acb61371d46ae870a474e038c5b10.png
[70 2]: /images/20220509/8c30177b657e49a3b816c49b4c31a6b9.png
[70 3]: /images/20220509/0105e624e13c470ab898be1d4ba8c2b9.png
[70 4]: /images/20220509/aca2fa91a99147479a67120bfd57494e.png
[70 5]: /images/20220509/9d0b08684761474dbbd8dc049a6958a4.png
[Lite]: https://github.com/yuanqi3131/shop