米8搶到沒？不急，擼個小程式先?

雲中玉卷發表於2018-06-12

前言

小程式釋出以來，憑藉無需安裝、用完即走、觸手可及、無需註冊、無需登入、以及社交裂變等多個優勢，一路高歌，變得愈來愈火爆，它革命性的降低了移動應用的開發成本，也正好迎合了使用者的使用應用的習慣。小程式魅力如此之大，作為一枚程式猿，我想怎麼不自己做一個呢？話不多說，我們擼起袖子就是幹

準備工作

專案介紹：小米商城實戰

專案目錄結構

├── assets                   用到的一些圖示檔案
├── lib
    ├── weui.wxss            引用了weui
├── modules                    
    ├── showDetail.js        跳轉展示商品詳情的公共js檔案  
    ├── showcDetail.js      
├── pages                    專案的各個頁面
    ├── index                商城首頁
    ├── categories           商品分類頁
    ├── discovery            發現頁
    ├── channel              商品頻道目錄
        ├── phone            手機頻道
        ├── tv               電視訊道
        ├── computer         電腦頻道
    ├── cart                 購物車
    ├── mine                 個人資訊頁
    ├── goods                商品詳情頁
    ├── selectGoods          商品屬性選擇頁
    ├── search               商品搜尋頁
    ├── addr                 收貨地址頁
├── template                 使用到的模版檔案               
    ├── slide                輪播圖模版  
    ├── goods_list           商品展示模版
    ├── cover                商品展示模版
├── util                     使用到的工具類               
    ├── mock.js              專案中使用到的一些資料  
├── app.js                   專案邏輯
├── app.wxss                 專案公共樣式表
└── app.json                 專案公共設定
複製程式碼

功能的展示與實現

一、商城首頁

頁面結構分析：

頂部搜尋條這裡看上去是一個搜尋框，但其實，它要實現的僅僅是個頁面跳轉功能，只要把它的disabled設定為true就可以了，另外要想讓它placeholder佔位符居中顯示的話，微信小程式提供了一個placeholder-class的屬性，通過它可以改變placeholder的樣式。
輪播圖區域這裡微信小程式給我們提供了swiper元件，直接用就可以了。但是輪播圖在各個頁面都可能存在，只是其中所顯示的圖片不一樣而已，所以使用元件化思想，把它寫成一個模版，哪裡要使用，就引入這個模版即可。

<template name="slide">
    <view class="section section-swiper">
		<swiper class="slide" indicator-dots="{{true}}" autoplay="{{true}}" interval="2000" duration="1000">
			<block wx:for="{{slides}}" wx:key="{{index}}">
				<swiper-item>
					<image src="{{item.slide_url}}" mode="widthFix" class="slide-image" data-id="{{item.id}}" />
				</swiper-item>
			</block>
		</swiper>
	</view>
</template>
複製程式碼

使用時，這樣引入

<import src="../../../templates/slide/slide.wxml" />
<view class="container">
    <template is="slide" data="{{slides}}"></template>
</view>
複製程式碼

商城導航區、活動區這裡只是個簡單的佈局，就不贅述了。但是需要注意的是在微信小程式裡，強烈推薦使用彈性佈局
首頁商品展示區這裡的商品都是分塊展示，很有規律，因此整個商品展示都可以直接用wx:for遍歷出來。 wxml：

<!-- 首頁商品版塊 -->
	<view class="section block">
		<block wx:for="{{index_block}}" wx:key="{{item.id}}">
			<view class="section cover">
				<image class="cover-img" src="{{item.img_url}}" data-cid="{{item.id}}" bindtap="showcDetail"/>
			</view>
			<view class="section goods-list">
				<block wx:for="{{item.section}}" wx:key="index" wx:for-item="product">
					<view class="goods-item">
						<image class="goods-img {{product.is_new?'new':''}} {{product.on_sale?'on-sale':''}}" src="{{product.goods_cover}}" data-pid="{{product.id}}" mode="aspectFill" bindtap="showDetail"/>
						<text class="title">{{product.header}}</text>
						<text class="desp">{{product.description}}</text>
						<text class="meta">{{product.meta}}</text>
						<text class="discount">{{product.discount}}</text>
					</view>
				</block>
			</view>
		</block>
	</view><!-- end-section block -->
