资讯专栏INFORMATION COLUMN

小程序之仿小米商城Lite

Lsnsh / 3656人阅读

摘要:嗯这句话就是作为第一次做仿小程序项目的我,历经磨难得出来的肺腑之言。作为想要走上代码这条不归路的程序员,心浮气躁就是为以后整个项目给自己挖坑奠定了良好的基础。

前言

     关于小程序,在这里有一句话送给正准备阅读的你-世界上本没有坑,路走的多了就有了;世界上本没有路,坑填的多了就有了。嗯~~~这句话就是作为第一次做仿小程序项目的我,历经‘磨难’得出来的肺腑之言。好了,不多说,进入正题。。

写什么

这一次分享,对象是商城类小程序-仿小米商城Lite
那商城类小程序主要的功能又是什么呢?其实也就这几个点

即点即看(实时查看详情)

即看即买(加入购物车或者立即够买)

即搜即看即买(精准搜索)

详解: 一:实时查看详情

       商城类的小程序,因为其性质为网上购物平台,必然罗列大量且繁杂的商品,就形成了多种分类,层层嵌套的结构。如何即点即看?这是我开始想要仿写这个小程序遇到的第一个大问题,难道每一个商品一个一个给它写一个相应的详情页面吗?
来看一下页面


首先,一个一个给它写一个相应的详情页面十分耗时耗力,简洁的代码是每一个程序员追求有的品质;其次,小程序代码包大小限制了你不能过多地重复代码。

解决方案:

设计一个详情页模板(如效果过图)具体的页面wxml代码就不写了,(后面会给出源码链接)我们主要分析js内的数据传输:

回到商品页:

</>复制代码

  1. toDetail:function(e){
  2. var index=e.currentTarget.dataset.index;
  3. // console.log(index)
  4. var detail=this.data.goodsList[index];
  5. // console.log(detail)
  6. app.globalData.detail=detail;
  7. //console.log(app.globalData.detail)
  8. this.setData({
  9. detail:detail
  10. })
  11. wx.navigateTo({
  12. url: "../../buy/buy",
  13. })
  14. }

</>复制代码

  1. globalData: {
  2. userInfo:null,
  3. detail:[],
  4. tocartMsg:[]
  5. }

每次点击,获取相应的数据值,将获取的值放入app.globalData里的事先设置好的空数组内(detail),注意,这里是直接将获取的值赋给detail,这样就可以保证每一次点击的商品将信息放入detail,而detail内的数据不会保存上一次获取的商品详情信息,这样就做到了数据的实时更新,这一点很重!!因为在详情页获取detail内数据时保证了获取的时最新的数据,从而实现了即点即看的效果。

接下来详情页模板获取数据

