商城系統(tǒng) 注冊

微信小程序電商模板,微信電商小程序開發(fā)

2020-09-27|HiShop
導(dǎo)讀:微信小程序電商模板為大家介紹一般的電商小程序都有哪些模塊,以及這些模塊要如何開發(fā)制作出來。...

微信小程序電商模板為大家介紹一般的電商小程序都有哪些模塊,以及這些模塊要如何開發(fā)制作出來。

微信小程序電商模板,微信電商小程序開發(fā)

電商底部導(dǎo)航欄的制作

我想大家對電商一定不陌生,一般電商的底部導(dǎo)航欄有以下幾個(gè)首頁、分類、購物車、個(gè)人中心。所以我們按照這個(gè)來做吧,說到底部導(dǎo)航,不知道你還記得在 微信小程序入門篇(一)中app.json的作用,如果不記得,請翻看一下,app.json是用來配置page路徑以及導(dǎo)航欄屬性的,那我們要做首頁、分類、購物車、個(gè)人中心界面就要在page也添加這幾個(gè)界面,所以在app.json的page里添加如下代碼,寫入page路徑,系統(tǒng)會自動幫你創(chuàng)建界面的

 

  "pages":[
    "pages/home/home",
    "pages/classify/classify",  
    "pages/cart/cart",
    "pages/mine/mine",
    "pages/index/index"
  ],

好,既然添加了四個(gè)界面,那我們要怎么做底部導(dǎo)航欄吶,今天給app.json再添加一個(gè)屬性,就是可以在app.json里配置導(dǎo)航欄,將下面代碼添加到app.json里面

 "tabBar": {
    "color": "#858585",
    "selectedColor": "#f0145a",
    "backgroundColor": "#ffffff",
    "borderStyle": "#000",
    "list": [
      {
        "pagePath": "pages/home/home",
        "iconPath": "images/bottomNav/home.png",
        "selectedIconPath": "images/bottomNav/home_select.png",
        "text": "首頁"
      },
      {
        "pagePath": "pages/classify/classify",
        "iconPath": "images/bottomNav/classify.png",
        "selectedIconPath": "images/bottomNav/classify_select.png",
        "text": "分類"
      },
      {
        "pagePath": "pages/cart/cart",
        "iconPath": "images/bottomNav/cart.png",
        "selectedIconPath": "images/bottomNav/cart_select.png",
        "text": "購物車"
      },
      {
        "pagePath": "pages/mine/mine",
        "iconPath": "images/bottomNav/mine.png",
        "selectedIconPath": "images/bottomNav/mine_select.png",
        "text": "我的"
      }
    ]
  }

tabBar系統(tǒng)自帶字段,不可改,添加這個(gè)字段就是告訴系統(tǒng)你要添加導(dǎo)航欄,color、selectedColor、backgroundColor從字面意思也字段,分別對應(yīng)的屬性是默認(rèn)字體顏色、勾選字體顏色、背景顏色。著重說一下borderStyle,這個(gè)的定義底部導(dǎo)航欄與界面的邊界線,屬性有點(diǎn)特殊,特殊在如果你不想要這個(gè)分界線,可以把屬性設(shè)置為white,剩下的不管你寫入的是什么,系統(tǒng)都理解為要添加這條分界線,不信你可以試試。list屬性自然是設(shè)置對應(yīng)導(dǎo)航欄的界面啦,

  • pagePath:頁面路徑,就是你寫在page里的路徑
  • iconPath:默認(rèn)導(dǎo)航欄圖片路徑
  • selectedIconPath:勾選圖片的路徑
  • text:導(dǎo)航欄名字

這里要說的是,圖片路徑,一定要寫對,不然找不到圖片就顯示不出來,這里給大家提供我的導(dǎo)航欄圖片—提取碼:8zwe 大家可以根據(jù)我的圖片路徑創(chuàng)建對應(yīng)的文件夾,如下圖

微信小程序電商模板,微信電商小程序開發(fā)

需要注意的:

  • 添加tabBar的時(shí)候別忘記別忘記上面有一個(gè)逗號,這個(gè)是用來區(qū)分每個(gè)屬性的,所以你每添加一個(gè)屬性都要用逗號分隔開來,這點(diǎn)要注意,不然會報(bào)錯(cuò),這就是我把標(biāo)點(diǎn)去掉的錯(cuò)誤日志,一般報(bào)出錯(cuò)誤日志Expecting ‘EOF’ XXXXXXXXX,got STRING都是語法錯(cuò)誤,所以要仔細(xì)檢查看看哪里少寫了東西。
    微信小程序電商模板,微信電商小程序開發(fā)
  • 還有就是在.json文件里是不可以寫注釋的,我原本想添加一點(diǎn)注釋方便讀者閱讀,然而會出現(xiàn)下面錯(cuò)誤信息,解決辦法很簡單,把注釋刪除就可以啦
    微信小程序電商模板,微信電商小程序開發(fā)