複製程式碼

這裡有個細節，每個版塊裡的商品會分成“新品”、“立減”（即有折扣）、“無折扣”三種，著該怎麼去做呢？這裡我用了一個巧妙的方法：給每個商品的class裡繫結布林值is_new和on_sale通過三元運算子判斷是否給該商品掛載一個類名，再使用偽元素給該商品打上“新品”或“立減”的標籤如下：

wxml：

<image class="goods-img {{product.is_new?'new':''}} {{product.on_sale?'on-sale':''}}" src="{{product.goods_cover}}" data-pid="{{product.id}}" mode="aspectFill" bindtap="showDetail"/>
複製程式碼

wxss

.goods-img.new:before{      /*新品標籤樣式*/
  position: absolute;
  left: 0;
  top: 0;
  width: 100rpx;
  height: 40rpx;
  line-height: 40rpx;
  content: "新品";
  color: #fff;
  font-size: 9pt;
  text-align: center;
  background: #8CC64A;
}
.goods-img.on-sale:before{   /*立減標籤樣式*/
  position: absolute;
  left: 0;
  top: 0;
  width: 100rpx;
  height: 40rpx;
  line-height: 40rpx;
  content: "立減";
  font-size: 9pt;
  color: #fff;
  text-align: center;
  background: #ec6055;
}
複製程式碼

邏輯分析：首頁只是些商品，所以邏輯層只要根據每個商品的id來跳到對應商品的詳情頁即可，很顯然這個方法在多個頁面都要使用的，所以使用模組化思想，建立一個modules資料夾，把方法寫在單獨的js檔案裡，並向外輸出

const showDetail=(e)=>{
    const id=e.currentTarget.dataset.pid; //獲取每個商品的id
    wx.navigateTo({
        url: `/pages/goods/show?id=${id}`
    })
};
export default showDetail;
複製程式碼

哪裡要使用，就用import引入

import showDetail from "../../modules/showDetail";
複製程式碼

二、商品分類頁

頁面結構分析：商品分類頁分為左側的商品分類選單和右邊的商品分類展示區，用兩個scroll-view就可以了，左右兩邊都設定scroll-y讓它們垂直方向滾動，此外，scroll-view還有一個scroll-into-view屬效能讓我們實現類似a標籤的錨點功能，scroll-into-view的值是某個子元素的id，但是此處有一個小坑，這個id不能以數字開頭

當時查了一下文件就開做了，於是乎給左側選單取了些數字id，現在想起來當時我太自以為然了，此外如果內容太多，是會產生滾動條的，如圖：

這樣看起來也太醜了。。

**解決辦法：給全域性樣式加入下面的樣式

//隱藏滾動條
::-webkit-scrollbar{  
  height: 0;
  width: 0;
  color: transparent;
}
複製程式碼

嗯，beautiful ！！

商品分類功能

邏輯分析：給頁面註冊個curIndex(當前選中選單的下標)，如果當前下標和選中的選單下標相同，則處於啟用狀態部分程式碼： wxml：

<view class="main">
    <scroll-view scroll-y class="category-left">
        <view class="cate-nav-list" wx:for="{{cate_nav_list}}" wx:key="{{item.id}}" data-id="{{item.id}}" data-index="{{index}}"
            bindtap="switchCategory">
            <text class="cate-name {{curIndex===index?'on':''}}">{{item.name}}</text>
        </view>
    </scroll-view>
    <scroll-view class="category-right" scroll-y="{{true}}" scroll-into-view="{{toView}}" scroll-with-animation="true">
        <view class="cate-content">
            <view class="cate-list-content" wx:for="{{detail}}" wx:key="{{item.id}}" id="{{item.id}}">
                <view class="banner">
                    <image src="{{item.banner}}"/>
                </view>
                <view class="header">{{item.cate_name}}</view>
                <view class="cate-list">
                    <view class="cate-item"  wx:for="{{item.cate_list}}" wx:key="{{index}}" wx:for-item="cateList">
                        <image src="{{cateList.item_img}}" />
                        <text>{{cateList.item_name}}</text>
                    </view>
                </view>
            </view>
            
        </view>
    </scroll-view>
