小程序之仿小米商城Lite

Posted 2021-02-21 homehtml

前言

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

写什么

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

• 即点即看（实时查看详情）
• 即看即买（加入购物车或者立即够买）
• 即搜即看即买（精准搜索）

详解：

一：实时查看详情

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


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

1. 解决方案：

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

回到商品页：

toDetail:function(e){
    var index=e.currentTarget.dataset.index;
    // console.log(index) 
    var detail=this.data.goodsList[index];
    // console.log(detail)
    app.globalData.detail=detail;
    //console.log(app.globalData.detail)
    this.setData({
      detail:detail
    })
    wx.navigateTo({
      url: ‘../../buy/buy‘,
    })
  }

 globalData: {
    userInfo:null,
    detail:[],
    tocartMsg:[]
  }

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

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

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

这样就完成了数据的传递

二：加入购物车

效果图：

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

tocart:function(){
    this.setData({
      toCartMsg:this.data.goodds
    })
    app.globalData.tocartMsg.push(this.data.toCartMsg);
    wx.showToast({
      title: ‘已加入购物车‘,
      icon: ‘success‘,
      duration: 2000
    })
  }

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

 /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    this.setData({
      carMsg:[...app.globalData.tocartMsg]
      
    })
    console.log(this.data.carMsg)
  }

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

三：精准搜索

先看效果

<view class="weui-search-bar" id="searchBar">
    <view class="weui-search-bar__form">
        <view class="weui-search-bar__box">
            <icon class="weui-icon-search_in-box" type="search" size="14"></icon>
            <input type="text" bindinput="input" class="weui-search-bar__input" placeholder="搜索商品" />
        </view>
    </view>
    <view class="text" bindtap="search" disbaled>搜索</view>
</view>
<view class="result">
    <view class="" bindtap="toDetail" wx:for="{{newList}}" wx:key="{{id}}" data-index="{{index}}">
        <view class="list">
            <image src="{{item.image}}" />
            <text class="title">{{item.title}}</text>
            <text class="desc">{{item.desc}}</text>
            <text class="price">{{item.price}}元</text>
        </view>
    </view>
</view>

 input:function(e){
      var inputValue=e.detail.value;
      // console.log(inputValue)
      this.setData({
        inputValue
      })
  },
  search:function(e){
    var inputValue=this.data.inputValue;
    //  console.log(inputValue);
    var goods=this.data.goodsList;
    //  console.log(goods);
    // var inputValue1=this.data.inputValue;
    var re=new RegExp(inputValue);
    var temp = [];
    if(inputValue==‘‘){
      return false
    }else{
      for(let i=0;i<goods.length;i++){
        console.log(re.test(goods[i].title))
        if(re.test(goods[i].title)){
          temp.push(goods[i]);
        }
      }
    }
    // console.log(temp);
    this.setData({
      newList:temp
    })
    console.log(this.data.newList)
  },
  toDetail:function(e){
    var index=e.currentTarget.dataset.index;
    // console.log(index) 
    var detail=this.data.newList[index];
    // console.log(detail)
    app.globalData.detail=detail;
    // console.log(app.globalData.detail)
    wx.navigateTo({
      url: ‘../../buy/buy‘,
    })
  }

思路：获取输入框的值,将输入框的值与商品的名称进行匹配，这里用到了正则匹配，循环遍历每一个信息，如果商品名称包含了所输入的值，就放到搜索结果数组，而后页面循环出来，最后调取详情模板--点击购买~~~

总结遇到的问题，希望对你有帮助：

一、页面跳转的多种方法：

• 1、保留当前页面，跳转到应用内的某个页面，也就是说可以跳转到在当前目录下的所有页面

wx.navigateTo({
    url:‘XXX‘
})

• 2、关闭当前页面，跳转到应用内的某个页面。

wx.redirectTo({
  url: ‘test?id=1‘
})

• 3、使用组件跳转

 <navigator url=‘XXX‘>点击跳转</navigator>

• 4、跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面

wx.switchTab({
  url: ‘/index‘
})

最后一种跳转，也是踩的坑之一，在当前应用分支下要跳转到另一个tabBar页面应用，使用wx.navigateTo是没有办法实现跳转的，使用wx.switchTab即能跳转到另一个 tabBar 页面，并关闭其他 tabBar下的页面。

二、scroll-view 隐藏滚动条，让界面感官更好

::-webkit-scrollbar{
    width: 0;
    height: 0;
    color:transparent;
}

三、数据的设置

这是犯的最为严重的错误

"desc": "千元全面屏",
      "url": "",
      "price": 1799,
      "selected": false

getTotalPrice: function (e) {
    let carMsg = this.data.carMsg;
    let total = 0;
    for (let i = 0; i < carMsg.length; i++) {
      if (carMsg[i].selected) {
        total+=carMsg[i].price;
      }
    }
    // total=total.toFixed(1)
    this.setData({
      totalPrice: total
    });
  }

数据的设定时，双引号显得非常重要，boolea值加上双引号显然会报错，而数值类型加上双引号，在计算价格的时候，carMsg[i].price得到的结果时字符串类型，所以这样的细节应当注意

四、小程序代码包大小限制问题及优化

• 2018年1月15号微信公开课PRO上小程序产品经理angusdu提到，为了保证小程序页面的首次加载时间控制在2秒以内，且打开不出现白页加载，小程序代码包最理想的情况是：不超过1M！又有说现在是2M，但是我遇到的问题是提示不得超过1M！超过限制将无法上传。
• 原因：代码包过大组要是本地图片太多，因为商城的小程序需要大量的图片向用户进行展示，所以占据代码包很大一部分空间，这就要求尽量不要把图片放到本地，或者将图片进行压缩
• 优化：1.尽量将图片、音频、数据、甚至页面搬至服务端，需要时再通过网络载入。将非核心非必要的内容移出代码包可以大幅度释放代码包空间。2.压缩。这也是上面提到的最大限度的使用模板，简洁代码

有句话送给你

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

最后

码字不易，大佬们高抬贵手点个赞，用以鼓励本猿继续愉快踩坑。谢谢！

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