**在項目根目錄中新建.gitignore忽略文件,并配置如下:

忽略 node_modules

/node_modules
/unpackage/dist**

添加頁面

新建頁面,而后選擇scss模板;即可在pages.json看到所添加的頁面

配置tabBar效果

配置完成后,要將默認的tabBar的index首頁刪掉

修改導航條樣式

在pages.json全局變量中可以設置navigationBarTitleText,也可以在頁面設置特有的navigationBarTitleText標題

發起網絡請求

1.想要發送網絡請求,需要向將第三方包導入(這是發起網絡請求的一種“設備”;)
2.而后將設備導入配置文件,掛載到頂級父類uni.上(就如同是這個第三方包成為了uni下的包,可供使用)
3.每次需要使用,就創建一個它的對象,只不過創建的形式與java不同

需要導入第三方包,項目命令行安裝npm install @escook/request-miniprogram;而后再主入口main.js中導入網絡請求的包;
把$http掛載到頂級對象uni上,之后我們就可以在每個頁面上基于uni.&http發起網絡請求了;支持請求的方法:

攔截器分為
1.請求攔截器:每次發起請求時出現的效果
2.響應攔截器:每次請求完畢之后,關閉攔截效果(手動關閉)

請求輪播圖數據

1.在data中定義輪播圖的數組
2.在onLoad生命周期函數中調用獲取輪播圖數據的方法(每次加載頁面是就要同時加載輪播圖,這個函數時機比較合適)
3.在methods中定義獲取倫比圖數據的方法(在vue中所有的方法需要定義在methods節點中)
請求根路徑:https://www.uinav.com

渲染輪播圖的UI結構

在HB中,data和style等都在同一個配置文件中,可以直接配置屬性

配置分包

1.在項目根目錄中,創建分包的根目錄,命名為 subpkg
2.在pages.json中,和pages節點平級的位置聲明subPackages節點,用來定義分包相關的結構
3.在subpkg目錄上鼠標右鍵,點擊新建頁面選項,并填寫頁面的相關信息

帶年紀輪播圖,跳轉詳情頁

1.將view組件修改為navigator組件
2.傳遞動態綁定url,注意,:屬性,代表這個屬性值是動態綁定

注意在url中傳參方式以及動態傳參的方式傳參方式,以及動態傳參的方式

封裝uni.$showMsg()的方法

這就相當于java中重復的行為代碼,為了節省代碼量,而將其書寫為方法;每次需要時,就進行調用;
封裝的方式就是掛載到頂級父類uni上
步驟:
1.在main.js中,為uni對象掛在自定義的$showMsg()方法,這個方法就指向一個function()
2.今后需要用到這個方法,就直接調用$showMsg()

為什么相應失敗后,要手動設置提示框呢?因為發起請求攔截器和響應請求攔截器都屬于請求數據的成功完成和結束,這是因果,首尾呼應;然而,請求失敗是單獨的情況;所以在不同頁面每次失敗都要手動書寫;進而我們將這個行為封裝起來
自定義方法非常靈活;調用的時候,你往里面直接傳個參數,那么輸出的參數就會以你調用時輸入的為準;實現java中的重載函數

首頁的分類導航區域

1.定義數據(與上面獲取輪播圖數據一樣)
2.在onLoad中調用獲取數據的方法
3.在methods中定義獲取數據的方法
css標簽距離目標標簽太遠跨度比較大,我們可以利用分屏,來便于書寫

實現點擊第一個分類導航實現頁面的跳轉

1.為nav-item綁定事件
2.定義navClickHandler事件處理函數(內部先判斷單擊的是哪個分類,這個判斷可以用分類項中的數據來區分)
注意:所要跳轉的頁面路徑、頁面名稱、以及用于判斷的參數,都要嚴格按照項目文檔來設置,以免后期維護數據太亂找不清數據
處理函數、函數的定義,都在頁面中的methods中聲明;函數的掛在則需要在main.js中聲明,而后在method中書寫

獲取樓層和數據并渲染

獲取數據

點擊樓層圖片跳轉商品頁面

注意:分包同意創建在分包文件內(subpkg)
通過雙層forEach循環,處理url地址
split('')函數用于標記分隔符號,將目標分割為數組,從左至右形成索引
對數據的處理方法:

渲染分類頁面的基本結構

