微商城的简单性商城小程序开发，无需下载应用商城，让很多传统电商逐渐发展微商城，现在随着微信小程序的加入腾空。用户只要扫一扫或搜索即可打开应用，小程序商城的开发满足了传统电商的需求。下面以一个普通的家具商城小程序为例，介绍小程序商城开发教程的介绍~

小程序商城开发教程介绍

开发环境：WXML(HTML),WXSS(CSS),Javascript

开发工具：vscode、微信开发者工具

开发流程：下载微信开发者工具注册后会有自己的AppID。微信小程序有官方微信小程序开发文档开发文档

代码实现商城小程序开发，而且首页的东西不多，主要是布局问题。 wxss代码：

.img-box 图片{

宽度：100%；

身高：100%；

}

p>

.img-box 图片：之后{

内容：;

位置：绝对；

底部：0；

宽度：100%；

颜色：#fff;

内边距：50px 20px;

}

家具效果实现的轮播

小程序的轮播实现使用了 swiper 组件。滑块视图容器有indicator-dots、autoplay、setinterval等属性，可以设置自动播放和时间间隔。插入的图片可以用 wx:for 循环播放。

导航的跳跃问题

点击添加到购物车后，添加绑定事件应该跳转到另一个页面 可以，但是没有效果，很久没有报错。本来以为是我的拼写或者路径有问题商城小程序开发，但是查了之后没有问题，最后发现了一个坑。这里要跳转的页面是tabBar页面。按照默认跳转，是不允许的。查了开发文档，发现了问题。

解决方案：只需将 navigateTo 替换为 switchTab。跳转方式有很多种，具体可以查看开发文档。

商品加入购物车后如何控制购买的商品数量和计算价格

本来想做的是点击图片进入详情然后点击加入购物车保存到后台购物但是由于自学知识有限 商城小程序开发 ，后台有还没学，只能加绑定事件跳转到购物车。

接下来进入正题：如何控制购物车购买数量和计算总价？首先在js中定义一个cart空数组，我们先把这个值赋给这个空数组，然后取这个值。之后选择产品的状态为默认状态 小程序开发 ，点击更改状态即可取消。话不多说，接下来计算所选商品的总价。

js代码：

选择列表(e){

让 selectAllStatus = this.data.selectAllStatus;

常量索引=e。 currentTarget.dataset.index;

让 carts=this.data.carts;

const selected=carts[index].selected;

carts[index] .selected=!selected;

selectAllStatus = carts[index].selected;

// if( carts[index].selected=!selected){

// selectAllStatus:false;

// }

this.setData({

手推车，

全选状态，

});

this.getTotalPrice();

},

删除列表(e) {

const index = e.currentTarget.dataset.index;

让购物车 = this.data.carts;

carts.splice(索引,1);

this.setData({

购物车：购物车

});

if(!carts.length){

这个。设置数据（{

hasList: 假

});

}其他{

this.getTotalPrice();

}

},

addCount (e){

const index = e.currentTarget.dataset.index;

让购物车 = this.data.carts;

让 num = carts[index].num;

num++;

carts[index].num = num

this.setData({

手推车

})

this.getTotalPrice();

},

minuCount(e){

常量索引 = e.currentTarget.dataset。索引；

让购物车 = this.data.carts;

让 num = carts[index].num;

如果（数

【昱远信息系统开发定制】