电商微信小程序开发入门篇

众所周知，随着越来越多的app出现在了App商城，导致手机下载多了app会导致手机卡，所以这时微信小程序腾空而出。只要用户扫一扫或者搜索一下就能打开应用，减少了我们下载app的次数。

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

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

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

万事开头难，关键是踏出第一步。 首先先看看首页效果吧

代码实现，主页东西也不多，主要是布局问题。 wxss代码：

.img-box image{ width: 100%; height: 100%; } .img-box image:after{ content: ; position: absolute; bottom: 0; width: 100%; color: #fff; padding: 50px 20px; }

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

navigate的跳转问题

在点击加入购物车以后，加入绑定事件本该跳转到另一个页面的，但是迟迟没有出现效果也没有报错，我以为我拼写或路径有问题，但我检查之后没有问题啊，后来终于发现了一个坑。 这里要跳转的是tabBar的页面，按照默认的跳转是不允许的，查看了一下开发文档才发现了问题的所在。

解决办法：把navigateTo换成switchTab就可以了 跳转有很多种方法，具体可以查看开发文档。

本来想做的是点击图片进入详情再点击加入购物车就能保存到后台的购物车里 但是由于自学的知识有限，后端目前还没学，只能加入一个绑定事件跳转到购物车。

接下来计入正题：如何控制购物车购买的数量和计算总价？先在js里面定义一个cart空的数组，我们先把这个值赋给这个空数组，之后再取这个值。之后给商品的状态默认为选择状态，点击一下，就可以把状态变为取消。话不多说，之后计算出选择商品的总价。

js代码：

selectList(e){ let selectAllStatus = this.data.selectAllStatus; const index=e.currentTarget.dataset.index; let 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({ carts, selectAllStatus, }); this.getTotalPrice(); }, deleteList(e) { const index = e.currentTarget.dataset.index; let carts = this.data.carts; carts.splice(index,1); this.setData({ carts: carts }); if(!carts.length){ this.setData({ hasList: false }); }else{ this.getTotalPrice(); } }, addCount (e){ const index = e.currentTarget.dataset.index; let carts = this.data.carts; let num = carts[index].num; num++; carts[index].num = num this.setData({ carts }) this.getTotalPrice(); }, minuCount(e){ const index = e.currentTarget.dataset.index; let carts = this.data.carts; let num = carts[index].num; if(num<=1) return false; num--; carts[index].num = num this.setData({ carts }); this.getTotalPrice(); }, selectAll(e){ let selectAllStatus = this.data.selectAllStatus; selectAllStatus = !selectAllStatus; let carts =this.data.carts; for(let i=0;i if( carts[i].selected=!selectAllStatus){ selectAllStatus:false } carts[i].selected=selectAllStatus; } this.setData({ carts, selectAllStatus }) this.getTotalPrice(); }, getTotalPrice(){ let carts = this.data.carts; let total = 0; for(let i =0;i // total += carts[i].num *carts[i].price; if(carts[i].selected){ total+= carts[i].num * carts[i].price; } } this.setData({ totalPrice:total.toFixed(2) }) }

如何获取登录微信的用户的头像和信息

使用wx.getUserInfo直接获取微信头像，昵称。

我们在使用小程序wx.login API进行登录的时候，直接使用wx.getUserInfo是不能获取更多的信息的，如微信用户的openid。 我这里是用的第一种方法

js代码：

onLoad: function () { if (app.globalData.userInfo) { this.setData({ userInfo: app.globalData.userInfo, hasUserInfo: true }) } else if (this.data.canIUse){ // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回 // 所以此处加入 callback 以防止这种情况 app.userInfoReadyCallback = res => { this.setData({ userInfo: res.userInfo, hasUserInfo: true }) } } else { // 在没有 open-type=getUserInfo 版本的兼容处理 wx.getUserInfo({ success: res => { app.globalData.userInfo = res.userInfo this.setData({ userInfo: res.userInfo, hasUserInfo: true }) } }) } }, getUserInfo: function(e) { console.log(e) app.globalData.userInfo = e.detail.userInfo this.setData({ userInfo: e.detail.userInfo, hasUserInfo: true }) }

最后

这个小程序还有一些功能还没有实现，比如购物车，用户信息的保存在后台的问题。在后续的教程中将会讲到。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!