</view>
複製程式碼

js:

const app=getApp();

Page({

  /**
   * 頁面的初始資料
   */
  data: {
    cate_nav_list:[
      {name:"新品",id:"new"},
      {name:"手機",id:"phone"},
      {name:"電視",id:"tv"},
      {name:"電腦",id:"laptop"},
      {name:"家電",id:"appliance"},
      {name:"路由",id:"router"},
      {name:"智慧",id:"smart"},
      {name:"兒童",id:"kids"},
      {name:"燈具",id:"lignts"},
      {name:"電源",id:"adapter"},
      {name:"耳機",id:"headset"},
      {name:"音響",id:"voicebox"},
      {name:"生活",id:"life"},
      {name:"服務",id:"service"},
      {name:"米粉卡",id:"card"}
    ],
    curIndex:0,  //初始化當前下標為0
    toView:"new", //預設顯示“新品展示”
    detail:[]
  },
  switchCategory(e){
    const curIndex=e.currentTarget.dataset.index?e.currentTarget.dataset.index:0;  //獲取每個選單的id
    //更新資料
    this.setData({
      toView:e.currentTarget.dataset.id,
      curIndex
    });
  },
  onLoad: function (options) {
    const detail=app.globalData.category; //獲取分類展示資料
    this.setData({
      detail
    });
  }
})
複製程式碼

三、發現頁

頁面結構分析：

裡面展示了一些商品宣傳視訊（當時還是不太想切太多的頁面?）這裡用彈性佈局+video元件就搞定了。這裡是文件

四、商品詳情頁

頁面結構分析：商品詳情頂部由一個swiper組成，中間部分由一些cells組成（weui）點選這裡快速檢視底部是商品的概述及引數配置兩部分組成，這個還是比較簡單的，給兩個元素分別繫結一個布林值來控制誰顯示誰隱藏。

當然，要使用weui必須引入它的樣式檔案,我們在app.wxss裡引入，然後全域性都可以使用了

@import "./lib/weui.wxss";
複製程式碼

嗯，weui的官網和github地址自然少不了。weui官網、weui github官方文件，在github上閱讀程式碼是一個非常有效的學習方式，但是資料夾巢狀太深找個檔案也不容易，這裡奉上github閱讀神器

使用到的weui：請容許我貼一段weui抄來的結構

<view class="weui-cells">
    <view class="weui-cell">
        <view class="weui-cell__bd">
            <view class="title">{{goods.header}}</view>
            <view class="desp">{{goods.description}}</view>
            <view class="meta">{{goods.meta}}</view>
        </view>
    </view>
</view>
複製程式碼

商品詳情頁的顯示

邏輯分析：每個商品通過id來跳轉到相應的詳情頁，但是這個id會在哪裡呢因為先這個詳情頁是通過一個個商品來開啟的，所以在商品詳情頁載入時，可以在 onLoad 中獲取開啟當前頁面所呼叫的 query 引數（是條json資料），因為在showDetail裡只用了id來跳轉，所以options只有id屬性

onLoad: function (options) {
    console.log(options); //{id:"4"}
    const id=options.id; //獲取options裡的id
    const goods=app.globalData.goodsDetail.filter(item=>{
      return item.id==id;  //通過id來篩選顯示對應的商品
    });
    this.setData({
      goods:goods[0] //因為id是唯一的，所以上面篩選出來的陣列只有一條資料，這條資料就是要顯示的商品資料
    });
  }
複製程式碼

商品圖片預覽實現

微信小程式為我們提供了wx.previewImage()方法來實現圖片的預覽，實現方法如下：

previewImage(e){
    const index=e.currentTarget.dataset.index;	//獲取swiper裡的圖片的下標
	const slide=this.data.goods.goods_slides; //獲取商品輪播圖
    const imgList=[]; //定義一個陣列來存放輪播圖的url
	slide.map(item=>{
        imgList.push(item.slide_url); //用js的map方法把圖片的url地址取出來放到陣列裡
    });
	wx.previewImage({
	    current: imgList[index], // 當前顯示圖片的連結，不填則預設為 urls 的第一張
		urls: imgList
	})
  }