scroll-view:縱向劃動區域
總體分為兩個劃動區域,左和右;注意:有些寬高的設置其實并不需要變化,那么就不需要用到rpx,比如這個項目中的左側劃動區域,只需要設定好固定寬度就行(px)
對于項目中用到的劃動框,他需要占滿整個頁面的高度,但如果只是量取一個設備的高度,那么就無法做到適配;所以要通過uni.getsysteminfoSync()函數來獲取當前設備信息,如下:

這里用到的是設備可使用的窗口高度WindowHight;而后拿到WindowHight,動態設置劃動欄的高度;
這個函數調用的時機,是在頁面加載的時候,所以在onLoad中調用這個函數
注意:獲取數據都是不帶單位的,而綁定數據時,一般都需要加上單位,單位的添加使用添加字符的形式(+'...')
當一個標簽的屬性中class里包含兩個類名,這也是有效的,在樣式設置中也可以進行選擇
block節點,在渲染頁面時不會被渲染出來,我么可以把它當作正常標簽來使用
關于動態綁定類名思想(實現一級分類的動態渲染)

動態渲染樣式的思想:不是把樣式的變化放到函數中;而是通過類標簽的動態變化來實現樣式的篩選與變化,而標簽的動態變化就是通過類標簽的嵌套來實現的

二級分類

數據中嵌套數組的,一定要將數組數據再放到一個新創建的data數組中;
在網絡請求時(或其他函數),會用一個變量承載獲取到的數據,如果說,剩下的過程不再去改變這個數據或者重新調用這個函數,那么這個承載數的變量值,就不會再改變了,而且有一個非常重要的思想就是頁面的效果(ml部分),與methods方法(定義函數部分)可以理解為前后分離的,數據的改變或重新賦值,要在后端進行

滾動區域視圖條的位置

scroll滾動條中有一個屬性是scroll-top用于調整滾動條位置(它的值代表滾動值距離頂部的位置)
目前要實現每次切換一級分類后,滾動條的位置置頂:
1.定義一個變量scrolltop在data中
2.在scroll-top標簽中,動態綁定scrolltop值
3.每次出發時間后,讓scroll-top的屬性值重置為0

搜索功能

創建搜索分支

自定義搜索組件

自定義my-search組件
在根目錄中創建搜索頁面,在首頁和分類中都要用到這個功能
1.先實現頁面樣式的渲染
2.實現搜索建議(展示建議列表)
3.歷史記錄
組件是用來放進頁面的,自定義組件,就是自行設計一些東西,而后通過標簽的形式引入頁面
一些常用小圖標的獲取,可以在uni-app官網上獲得
uni-icon中的type用來設置圖表樣式,size用來設置圖標大小
注意:增加了搜索組件后,對于三級分類的顯示區域就進行了侵占;因為之前設定的是窗口高度,現在窗口被占了一部分,所以需要將前面設置的scroll-view組件的的高度重新設置
之前提到過,就是一些數據的設置,不要設定死,而是在props中定義常用屬性值,來給屬性賦值;這樣一來,以后更改就只用更改常量的值就可以了

在ml代碼中,對上述需求的屬性進行動態綁定,綁定的方式是鍵值對的形式動態綁定

而當我們需要修改這些屬性值的時候,只需要將屬性在標簽上直接設置就可以了
因為,在props中一但設置一個變量,那么這個變量便成為了,這個標簽中的屬性,我們在標簽內部可以直接書寫這個屬性名,來調用這個屬性為屬性重新賦值

為組件綁定事件,實現頁面跳轉

同常情況下,我們一般通過給組件綁定事件完成頁面的跳轉,但事實上,程序中提供的組件里面都封裝了@click方法,而我們自定義組件并沒有封裝這個方法,所以就無法完成事件的綁定
所以想要實現自定義組件的事件綁定,就必須為自定義組件封裝@click,解決辦法也很久簡單
自定義組件在創建的時候必定會用到小程序提供的組件,比如view、text等等,我們可以在這些組件的內部綁定事件;而后通過這個事件,調用this.$emit()函數,來將自定義組件中被@綁定的事件調用起來(注意:不是@click,而是@,@后跟事件名,名字可以自定義);以實現對自定義組件綁定事件

導航跳轉與吸頂效果(就是將頁面固定到某一位置,不隨劃定而改變)

首先,跳轉新頁面,就需要先創建一個新頁面,在subpkg文件中;然后再自定義組件的時間中利用uni.navigateTo({})函數跳轉到search頁面
吸頂效果

