范围:深圳亚博app开发,软件定制开发,亚博app软件开发公司,深圳软件外包公司.TEL:3447249690
当前位置:首页 > app小程序

亚博-微信小程序开发电商家具入门教程

06-30 亚博APP
摘要:尽人皆知,跟着愈来愈多的app呈现在了App商城,致使手机下载多了app会致使手机卡,所以这时候微信小法式腾空而出。只要用户扫一扫或搜刮一下就可以打开利用,削减了我们下载app的次数。

尽人皆知,跟着愈来愈多的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来轮回。

我这里把图片放在了js里面遍历。

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 if( carts[i].selected=!selectAllStatus){ selectAllStatus:false } carts[i].selected=selectAllStatus; } this.setData({ carts, selectAllStatu亚博s }) 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。 我这里是用的第一种方式

wxml代码:

获得头像昵称 {{userInfo.nickName}}

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 }) }

最后

这个小法式还一些功能还没有实现,好比购物车,用户信息的保留在后台的问题,会在后续的微信小法式开辟教程中给大师逐一介绍。

相干资讯:微信小法式微信小法式开辟教程

版权保护: 本文由 亚博app开发 原创
转载请保留链接: http://www.cqsLin.com

关于我们      深圳亚博定制开发软件有限公司,自2013年成立以来,为上千家企业提供软件外包、系统软件开发、亚博app开发、微信公众号开发、深圳亚博小程序开发等各种优秀的软件定制开发服务.关键词:软件外包公司、手机软件开发、app制作开发、手机亚博app开发、小程序开发公司【TEL】:3447249690 微信:3447249690 QQ:3447249690
  • 1578文章总数
  • 13访问次数
  • 建站天数