複製程式碼

五、商品屬性選擇

頁面結構：整個商品屬性頁的結構是由一些cells組成，所以用weui最合適（插一段：原生的radio真的是很醜，不過weui對它做了改進）一開始想有weui就簡單多了，直接用form表單的bindsubmit處理就可以了，奈何在weui裡使用bindsubmit，取不到radio的值，折騰了很久，還是取不到，但是換成原生的radio竟可以取到！！

這個不行，那就換一種吧，用weui radiogroup裡的bindchange事件吧，雖然繁瑣了些，但是還是能解決問題的。。話不多說，看程式碼（感覺寫了一些很累贅的程式碼。。）

selectVersion(e) {
    const version = e.detail.value;
    const memory = version.split(",")[0];
    const price = version.split(",")[1];
    wx.setStorageSync('memory', memory);
    wx.setStorageSync('price', price);
    this.setData({
      memory,
      price
    });
  },
  selectColor(e) {
    let color = e.detail.value;
    let cover_img=this.data.goods_attrSelect[0].goods_slides[0].slide_url;
    wx.setStorageSync('color', color);
    wx.setStorageSync('cover', cover_img);
    this.setData({
      color,
      cover_img
    });
  },
  colorHasSelected(e) {
    const curcIndex = e.currentTarget.dataset.index ? e.currentTarget.dataset.index : 0;
    console.log(curcIndex);
    this.setData({
      curcIndex
    });
  },
  versionHasSelected(e) {
    const curvIndex = e.currentTarget.dataset.index ? e.currentTarget.dataset.index : 0;
    console.log(curvIndex);
    this.setData({
      curvIndex
    });
  }
複製程式碼

對應商品的屬性頁的跳轉

邏輯分析：在商品詳情頁中，通過當前商品的id跳轉

toSelect(e){
    const id=e.currentTarget.dataset.id;
    wx.navigateTo({
      url:`../selectGoods/selectGoods?id=${id}`
    });
 }
複製程式碼

在商品的屬性選擇頁裡，同樣是通過id篩選顯示不同商品的屬性選擇資訊

onLoad: function (options) {
    const id = options.id;
    console.log(id);
    const goods_attrSelect = app.globalData.goodsDetail.filter(item => {
      return item.id == id;
    });
}
複製程式碼

商品屬性的聯動選擇

既然是商品，沒有屬性選擇怎麼行呢？興致一來二話不說就是寫。但是這裡有一個難點：使用者的選擇多樣性，難道你會把所有使用者可能做出的選擇都列出來嗎？天哪，商品這麼多，這是要累死我嗎?？no，no，no，這種方法不可取。哪還有什麼解決辦法呢？當時一想到的就是用資料快取，嗯，這種方法可行，但是用快取存取使用者選擇的值的話，這裡有一個很大的問題：微信小程式裡的資料快取將data儲存在本地快取中指定的key中，會覆蓋掉原來該key對應的內容，無論是wx.setStorage(非同步介面)還是wx.setStorageSync（同步介面），這樣的話，無論使用者選擇了多少個商品，只要key值一樣，快取資料永遠只有一條！！！我此時的內心是痛苦的。

有什麼方法能讓資料快取不覆蓋原來的值，而是加上去？說實話，這裡卡了我好久。廢話不多說，直接上程式碼

submit(e) {
    const pre_item = wx.getStorageSync('attr_item');
    const temp = {
      'goods_name': wx.getStorageSync('goods_name'),
      'memory': wx.getStorageSync('memory'),
      'price': wx.getStorageSync('price'),
      'color': wx.getStorageSync('color'),
      'select_num': wx.getStorageSync('select_num'),
      'cover': wx.getStorageSync('cover'),
      'selected': false,
      'isTouchMove': false
    }
    wx.setStorageSync('attr_item', [temp, ...pre_item]); //把獲取到的pre_item和temp的資料快取存入attr_item
    wx.showToast({
      title: '已加入購物車',
      icon: 'success',
      duration: 3000,
      success() {
        setTimeout(() => {
          wx.navigateBack({
            url: "../goods/show"
          });
        }, 1000)
      }
    });
  }
複製程式碼

商品數量的加減操作