1.在外部將自定義組件放在view中并定義類名
2.對這個類標簽設置樣式
(1.重點就是通過position: sticky這個語句實現吸頂
2.而后對吸頂后的位置top設置屬性值
3.通過z-index提高層級,防止輪播圖覆蓋搜索組件)

搜索欄、搜索建議/自動獲得焦點與防抖處理

搜索欄在uni-app官網可獲取不同樣式;注意,里面的input事件需要自定義,就是在method中書寫函數input

自動獲取焦點

就是在主頁面點擊搜索區域,跳轉到搜索界面是自動進入到輸入步驟;而不需要再點擊一次搜索框
這就還需要我們修改uni-search-bar原組件,將data中的show、showSync的屬性值修改為true(pc端無法展示該效果,必須到移動端)

搜索框防抖問題

抖:就是指,用戶在搜索框連續輸入,每按下一次按鍵都會發送一次請求,后臺都會輸出結果,這樣的輸出太過頻繁;
所以我們就需要對搜索框進行防抖處理:即設定,如果在某一時間段內,用戶連續輸入了一段段字符,那么在這短時間內,不應該發送任何請求,實現如下:
1.在data中設定屬性timer: null
2.在自定義函數input中設定一個延時器,每次出發輸入函數,就觸發延時器

實現搜索建議列表

1.在data中定義數據數組,用來存放搜索建議的列表數據
2.再防抖的setTimeout中,調用getSearchList方法獲取搜索列表
3.在methods中定義getSearchList函數(函數中有對搜索關鍵詞是否為空的判斷,為空不調用列表,否則,調用列表)
網頁數據已被清空,無法獲取數據...

渲染搜索列表

獲取列表后,利用v-for循環將列表內容循環輸出;
而后對每個輸出項進行美化(文本、小圖標),單行輸出,超出屏幕內容用...代替

點擊建議項跳轉詳情頁面

注意跳轉頁面如果需要傳遞參數,需要動態傳遞參數(采用拼接的方式),方式如下:

搜索歷史區域的基本結構以及渲染

搜索歷史區域及例表的按需展示

v-if與v-else的使用很特別。注意

將搜索字段加入到歷史列表

將搜索記錄添加到數組面臨著兩個問題:
1.最新的搜索記錄會被排在后,所以展示的順尋問題需要解決
2.重復項只保留單次且須是最新的
解決方法:
1.利用push將搜索字段添加到數組,在不改變歷史數組的情況下,添加計算屬性computed節點,自定義函數,而后利用reverse()函數,將數組元素倒轉而后返回(直接將結果return即可),再ml代碼中就不是for循環原數組了,而是計算屬性中的那個函數(注意:reverse()會對目標數組進行更改,所以需要將原數組復制到一個內存無關的新數組上,具體操作見下)。

但是這個方法,無法解決重復項的問題

2.對于重復項的問題需要用到js中的Set對象,Set對象是值的集合,Set對象中的元素只會出現一次,及Set中的元素是唯一的,實例:

思路如下:
1.將目標數組轉實例化并用const常量接收,常量就是Set對象
2.每次新字段kw出現后,就調用delete函數對原對象進行搜索并刪除重復的元素
3.調用add函數向Set對象中添加新元素
4.將Set對象轉化為數組,而后輸出這個數組

將搜索記錄持久化的存儲在本地

在實際項目中,我們體驗知道,歷史記錄不手動刪除,那么我們再次打開小程序時,是可以再看到的;但目前我們做到的知識暫時存儲,一經重新編譯就丟失了數據;所以我們要將數據存儲在本地,步驟:
1.在自定義函數中,調用uni.setStorageSync()函數,傳遞的參數有兩個,第一個是一個字符串類型(就是存入的數據的key值,便于尋找),是鍵名(即搜索字段);第二個參數是JSON.stringify(this.數組名),這個函數時間數組轉化為字符串
2.而后早onLoad函數中,每次加載頁面,都根據key鍵值尋找字符串獲取并將字符串轉化為數組(意思就是將后面的字符串存儲到kw這個變量上)

請求并渲染商品列表的數據

根據不同頁面傳遞進來的參數名的不同、參數值的不同,跳轉到不同的頁面
語句:this.queryObj.cid = options.cid || '' 意為:將傳遞進來的cid數據轉存到當前頁面的cid變量上,但如果傳遞的參數不存在的話(這就是代表每個原頁面可能不會傳遞某些參數),就賦值為空

使用過濾器對商品價格進行處理(保留兩個位小數)

