前言
小程序发布以来，凭借无需安装、用完即走、触手可及、无需注册、无需登录、以及社交裂变等多个优势，一路高歌，变得愈来愈火爆，它革命性的降低了移动应用的开发成本，也正好迎合了用户的使用应用的习惯。小程序魅力如此之大，作为一枚程序猿，我想怎么不自己做一个呢？话不多说，咱撸起袖子就是干
准备工作
前端开发利器：VSCode
调试�?a href="" rel="noopener">微信开发者工�?/a>
自己Mock的一些数�?/a>
微信开发文�?/a>
项目介绍：小米商城实�?button class="cnblogs-toc-button" title="显示目录导航" aria-expanded="false">
项目目录结构
├── assets 用到的一些图标文�?
├── lib
├── weui.wxss 引用了weui
├── modules
├── showDetail.js 跳转展示商品详情的公�?span class="hljs-keyword">js文件
├── showcDetail.js
├── pages 项目的各个页�?
├── index 商城首页
├── categories 商品分类�?
├── discovery 发现�?
├── channel 商品频道目录
├── phone 手机频道
├── tv 电视频道
├── computer 电脑频道
├── cart 购物�?
├── mine 个人信息�?
├── goods 商品详情�?
├── selectGoods 商品属性选择�?
├── search 商品搜索�?
├── addr 收货地址�?
├── template 使用到的模版文件
├── slide 轮播图模�?
├── goods_list 商品展示模版
├── cover 商品展示模版
├── util 使用到的工具�?
├── mock.js 项目中使用到的一些数�?
├── app.js 项目逻辑
├── app.wxss 项目公共样式�?
└── app.json 项目公共设置
功能的展示与实现
一、商城首�?/strong>
页面结构分析�?/p>
顶部搜索�?/li>
这里看上去是一个搜索框，但其实，它要实现的仅仅是个页面跳转功能，只要把它的disabled设置�?code>true就可以了，另外要想让它placeholder占位符居中显示的话，微信小程序提供了一�?code>placeholder-class的属性，通过它可以改变placeholder的样式�?/p>
轮播图区�?/li>
这里微信小程序给我们提供了swiper组件，直接用就可以了。但是轮播图在各个页面都可能存在，只是其中所显示的图片不一样而已，所以使用组件化思想，把它写成一个模版，哪里要使用，就引入这个模版即可�?/p>
[span class="hljs-name">template name="slide"
[span class="hljs-name">view class="section section-swiper"
[span class="hljs-name">swiper class="slide" indicator-dots="{
{true}}" autoplay="{
{true}}" interval="2000" duration="1000"
[span class="hljs-name">block wx:for="{
{slides}}" wx:key="{
{index}}"
[span class="hljs-name">swiper-item
[span class="hljs-name">image src="{ {item.slide_url}}" mode="widthFix" class="slide-image" data-id="{ {item.id}}" />
使用时，这样引入
[span class="hljs-name">import src="../../../templates/slide/slide.wxml" />
[span class="hljs-name">view class="container"
[span class="hljs-name">template is="slide" data="{
{slides}}"
商城导航区、活动区
这里只是个简单的布局，就不赘述了。但是需要注意的是在微信小程序里，强烈推荐使�?a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes" rel="noopener">弹性布局
首页商品展示�?/li>
这里的商品都是分块展示，很有规律，因此整个商品展示都可以直接�?code>wx:for遍历出来�?br>wxml�?/p>
[span class="hljs-name">view class="section block"
[span class="hljs-name">block wx:for="{
{index_block}}" wx:key="{
{item.id}}"
[span class="hljs-name">view class="section cover"
[span class="hljs-name">image class="cover-img" src="{ {item.img_url}}" data-cid="{ {item.id}}" bindtap="showcDetail"/>
[span class="hljs-name">view class="section goods-list"
[span class="hljs-name">block wx:for="{
{item.section}}" wx:key="index" wx:for-item="product"
[span class="hljs-name">view class="goods-item"
[span class="hljs-name">image class="goods-img { {product.is_new?'new':''}} { {product.on_sale?'on-sale':''}}" src="{ {product.goods_cover}}" data-pid="{ {product.id}}" mode="aspectFill" bindtap="showDetail"/>
[span class="hljs-name">text class="title"
[span class="hljs-name">text class="desp"
[span class="hljs-name">text class="meta"
[span class="hljs-name">text class="discount"
//����Ч���ο���http://hnjlyzjd.com/hw/wz_24992.html
这里有个细节，每个版块里的商品会分成“新品”、“立减”（即有折扣）、“无折扣”三种，着该怎么去做呢？这里我用了一个巧妙的方法：给每个商品�?code>class里绑定布尔�?code>is_new�?code>on_sale通过三元运算符判断是否给该商品挂载一个类名，再使�?strong>伪元�?/strong>给该商品打上“新品”或“立减”的标签如下�?/p>
wxml�?/p>
[span class="hljs-name">image class="goods-img { {product.is_new?'new':''}} { {product.on_sale?'on-sale':''}}" src="{ {product.goods_cover}}" data-pid="{ {product.id}}" mode="aspectFill" bindtap="showDetail"/>
wxss
.goods-img.new:before{ /新品标签样式/
position: absolute;
left: 0;
top: 0;
Width��/span>://����Ч���ο���http://hnjlyzjd.com/hw/wz_24990.html
100rpx;Height��/span>: 40rpx;
line-Height��/span>: 40rpx;
content: "新品";
color: #fff;
font-size: 9pt;
text-align: center;
background: #8CC64A;
}
.goods-img.on-sale:before{ /立减标签样式/
position: absolute;
left: 0;
top: 0;
Width��/span>: 100rpx;
Height��/span>: 40rpx;
line-Height��/span>: 40rpx;
content: "立减";
font-size: 9pt;
color: #fff;
text-align: center;
background: #ec6055;
}
逻辑分析�?br>首页只是些商品，所以逻辑层只要根据每个商品的id来跳到对应商品的详情页即可，很显然这个方法在多个页面都要使用的，所以使用模块化思想，创建一�?code>modules文件夹，把方法写在单独的js文件里，�?strong>向外输出
const showDetail=(e)=>{
const id=e.currentTarget.dataset.pid; //获取每个商品的id
wx.navigateTo({
url: /pages/goods/show?id=${id}
})
};
export default showDetail;
哪里要使用，就用import引入
import showDetail from "../../modules/showDetail";
二、商品分类页
页面结构分析�?br>商品分类页分为左侧的商品分类菜单和右边的商品分类展示区，
用两�?code>scroll-view就可以了，左右两边都设置scroll-y让它们垂直方向滚动，此外�?code>scroll-view还有一�?code>scroll-into-view属性能让我们实现类�?code>a标签的锚点功能，scroll-into-view的值是某个子元素的id，但�?strong>此处有一个小�?/strong>�?strong>这个id不能以数字开�?/strong>
当时查了一下文档就开做了，于是乎给左侧菜单取了些数字id，现在想起来当时我太自以为然�?，此外如果内容太多，是会产生滚动条的，如图：
这样看起来也太丑了。�?/p>
解决办法：给全局样式加入下面的样�?/p>
//隐藏滚动�?
::-webkit-scrollbar{
Height��/span>: 0;
Width��/span>: 0;
color: transparent;
}
嗯，beautiful ！！
商品分类功能
逻辑分析：给页面注册个curIndex(当前选中菜单的下�?，如果当前下标和选中的菜单下标相同，则处于激活状�?br>部分代码�?br>wxml�?/p>
[span class="hljs-name">view class="main"
[span class="hljs-name">scroll-view scroll-y class="category-left"
[span class="hljs-name">view class="cate-nav-list" wx:for="{ {cate_nav_list}}" wx:key="{ {item.id}}" data-id="{ {item.id}}" data-index="{ {index}}"
bindtap="switchCategory"
[span class="hljs-name">text class="cate-name {
{curIndex===index?'on':''}}"
[span class="hljs-name">scroll-view class="category-right" scroll-y="{
{true}}" scroll-into-view="{
{toView}}" scroll-with-animation="true"
[span class="hljs-name">view class="cate-content"
[span class="hljs-name">view class="cate-list-content" wx:for="{
{detail}}" wx:key="{
{item.id}}" id="{
{item.id}}"
[span class="hljs-name">view class="banner"
[span class="hljs-name">image src="{ {item.banner}}"/>
[span class="hljs-name">view class="header"
[span class="hljs-name">view class="cate-list"
[span class="hljs-name">view class="cate-item" wx:for="{
{item.cate_list}}" wx:key="{
{index}}" wx:for-item="cateList"
[span class="hljs-name">image src="{ {cateList.item_img}}" />
[span class="hljs-name">text
js:
const app=getApp();
Page({
/
页面的初始数�?
/
data: {
cate_nav_list:�?
{name:"新品",id:"new"},
{name:"手机",id:"phone"},
{name:"电视",id:"tv"},
{name:"电脑",id:"laptop"},
{name:"家电",id:"appliance"},
{name:"路由",id:"router"},
{name:"智能",id:"smart"},
{name:"儿童",id:"kids"},
{name:"灯具",id:"lignts"},
{name:"电源",id:"adapter"},
{name:"耳机",id:"headset"},
{name:"音箱",id:"voicebox"},
{name:"生活",id:"life"},
{name:"服务",id:"service"},
{name:"米粉�?,id:"card"}
�?
curIndex:0, //初始化当前下标为0
toView:"new", //默认显示“新品展示�?/span>
detail:【�?
},
switchCategory(e){
const curIndex=e.currentTarget.dataset.index?e.currentTarget.dataset.index:0; //获取每个菜单的id
//更新数据
this.setData({
toView:e.currentTarget.dataset.id,
curIndex
});
},
onLoad: function (options) {
const detail=app.globalData.category; //获取分类展示数据
this.setData({
detail
});
}
})
三、发现页
页面结构分析�?br>
里面展示了一些商品宣传视频（当时还是不太想切太多的页面�）这里用弹性布局+video组件就搞定了�?a href="" rel="noopener">这里是文�?/a>
四、商品详情页
页面结构分析�?br>商品详情顶部由一个swiper组成，中间部分由一些cells组成（weui�?a href="" rel="noopener">点击这里快速查�?/a>
底部�?strong>商品的概述及参数配置两部分组成，这个还是比较简单的�?给两个元素分别绑定一个布尔值来控制谁显示谁隐藏�?/p>
当然，要使用weui必须引入它的样式文件,我们在app.wxss里引入，然后全局都可以使用了
@import "./lib/weui.wxss";
嗯，weui的官网和github地址自然少不了�?a href="" rel="noopener">weui官网 �?a href="" rel="noopener">weui github官方文档，在github上阅读代码是一个非常有效的学习方式，但是文件夹嵌套太深找个文件也不容易，这里奉�?a href="" rel="noopener">github阅读神器
使用到的weui�?br>请容许我贴一段weui抄来的结�?/p>
[span class="hljs-name">view class="weui-cells"
[span class="hljs-name">view class="weui-cell"
[span class="hljs-name">view class="weui-cell__bd"
[span class="hljs-name">view class="title"
[span class="hljs-name">view class="desp"
[span class="hljs-name">view class="meta"
商品详情页的显示
逻辑分析�?br>每个商品通过id来跳转到相应的详情页，但是这个id会在哪里呢因为先这个详情页是通过一个个商品来打开的，所以在商品详情页加载时，可以在 onLoad 中获取打开当前页面所调用�?query 参数（是条json数据），因为在showDetail里只用了id来跳转，所以options只有id属�?/p>
onLoad: function (options) {
console.log(options); //{id:"4"}
const id=options.id; //获取options里的id
const goods=app.globalData.goodsDetail.filter(item=>{
return item.id==id; //通过id来筛选显示对应的商品
});
this.setData({
goods:goods�?span class="hljs-number">0�?//因为id是唯一的，所以上面筛选出来的数组只有一条数据，这条数据就是要显示的商品数据
});
}
商品图片预览实现
微信小程序为我们提供�?a href="" rel="noopener">wx.previewImage()方法来实现图片的预览，实现方法如下：
previewImage(e){
const index=e.currentTarget.dataset.index; //获取swiper里的图片的下�?/span>
const slide=this.data.goods.goods_slides; //获取商品轮播�?/span>
const imgList=【�? //定义一个数组来存放轮播图的url
slide.map(item=>{
imgList.push(item.slide_url); //用js的map方法把图片的url地址取出来放到数组里
});
wx.previewImage({
current: imgList【index�? // 当前显示图片的链接，不填则默认为 urls 的第一�?/span>
urls: imgList
})
}
五、商品属性选择
页面结构：整个商品属性页的结构是由一些cells组成，所以用weui最合适（插一段：原生的radio真的是很丑，不过weui对它做了改进�?br>一开始想有weui就简单多了，直接用form表单�?code>bindsubmit处理就可以了，奈何在weui里使用bindsubmit，取不到radio的值，折腾了很久，还是取不到，但是换成原生的radio竟可以取到！�?br>
这个不行，那就换一种吧，用weui radiogroup里的bindchange事件吧，虽然繁琐了些，但是还是能解决问题的。�?br>话不多说，看代码（感觉写了一些很累赘的代码。。）
selectVersion(e) {
const version = e.