實現思路：分別繫結一個事件來操作商品數量的加減，最後將使用者選擇的數量設定到資料快取裡。實現程式碼：

 data: {
    select_num: 1  //預設選擇為數量為1
  },
minusCount(e) {    //使用者減操作
    let select_num = this.data.select_num;
    select_num--;
    if (select_num < 1) {
      return;
    }
    this.setData({
      select_num
    });
    wx.setStorageSync('select_num', select_num);
  },
  addCount(e) {     //使用者加操作
    let select_num = this.data.select_num;
    select_num++;
    if (select_num > 5) {
      return;
    }
    this.setData({
      select_num
    });
    wx.setStorageSync('select_num', select_num);
  }
複製程式碼

六、購物車操作

頁面結構分析：購物車列表用一個彈性佈局就搞定。底部的操作欄用固定定位 + 彈性佈局就搞定。

<view wx:if="{{cart_list==''}}">
    <view class="empty-cart">
        <view class="cart-icon">
            <image src="../../assets/icons/cart_empty.png" mode="aspectFill" />
        </view>
        <view class="prompt">購物車還是空的</view>
        <button type="warn" class="btn-warn" style="background: #ff6700;" bindtap="goIndex">到小米商城逛逛</button>
    </view>
</view>
<view wx:else>
    <view class="cart-box">
        <view class="cart-list" wx:for="{{cart_list}}" wx:key="{{index}}">
            <view class="cart-item {{item.isTouchMove? 'touch-move-active': ''}}" bindtouchstart="touchstart" bindtouchmove="touchmove" data-index="{{index}}">
                <view class="cart-content">
                    <icon type="{{item.selected?'success':'circle'}}" class="" color="#ff6700" size="20" bindtap="selectList" data-index="{{index}}"
                    />
                    <image src="{{item.cover}}"
                        mode="aspectFill" />
                    <text class="item-title">{{item.goods_name}} {{item.memory}}</text>
                    <text class="item-num">{{item.color}}</text>
                    <text class="item-price">{{item.select_num}}×</text>
                    <text class="item-price">{{item.price}}</text>
                    <view class="del-cart-item" catchtap="delCartItem">刪除</view>
                </view>
            </view>
        </view>
    </view>
    <view class="user-operation">
        <view class="select-all">
            <icon wx:if="{{selectAllStatus}}" type="success" class="total-select" color="#ff6700" bindtap="selectAll" />
            <icon wx:else type="circle" class="total-select" color="#ff6700" size="20" bindtap="selectAll" />
            <text>全選</text>
        </view>
        <view class="total-price">合計：
            <text>{{totalPrice}}元</text>
        </view>
        <view class="btn-primary pay" bindtap="checkOut">結算</view>
    </view>
</view>
複製程式碼

底部操作欄樣式

.user-operation{
    width: 100%;
    height: 100rpx;
    line-height: 100rpx;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    left: 0;
    bottom: 0;
}
.select-all,.total-price,.btn-primary.pay{
    flex: 1;  //三個盒子等分所有裝置寬度
    font-size: 12pt;
    text-align: center;
}
複製程式碼

加入購物車操作

邏輯分析：之前解決資料快取問題，是為加入購物車功能做鋪墊。在商品屬性的級聯選擇中，已經獲得了使用者的所有要加入購物車的資料，這時候，把資料取出來在繫結到購物車頁面上就可以了。

實現程式碼：

data: {
    cart_list: [],   //初始化一個空陣列用來存放購物車列表
  },
  goIndex() {  //如果購物車為空，則讓使用者去首頁
    wx.switchTab({
      url: "../index/index"
    })
 },
onShow: function () {
    const attr_item = wx.getStorageSync('attr_item'); //獲取資料快取裡將要加入購物車的資料
    let cart_list = this.data.cart_list;
    cart_list = [...attr_item]; //把快取裡的資料加到購物車列表裡
    const select_num = cart_list.map(item => { //獲取使用者每次選擇的數量
      return item.select_num;
    })
    let goods_sum=select_num.reduce(function(prev,cur){
       return prev+cur;  //用es6的reduce()方法把使用者每次選擇的數量相加
    });
    wx.setStorageSync('goods_sum', goods_sum);  //再次存入快取
    this.setData({   //更新購物車列表
      cart_list
    });
  }