舉一反三

  1. 我們創(chuàng)建了四個(gè)導(dǎo)航欄,那么如果我想再添加兩個(gè)導(dǎo)航欄可以嗎?
    你也許覺得很簡單,試著去在list列表里添加兩個(gè)了吧,我也是這么做的,但是出問題啦。系統(tǒng)會報(bào)錯(cuò),這回知道了吧,最多只能是五個(gè),沒辦法,誰讓微信是老大,人家定最多五個(gè)那就只能最多五個(gè)嘍!
    微信小程序電商模板,微信電商小程序開發(fā)
  2. 不知道你有沒有注意到,導(dǎo)航欄默認(rèn)首頁勾選為紅色,那么我想要默認(rèn)勾選分類為紅色吶,要怎么辦?
    這個(gè)有點(diǎn)難度了吧,我剛開始想的是在tabBar屬性把list里的第一個(gè)home屬性和classify屬性換一下應(yīng)該就可以解決,然而并不是這樣的,因?yàn)闆]有效果,后來也是一次誤打誤撞給發(fā)現(xiàn)的,我給你點(diǎn)小提示,有沒有注意到,pages的第一個(gè)路徑是什么pages/home/home,沒錯(cuò),就是它,如果想要分類classify作為默認(rèn)的勾選項(xiàng),你只需要在pages屬性把home的路徑和classify路徑換一下,保存,重新編譯一下,你要的效果就出來了,這里可以總結(jié)的一點(diǎn)就是,tabBar是到page里的第一行路徑作為默認(rèn)勾選項(xiàng)的。

電商頂部導(dǎo)航欄制作

既然講了導(dǎo)航欄,干脆今天多講解一點(diǎn),接著教教大家頂部導(dǎo)航欄怎么制作,先上效果圖

微信小程序電商模板,微信電商小程序開發(fā)
這個(gè)導(dǎo)航欄可不像底部導(dǎo)航欄啦,因?yàn)樗募墑e比較低,是頁面級別的導(dǎo)航欄,所以要寫在頁面里,你想要在哪個(gè)頁面加入頂部導(dǎo)航欄就在哪個(gè)頁面里添加如下代碼,這里以首頁的界面為例:
home.wxss

/* pages/home/home.wxss */
page{  
  display: flex;  
  flex-direction: column;  
  height: 100%;  
}  
.navbar{  
  flex: none;  
  display: flex;  
  background: #fff;  
}  
.navbar .item{  
  position: relative;  
  flex: auto;  
  text-align: center;  
  line-height: 80rpx;  
  font-size:14px;
}  
/* 頂部導(dǎo)航字體顏色 */
.navbar .item.active{  
  color: #f0145a;  
}  
/* 頂部指示條屬性 */
.navbar .item.active:after{  
  content: "";  
  display: block;  
  position: absolute;  
  bottom: 0;  
  left: 0;  
  right: 0;  
  height: 6rpx;  
  background: #f0145a;  
} 

home.wxml

<!--導(dǎo)航條-->  
<view class="navbar">  
  <text wx:for="{{navbar}}" data-idx="{{index}}" class="item {{currentTab==index ? 'active' : ''}}" wx:key="unique" bindtap="navbarTap">{{item}}</text>  
</view>  

在home.wxml里面bindtap字段我們已經(jīng)講解過啦,是事件監(jiān)聽的標(biāo)識符,事件名稱叫“navbarTap”可以到home.js里查找到這個(gè)事件wx:for這個(gè)字段重點(diǎn)講解,在組件上使用wx:for控制屬性綁定一個(gè)數(shù)組,即可使用數(shù)組中各項(xiàng)的數(shù)據(jù)重復(fù)渲染該組件。默認(rèn)數(shù)組的當(dāng)前項(xiàng)的下標(biāo)變量名默認(rèn)為index,數(shù)組當(dāng)前項(xiàng)的變量名默認(rèn)為item,這是官方解釋,說白了就是item默認(rèn)叫做變量的值,index表示第幾個(gè)變量的值,還不太明白請看這個(gè) 微信 wx:for 的講解

  • * wx:for=”{{navbar}}”* 意思是虛幻navbar的數(shù)組數(shù)據(jù)
  • {{item}} 這里面是navbar數(shù)組里面的值,如護(hù)膚、彩妝等值
  • wx:key=”unique” 來指定列表中項(xiàng)目的唯一的標(biāo)識符
  • * data-idx=”{{index}}” *存儲一些數(shù)據(jù)供home.js里調(diào)用,這里data-xxx,xxx就是你給home.js里提供的數(shù)據(jù)關(guān)鍵詞,home.js通過獲取xxx關(guān)鍵詞來獲取xxx里面的數(shù)據(jù)

home.js

// pages/home/home.js
var app = getApp()
Page({
  data: {
    navbar: ['護(hù)膚', '彩妝', '香水','個(gè)人護(hù)理'],
    currentTab: 0,
  },

  // 導(dǎo)航切換監(jiān)聽
  navbarTap: function (e) {
    console.debug(e);
    this.setData({
      currentTab: e.currentTarget.dataset.idx
    })
  },

}) 

home.js,這里讀過微信小程序入門篇(二)都知道,page頁面里.js一般是放data數(shù)據(jù)和事件監(jiān)聽的,這里data有一個(gè)navbar導(dǎo)航欄數(shù)據(jù),還有一個(gè)記錄當(dāng)前位置的currentTab,字段可以自由命名,賦值的時(shí)候?qū)?yīng)上就好,

  • navbarTap 記得在home.wxml里面data-idx屬性嗎,在這里用到,currentTab: e.currentTarget.dataset.idx 把當(dāng)前用戶選擇的Tab傳給currentTab里,為了驗(yàn)證一下結(jié)果,我在這里面加入了一個(gè)輸出日志console.debug(e);,可以在控制臺上看輸出的日志,我選擇點(diǎn)擊彩妝,輸出臺的數(shù)據(jù)idx:1剛好是彩妝的位置。

微信小程序電商模板,微信電商小程序開發(fā)

 

電話咨詢 預(yù)約演示 0元開店