</>复制代码

  1. onLoad: function (options) {
  2. // let id=options.currentTarget.dataset.id;
  3. this.setData({
  4. goodds:app.globalData.detail
  5. })
  6. // console.log(this.data.goodds)

这样就完成了数据的传递

二:加入购物车

效果图:

同样的,在详情页实时获取用户点击查看的信息之后当然就要实现购物的功能,不然整个小程序就没有任何意义。

</>复制代码

  1. tocart:function(){
  2. this.setData({
  3. toCartMsg:this.data.goodds
  4. })
  5. app.globalData.tocartMsg.push(this.data.toCartMsg);
  6. wx.showToast({
  7. title: "已加入购物车",
  8. icon: "success",
  9. duration: 2000
  10. })
  11. }

同样的,我们在 app.globalData内设置一个空数组tocartMsg,这里解释一下为什么要放到globalData里面,原因就是app.js文件的作用是监听并处理小程序的生命周期函数、声明全局变量,这样我们就可以极为方便地去引用这个小社区同志们事先无私分享的数据。

</>复制代码

  1. /**
  2. * 生命周期函数--监听页面显示
  3. */
  4. onShow: function () {
  5. this.setData({
  6. carMsg:[...app.globalData.tocartMsg]
  7. })
  8. console.log(this.data.carMsg)
  9. }

最后,在每一次页面显示的时候,都将新添加购物车的商品信息获取到,因为不能只获取一次,你购买了商品发现还有一只手指没剁掉,想再来一次,那么你就会回到页面上继续购买,所以放在onShow里面是极为合适的。

三:精准搜索

先看效果


</>复制代码

  1. 搜索
  2. {{item.title}}
  3. {{item.desc}}
  4. {{item.price}}元

</>复制代码

  1. input:function(e){
  2. var inputValue=e.detail.value;
  3. // console.log(inputValue)
  4. this.setData({
  5. inputValue
  6. })
  7. },
  8. search:function(e){
  9. var inputValue=this.data.inputValue;
  10. // console.log(inputValue);
  11. var goods=this.data.goodsList;
  12. // console.log(goods);
  13. // var inputValue1=this.data.inputValue;
  14. var re=new RegExp(inputValue);
  15. var temp = [];
  16. if(inputValue==""){
  17. return false
  18. }else{
  19. for(let i=0;i
  20. 思路:获取输入框的值,将输入框的值与商品的名称进行匹配,这里用到了正则匹配,循环遍历每一个信息,如果商品名称包含了所输入的值,就放到搜索结果数组,而后页面循环出来,最后调取详情模板--点击购买~~~

  21. 总结遇到的问题,希望对你有帮助:
  22. 一、页面跳转的多种方法:
  23. 1、保留当前页面,跳转到应用内的某个页面,也就是说可以跳转到在当前目录下的所有页面

  24. </>复制代码

    1. wx.navigateTo({
    2. url:"XXX"
    3. })
  25. 2、关闭当前页面,跳转到应用内的某个页面。

  26. </>复制代码

    1. wx.redirectTo({
    2. url: "test?id=1"
    3. })
  27. 3、使用组件跳转

  28. </>复制代码

    1. 点击跳转
  29. 4、跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面

  30. </>复制代码

    1. wx.switchTab({
    2. url: "/index"
    3. })
  31. 最后一种跳转,也是踩的坑之一,在当前应用分支下要跳转到另一个tabBar页面应用,使用wx.navigateTo是没有办法实现跳转的,使用wx.switchTab即能跳转到另一个 tabBar 页面,并关闭其他 tabBar下的页面。

  32. 二、scroll-view 隐藏滚动条,让界面感官更好
  33. </>复制代码

    1. ::-webkit-scrollbar{
    2. width: 0;
    3. height: 0;
    4. color:transparent;
    5. }
  34. 三、数据的设置
  35. 这是犯的最为严重的错误

  36. </>复制代码

    1. "desc": "千元全面屏",
    2. "url": "",
    3. "price": 1799,
    4. "selected": false
  37. </>复制代码

    1. getTotalPrice: function (e) {
    2. let carMsg = this.data.carMsg;
    3. let total = 0;
    4. for (let i = 0; i < carMsg.length; i++) {
    5. if (carMsg[i].selected) {
    6. total+=carMsg[i].price;
    7. }
    8. }
    9. // total=total.toFixed(1)
    10. this.setData({
    11. totalPrice: total
    12. });
    13. }
  38. 数据的设定时,双引号显得非常重要,boolea值加上双引号显然会报错,而数值类型加上双引号,在计算价格的时候,carMsg[i].price得到的结果时字符串类型,所以这样的细节应当注意

  39. 四、小程序代码包大小限制问题及优化
  40. 2018年1月15号微信公开课PRO上小程序产品经理angusdu提到,为了保证小程序页面的首次加载时间控制在2秒以内,且打开不出现白页加载,小程序代码包最理想的情况是:不超过1M!又有说现在是2M,但是我遇到的问题是提示不得超过1M!超过限制将无法上传。

  41. 原因:代码包过大组要是本地图片太多,因为商城的小程序需要大量的图片向用户进行展示,所以占据代码包很大一部分空间,这就要求尽量不要把图片放到本地,或者将图片进行压缩

  42. 优化:1.尽量将图片、音频、数据、甚至页面搬至服务端,需要时再通过网络载入。将非核心非必要的内容移出代码包可以大幅度释放代码包空间。2.压缩。这也是上面提到的最大限度的使用模板,简洁代码

  43. 有句话送给你
  44. 千里之行始于足下,绝知此事要躬行,万事开头难走到最后发现也不过如此。作为想要走上代码这条不归路的程序员,心浮气躁就是为以后整个项目给自己挖坑奠定了良好的基础。在实施之前,页面的逻辑结构必须清晰,不能抱有走一步看一步的心态,工欲善其事必先利其器,还有就是数据的设置,条理不清晰在后期工作上会遇到非常多的问题,诸如数据的提取,会十分复杂

  45. 最后
  46. 码字不易,大佬们高抬贵手点个赞,用以鼓励本猿继续愉快踩坑。谢谢!

  47. 代码链接:https://github.com/HuanqingDe...

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/113443.html

相关文章

  • 程序之仿商城Lite

    摘要:嗯这句话就是作为第一次做仿小程序项目的我,历经磨难得出来的肺腑之言。作为想要走上代码这条不归路的程序员,心浮气躁就是为以后整个项目给自己挖坑奠定了良好的基础。 前言      关于小程序,在这里有一句话送给正准备阅读的你-世界上本没有坑,路走的多了就有了;世界上本没有路,坑填的多了就有了。嗯~~~这句话就是作为第一次做仿小程序项目的我,历经‘磨难’得出来的肺腑之言。好了,不多说,进入正...

    wow_worktile 评论0 收藏0
  • 微信程序-Lite

    摘要:微信小程序小米事先声明,这是一个高仿小米的微信小程序。写完之后查文档才发现,微信小程序官方提供了自定义组件的方法有需要的可以查看微信小程序文档写完这个组件后我总解了一下需要注意的问题选中了的当前页面,再次点击因该无效。 微信小程序-小米Lite 事先声明,这是一个高仿小米Lite的微信小程序。 我呢现在是一个大三快大四的学生,这个小程序花了我很长时间,把能写的功能基本上都写了。我秉着分...

    everfly 评论0 收藏0
  • 你们要的HTML布局技巧:如何规范搭建网页架构?

    摘要:主体内容区域小米首页下小米商城的主题内容区域,也是整体网页面积最广的区块实在不知道定主体内容区块时也可以根据面积比重来划分,最大的那块一定是主题中心,布局的重复性很高。 单就深入了解布局规范都足够说上一个月的,今天我就不论大范围,挑选小米网站首页的部分区块布局来讲解吧! 下面是小米官网的首页,很多人一看到这样的网页就傻眼,不知道咋弄,要么就随性布局,要么就干看着,其实遇到问题首先一点就...

    yvonne 评论0 收藏0
  • 你们要的HTML布局技巧:如何规范搭建网页架构?

    摘要:主体内容区域小米首页下小米商城的主题内容区域,也是整体网页面积最广的区块实在不知道定主体内容区块时也可以根据面积比重来划分,最大的那块一定是主题中心,布局的重复性很高。 单就深入了解布局规范都足够说上一个月的,今天我就不论大范围,挑选小米网站首页的部分区块布局来讲解吧! 下面是小米官网的首页,很多人一看到这样的网页就傻眼,不知道咋弄,要么就随性布局,要么就干看着,其实遇到问题首先一点就...

    KaltZK 评论0 收藏0

发表评论

0条评论

Lsnsh

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<