複製程式碼

購物車全選、反選、計算總價功能

這是一個很經典的問題，凡事涉及到購物車的操作，這個功能都是少不了的。

data: {
    cart_list: [],
    totalPrice: 0,
  },
selectList(e) {
    let selectAllStatus = this.data.selectAllStatus;
    const index = e.currentTarget.dataset.index;
    let cart_list = this.data.cart_list;
    // console.log(cart_list[index].selected);
    const selected = cart_list[index].selected;
    cart_list[index].selected = !selected;
    console.log(selected);
    //購物車列表裡的條目只要有一個取消，全選就取消
    const symbol = cart_list.some(cart => {  //這裡用es6的some()函式
      return cart.selected === false;
    });
    if (symbol) {  //如果找到false，全選就取消
      this.data.selectAllStatus = false;
    } else {
      this.data.selectAllStatus = true;
    }
    this.setData({  //更新資料
      cart_list,
      selectAllStatus: this.data.selectAllStatus
    });
    this.getTotalPrice();
  },
  getTotalPrice() {  //定義一個計算總價的方法
    let cart_list = this.data.cart_list;
    let totalPrice = 0;
    for (let i = 0; i < cart_list.length; i++) {
      if (cart_list[i].selected) {
        totalPrice += parseInt(cart_list[i].select_num) * parseInt(cart_list[i].price);  //注意這裡要用parseInt()把數量和價格取出來
      }
    }
    //更新總價
    this.setData({
      totalPrice
    });
  },
  selectAll(e) {
    let selectAllStatus = this.data.selectAllStatus;
    selectAllStatus = !selectAllStatus;
    let cart_list = this.data.cart_list;
    for (let i = 0; i < cart_list.length; i++) {
      cart_list[i].selected = selectAllStatus; //全選為true，則所有購物車列表為true，全選為false，則所有購物車列表為false
    }
    //更新資料
    this.setData({
      cart_list,
      selectAllStatus
    });
    this.getTotalPrice();
  }
複製程式碼

刪除購物車操作

data: {
    startX: 0, //開始座標
    startY: 0,
  },
//滑動事件處理
  touchmove(e) {
    let
      index = e.currentTarget.dataset.index, //獲取當前索引
      startX = this.data.startX, //獲取開始X座標
      startY = this.data.startY, //獲取開始Y座標
      touchMoveX = e.changedTouches[0].clientX, //滑動變化座標
      touchMoveY = e.changedTouches[0].clientY, //滑動變化座標
      //獲取滑動角度
      angle = this.getAngle({
        X: startX,
        Y: startY
      }, {
        X: touchMoveX,
        Y: touchMoveY
      });
    this.data.cart_list.forEach(function (v, i) {
      v.isTouchMove = false
      
      if (Math.abs(angle) > 30) return;//使用者滑動超過30度，刪除按鈕就不出來 
      if (i == index) {
        if (touchMoveX > startX) //右滑
          v.isTouchMove = false
        else //左滑
          v.isTouchMove = true
      }
    })
    //更新資料
    this.setData({
      cart_list: this.data.cart_list
    })
  },
  getAngle(start, end) {
    let X = end.X - start.X,
      Y = end.Y - start.Y
    //返回角度 /Math.atan()返回數字的反正切值
    return 360 * Math.atan(Y / X) / (2 * Math.PI);
  },
  delCartItem(e) {
    const index=e.currentTarget.dataset.index;  //獲取購物車要刪除商品的下標
    this.data.cart_list.splice(index, 1);
    wx.clearStorageSync("select_num");
    this.setData({
      cart_list: this.data.cart_list
    });
  }
複製程式碼

七、商品的匹配及搜尋功能實現

頁面結構分析：先把搜尋提示框固定定位到搜尋欄下方，如果搜尋到商品，則用商品展示模版輸出該資料

<import src="../../templates/goods_list/goods_list.wxml" />
<view class="weui-search-bar">
    <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" class="weui-search-bar__input" placeholder="搜尋" placeholder-class="plac" bindinput="searchInput" />
        </view>
    </view>
    <view class="weui-search-bar__cancel-btn" bindtap="search">搜尋</view>
