摘要:輪播圖區(qū)域這里微信小程序給我們提供了組件,直接用就可以了。但是需要注意的是在微信小程序里,強(qiáng)烈推薦使用彈性布局首頁商品展示區(qū)這里的商品都是分塊展示,很有規(guī)律,因此整個商品展示都可以直接用遍歷出來。
前言
小程序發(fā)布以來,憑借無需安裝、用完即走、觸手可及、無需注冊、無需登錄、以及社交裂變等多個優(yōu)勢,一路高歌,變得愈來愈火爆,它革命性的降低了移動應(yīng)用的開發(fā)成本,也正好迎合了用戶的使用應(yīng)用的習(xí)慣。小程序魅力如此之大,作為一枚程序猿,我想怎么不自己做一個呢?話不多說,咱擼起袖子就是干
準(zhǔn)備工作前端開發(fā)利器:VSCode
調(diào)試:微信開發(fā)者工具
自己Mock的一些數(shù)據(jù)
微信開發(fā)文檔
項(xiàng)目介紹:小米商城實(shí)戰(zhàn) 項(xiàng)目目錄結(jié)構(gòu)├── assets 用到的一些圖標(biāo)文件 ├── lib ├── weui.wxss 引用了weui ├── modules ├── showDetail.js 跳轉(zhuǎn)展示商品詳情的公共js文件 ├── showcDetail.js ├── pages 項(xiàng)目的各個頁面 ├── index 商城首頁 ├── categories 商品分類頁 ├── discovery 發(fā)現(xiàn)頁 ├── channel 商品頻道目錄 ├── phone 手機(jī)頻道 ├── tv 電視頻道 ├── computer 電腦頻道 ├── cart 購物車 ├── mine 個人信息頁 ├── goods 商品詳情頁 ├── selectGoods 商品屬性選擇頁 ├── search 商品搜索頁 ├── addr 收貨地址頁 ├── template 使用到的模版文件 ├── slide 輪播圖模版 ├── goods_list 商品展示模版 ├── cover 商品展示模版 ├── util 使用到的工具類 ├── mock.js 項(xiàng)目中使用到的一些數(shù)據(jù) ├── app.js 項(xiàng)目邏輯 ├── app.wxss 項(xiàng)目公共樣式表 └── app.json 項(xiàng)目公共設(shè)置功能的展示與實(shí)現(xiàn) 一、商城首頁
頁面結(jié)構(gòu)分析:
頂部搜索條
這里看上去是一個搜索框,但其實(shí),它要實(shí)現(xiàn)的僅僅是個頁面跳轉(zhuǎn)功能,只要把它的disabled設(shè)置為true就可以了,另外要想讓它placeholder占位符居中顯示的話,微信小程序提供了一個placeholder-class的屬性,通過它可以改變placeholder的樣式。
輪播圖區(qū)域
這里微信小程序給我們提供了swiper組件,直接用就可以了。但是輪播圖在各個頁面都可能存在,只是其中所顯示的圖片不一樣而已,所以使用組件化思想,把它寫成一個模版,哪里要使用,就引入這個模版即可。
使用時,這樣引入
商城導(dǎo)航區(qū)、活動區(qū)
這里只是個簡單的布局,就不贅述了。但是需要注意的是在微信小程序里,強(qiáng)烈推薦使用彈性布局
首頁商品展示區(qū)
這里的商品都是分塊展示,很有規(guī)律,因此整個商品展示都可以直接用wx:for遍歷出來。
wxml:
{{product.header}} {{product.description}} {{product.meta}} {{product.discount}}
這里有個細(xì)節(jié),每個版塊里的商品會分成“新品”、“立減”(即有折扣)、“無折扣”三種,著該怎么去做呢?這里我用了一個巧妙的方法:給每個商品的class里綁定布爾值is_new和on_sale通過三元運(yùn)算符判斷是否給該商品掛載一個類名,再使用偽元素給該商品打上“新品”或“立減”的標(biāo)簽如下:
wxml:
wxss
.goods-img.new:before{ /*新品標(biāo)簽樣式*/ 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{ /*立減標(biāo)簽樣式*/ position: absolute; left: 0; top: 0; width: 100rpx; height: 40rpx; line-height: 40rpx; content: "立減"; font-size: 9pt; color: #fff; text-align: center; background: #ec6055; }
邏輯分析:
首頁只是些商品,所以邏輯層只要根據(jù)每個商品的id來跳到對應(yīng)商品的詳情頁即可,很顯然這個方法在多個頁面都要使用的,所以使用模塊化思想,創(chuàng)建一個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";二、商品分類頁
頁面結(jié)構(gòu)分析:
商品分類頁分為左側(cè)的商品分類菜單和右邊的商品分類展示區(qū),
用兩個scroll-view就可以了,左右兩邊都設(shè)置scroll-y讓它們垂直方向滾動,此外,scroll-view還有一個scroll-into-view屬性能讓我們實(shí)現(xiàn)類似a標(biāo)簽的錨點(diǎn)功能,scroll-into-view的值是某個子元素的id,但是此處有一個小坑,這個id不能以數(shù)字開頭
當(dāng)時查了一下文檔就開做了,于是乎給左側(cè)菜單取了些數(shù)字id,現(xiàn)在想起來當(dāng)時我太自以為然了 ,此外如果內(nèi)容太多,是會產(chǎn)生滾動條的,如圖:
這樣看起來也太丑了。。
**解決辦法:給全局樣式加入下面的樣式
//隱藏滾動條 ::-webkit-scrollbar{ height: 0; width: 0; color: transparent; }
嗯,beautiful ??!
商品分類功能邏輯分析:給頁面注冊個curIndex(當(dāng)前選中菜單的下標(biāo)),如果當(dāng)前下標(biāo)和選中的菜單下標(biāo)相同,則處于激活狀態(tài)
部分代碼:
wxml:
{{item.name}} {{item.cate_name}} {{cateList.item_name}}
js:
const app=getApp(); Page({ /** * 頁面的初始數(shù)據(jù) */ data: { cate_nav_list:[ {name:"新品",id:"new"}, {name:"手機(jī)",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:"耳機(jī)",id:"headset"}, {name:"音箱",id:"voicebox"}, {name:"生活",id:"life"}, {name:"服務(wù)",id:"service"}, {name:"米粉卡",id:"card"} ], curIndex:0, //初始化當(dāng)前下標(biāo)為0 toView:"new", //默認(rèn)顯示“新品展示” detail:[] }, switchCategory(e){ const curIndex=e.currentTarget.dataset.index?e.currentTarget.dataset.index:0; //獲取每個菜單的id //更新數(shù)據(jù) this.setData({ toView:e.currentTarget.dataset.id, curIndex }); }, onLoad: function (options) { const detail=app.globalData.category; //獲取分類展示數(shù)據(jù) this.setData({ detail }); } })三、發(fā)現(xiàn)頁
頁面結(jié)構(gòu)分析:
里面展示了一些商品宣傳視頻(當(dāng)時還是不太想切太多的頁面
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/95371.html
摘要:輪播圖區(qū)域這里微信小程序給我們提供了組件,直接用就可以了。但是需要注意的是在微信小程序里,強(qiáng)烈推薦使用彈性布局首頁商品展示區(qū)這里的商品都是分塊展示,很有規(guī)律,因此整個商品展示都可以直接用遍歷出來。 showImg(https://user-gold-cdn.xitu.io/2018/6/11/163ed74a0fff9596?w=1262&h=676&f=jpeg&s=174374);...
摘要:觀察者模式涉及的角色主題一對多中的一,持有數(shù)據(jù),當(dāng)數(shù)據(jù)更新時,通知已注冊的觀察者觀察者一對多中的多,接收主題數(shù)據(jù)做出響應(yīng)舉個栗子一位媽媽主題有兩個孩子,取名為小愛和小冰觀察者。 概念 觀察者模式:定義了對象之間的一對多依賴,這樣一來,當(dāng)一個對象狀態(tài)改變時,他的所有依賴者都會收到通知并自動更新。 showImg(https://segmentfault.com/img/bVbf0or?w...
摘要:這個是我們約定的額外的配置這個字段下的數(shù)據(jù)會被填充到頂部欄的統(tǒng)一配置美團(tuán)汽車票同時,這個時候,我們會根據(jù)的頁面數(shù)據(jù),自動填充到中的字段。 美團(tuán)小程序框架mpvue(花名:沒朋友)蹲坑指南 第一次接觸小程序大概是17年初,當(dāng)時小程序剛剛內(nèi)側(cè),當(dāng)時就被各種限制折騰的死去活來的,單向綁定,沒有promise,請求數(shù)限制,包大小限制,各種反人類,...反正我是感受到了滿滿的惡意.最近接到一個工...
摘要:二冒泡排序算法作為這一系列的第一部分,主要講解排序算法。直到隊列全部排好為止。到這里,我想你應(yīng)該明白了冒泡排序的思想了。 一、說在前面 一直想寫一些簡單易懂的文章,因?yàn)槠綍r看的很多的書籍或者文章都是看著很難受的感覺,當(dāng)然,這并不是說書籍寫的不好,只是說對于一些沒有太多基礎(chǔ)或者基礎(chǔ)不是很好的來說,相對來說還是比較難以理解的。 這個系列主要是寫一些簡單易懂的數(shù)據(jù)結(jié)構(gòu)與算法的文章,同時也是幫...
閱讀 1519·2021-11-24 09:38
閱讀 3372·2021-11-18 10:02
閱讀 3259·2021-09-22 15:29
閱讀 2942·2021-09-22 15:15
閱讀 1043·2021-09-13 10:25
閱讀 1850·2021-08-17 10:13
閱讀 1989·2021-08-04 11:13
閱讀 1978·2019-08-30 15:54