1.在my-goods組件中,和data節點平級,聲明filters過濾器
2.在節點中調用tofixed()方法接收參數num,而后利用Number(num).toFixed(2)將數據轉化為保留兩位小數;
其中,Number是將數據轉化為Number類型,因為傳進來的數據有可能是字符串形式的;toFixed(2)是將數據保留兩位小數
3.在ml部分,用符號|與需要操作的數據相連接,如下

通過節流閥防止發起額外的數據請求

判斷數據加載完畢防止發起額外的數據請求

頁碼數乘上每頁的數據量>=總數據量,就停止請求,在請求語句之前進行return

實現下拉刷新效果

1.在pages.json中的goods_list頁面中,增加下拉刷新語句:enablePullDownRefresh:true,并配置當前下拉窗口顏色backgroundColor:"#efefef"
2.在監聽onPullDownRefresh事件處理函數:需要進行一些處理,重置一些數據,并再次發起網絡請求(網絡請求有回調函數,這個回調函數是用于“停止刷新”,所以要再對原函數進行修改)

短路運算符:如果前面的參數存在,就執行符號后面的語句

點擊商品item項跳轉詳情頁

將my-goods的外容器改變成voew容器,而后綁定點擊事件

商品詳情頁

輪播圖區域(注意:輪播圖的預覽建議用數組循環預覽,便于以后進入彈出層從指定圖片開始預覽)

實現輪播圖的預覽效果

當點擊輪播圖時,就可以進入彈出層實現大圖的預覽;而且就從點擊的圖片開始預覽
預覽效果,需要點用uni.previewImage()函數進行預覽;其中的屬性有,current默認從第幾張圖片開始預覽,在這里我們把圖片的索引i傳遞進去就可以了;
以及屬性urls,這個屬性是個數組,存放的是所有圖片的地址,而后通過map循環,將圖片返回到彈出層,以便在彈出層中輪播

渲染商品導航區域(加入購物車,立即購買等)

基于uni-ui提供的GoodsNav組件來實現商品的導航區域效果

點擊跳轉購物車頁面

點擊商品島上組件,會觸發uni-goods-nav的@click時間,時間對象e中會包括當前點擊的按鈕相關信息;
也就是說,這個對象是根據所點擊的圖標而定的;點擊不同的圖標會獲取不同的圖標屬性值,以便在綁定事件中進行篩選

渲染購物車頁面

購物車的info數據在多個頁面都會使用到,所以這樣的數據應該用作全局共享
這就要先配置vuex
步驟:
1.在項目根目錄上創建store文件夾,專門你用來存放vuex相關的模塊
2.在store目錄上手表郵件,選擇新建js文件,下黃健store.js文件(default模板)
3.在store.js中對Store進行初始化,初始化步驟:

• 1.導入Vue和Vuex
  import Vuex from 'vue'
  improt Vuex from 'vuex'
• 2.將Vuex安裝為Vue的插件
  Vue。use(Vuex)
• 3.創建Store的實例對象
  const store = new Vuex.Store({
  method: {},
  })
• 4.向外共享Store的實例對象
  export default store

4.在main.js中導入store實例對象并掛載到Vue的實例上
import store from './store/store.js'
...(省略其他代碼)
const app = new Vue({
...App,
//將store掛載到Vue實例上
store,
})
app.$mount()

創建購物車的store模塊,從而來存儲購物車的相關數據

1.在store目錄上鼠標右鍵創建.js文件,創建購物車的store模塊,命名為cart.js
2.在cart.js文件中初始化如下的vuex模塊

3.在store/store.js模塊中導入并掛載購物車的vuex模塊

在其他頁面使用Store中的數據

1.在goods_detail.vue頁面中,修改標簽的代碼如下:

點擊加入購物車,將商品的數據對象,存儲到購物車數組里面

模塊中的數據,必須經過mutations里的方法來改變,所以在其中定義方法addToCart()來改變cart數組中的信息
find()方法用于循環數組每一項
使用store中的方法需要將方法映射到目標頁面當中,映射的方法是先在script標簽中import導入mapMutations方法,而后在methods節點中映射方法,映射如下:
...mapMutations('m_cart', ['addToCart']),第一個參數是路徑,第二個參數是方法名

動態統計商品數量渲染徽標

定義計算屬性,動態統計購物車數量,而后再賦值給info;在script標簽中導入mapGetters方法

持久化存儲購物車當中的商品

在mutations中調用方法的方式

普通的watch監聽器不能再首次加載的時候不會被立即調用;所以需要讓這個監聽其在頁面被加載的時候