</view>
<view class="search-list {{is_hidden?'hidden':''}}">
    <block wx:for="{{search_list}}" wx:key="{{item.id}}">
        <text class="search-item" bindtap="showItemDetail" data-header="{{item.header}}">{{item.header}}</text>
    </block>
</view>
<template is="goods_list" data="{{goods_list}}"></template>
複製程式碼

邏輯分析：我的實現思路是：

如果匹配到商品，搜尋框下方就要讓搜尋提示框顯示；
當使用者輸入搜尋的內容為空，搜尋提示框隱藏
使用者點選搜尋按鈕，則把所有匹配到的商品列表顯示出來，注意要模糊搜尋，不區分大小寫，提高使用者體驗；
使用者點選匹配到的商品條目，則搜尋該商品

實現方法：

filter()+indexOf()+toLowerCase();

程式碼如下：

import showDetail from "../../modules/showDetail";
const app=getApp();

Page({

  /**
   * 頁面的初始資料
   */
  data: {
    goods_list:[],
    search_list:[],
    is_hidden:true
  },
  searchInput(e){
    let search_list=this.getList(e.detail.value); //獲取使用者的輸入值
    if(e.detail.value==""){ //如果使用者沒輸入，搜尋提示列表置空，並且讓搜尋提示框隱藏
      search_list=[]; 
      this.data.is_hidden=true;
    }else{
      this.data.is_hidden=false;
    } 
    //更新資料
    this.setData({
      search_list,
      is_hidden:this.data.is_hidden
    });
  },
  search(e){
     //按關鍵字篩選商品，如果關鍵字匹配到商品名稱，則返回該商品列表
    const keywords=wx.getStorageSync('keywords');
    wx.showLoading({
      title: '請稍等',
    });
    setTimeout(()=>{
      this.setData({
        goods_list:this.getList(keywords),
        is_hidden:true  //如果搜尋到了商品，就讓搜尋框隱藏
      });
      wx.hideLoading();
    },500);
  },
  showDetail,
  showItemDetail(e){
    //按關鍵字篩選商品，如果關鍵字匹配到商品名稱，則返回該商品列表
      const header=e.currentTarget.dataset.header.toLowerCase(); 
      console.log(header);
      wx.showLoading({
        title: '請稍等',
      })
      setTimeout(()=>{
        wx.hideLoading()
        this.setData({
          goods_list:this.getList(header),
          is_hidden:true
        });
      },500)
  },
 /**
   * attr:需要匹配篩選的資料
   */
  getList(attr){  //定義一個獲取商品標題的方法
    return app.globalData.phone.goods_list.filter(item=>{
      return item.header.toString().toLowerCase().indexOf(attr)>-1;
    });
  }
})
複製程式碼

八、收貨地址頁

實現思路：用資料快取和資料繫結來控制input的disabled實現實時編輯程式碼如下：

// pages/address/address.js
Page({
  data: {
    receiverName: "",
    mobile: "",
    addressDetail: "",
    postCode: "",
    isDisabled: false,
    isComplete: false,
    buttonTitle: "儲存"
  },
  formSubmit(e) {
    const addrInfo = e.detail.value;
    let {receiverName,mobile,addressDetail,postCode}=addrInfo; //把data裡的資料結構出來
    if(receiverName==""||mobile==""||addressDetail==""||postCode==""){
      this.data.isComplete=false;
      wx.showModal({
        title:"提示",
        content:"請完善資訊",
        showCancel:false
      }); 
    }else if(!/^[1][3,4,5,7,8]\d{9}$/.test(mobile)){ //判斷手機號格式
      wx.showModal({
        title:"提示",
        content:"手機號格式不規範",
        showCancel:false
      }); 
    }else if(!/^[0-9]{6}$/.test(postCode)){
      wx.showModal({
        title:"提示",
        content:"郵政編碼不規範",
        showCancel:false
      }); 
    }else{
      this.data.isComplete=true;
      wx.setStorageSync('addrInfo', addrInfo);
      
    }
    this.setData({
        isDisabled: true,
        isComplete: this.data.isComplete
      });
  },
  updateAddr(e){
    this.setData({
      isDisabled:false,
      isComplete:false,
      buttonTitle: "儲存"
    });
  },
  /**
   * 生命週期函式--監聽頁面載入
   */
  onLoad: function (options) {
    
    let addrInfo=wx.getStorageSync("addrInfo");
    console.log(addrInfo);
    let {receiverName,mobile,addressDetail,postCode}=addrInfo;
    this.setData({
      receiverName,
      mobile,
      addressDetail,
      postCode,
      isDisabled: true,
      isComplete:true,
      buttonTitle: "修改"
    });
  }
})
複製程式碼

總結：

在做這個專案的時候遇到了很多問題，中途因為一個問題都要卡很久，但是現在想想，經歷過肯定是能學到東西的，之前對於一些東西想都不敢想，但是沒關係，只要你想做，那就去做吧，去網上查資料，多去社群問問大牛，你總是能學到東西的。對於這個專案，很多功能都還沒完善，比如商品評論，生成訂單等等，但是我會不定時的更新?，有時間的話，我會用mpvue或者wepy改寫，又能學到新技術?

最後：

碼字不易，如果大家喜歡的話，就star一下吧,專案地址，我會不定時更新的哦。專案還存在很多缺陷，希望大家提出寶貴建議?

web前端入門到實戰：擼兩個天氣小程式
2019-11-03
Web前端
擼一個微信天氣小程式
2019-04-01
半小時擼一個抽獎程式
2019-02-03
擼一個小程式前置授權元件
2018-07-31
元件
一週擼一個 GitHub 微信小程式
2018-11-04
Github微信小程式
兩週擼一個掘金微信小程式
2018-08-20
微信小程式
小程式模板太少了，所以我擼了一個
2020-02-18
一起來擼個簡易的小程式框架
2020-01-02
框架
擼個微信小程式的省市區選擇器
2019-03-04
微信小程式
有沒得老闆給活幹，擼擼程式碼，義工!!！
2021-07-19
兩天擼一個天氣應用微信小程式
2018-07-02
微信小程式
快手本地生活小程式：快手吃喝玩樂榜，搶佔先機就是商機！
2022-01-25
你還沒有擼一個包扔到npm上？
2019-02-16
NPM
小程式這件事擼起袖子加油幹
2018-06-11
用純 JavaScript 擼一個 MVC 程式
2019-08-08
JavaScriptMVC
Project Loom搶先體驗版
2020-12-02
ProjectOOM
搶先學鴻蒙（HarmonyOS）2.0，你就是下一個大咖！
2020-09-16
鴻蒙
米讀小說
2019-02-03
極米、當貝、海信，爭搶智慧投影蛋糕
2022-05-24
搶先體驗 Ubuntu 22.04 Jammy Jellyfish
2022-04-10
Ubuntu
Vue 3.0 全家桶搶先體驗
2021-09-09
Vue
程式碼重構：類重構的 8 個小技巧
2021-10-12
手擼優先佇列——二叉堆
2024-10-28
佇列
從0到1上線一個微信小程式
2019-03-01
微信小程式
搶先微軟，Google版Copilot上線！
2023-05-11
微軟Go
天貓雙11“搶先購”開搶數億“尾款人”下單
2022-02-28
利用 Laravel 花 2 小時擼一個 RSS 生成器
2018-04-07
Laravel
微信小程式搶紅包高併發設計
2023-03-06
微信小程式
小程式-日曆簽到
2020-02-25
JDK 20 搶先體驗發行說明
2022-11-19
JDK
Project Loom EA搶先體驗版本釋出
2022-04-07
ProjectOOM
虛幻引擎5推出搶先體驗版
2021-05-27
JDK 18 搶先體驗版可以使用
2021-07-13
JDK
手擼一個ingress controller來打通dubbo+k8s網路
2021-11-16
ControllerK8S
中午12:00準點開搶武漢消費券！盯緊這個微信小程式
2020-04-19
微信小程式
真香，擼一個SpringBoot線上程式碼修改器
2020-06-08
Spring Boot
巧用社群拼團小程式，搶佔萬億社群精準流量
2022-03-21
有沒有興趣一起用 Go 手擼個簡版 Redis
2019-07-22
GoRedis