???作者簡(jiǎn)介：大家好，我是亦世凡華、渴望知識(shí)儲(chǔ)備自己的一名在校大學(xué)生
??個(gè)人主頁(yè)：亦世凡華、
??系列專欄：uni-app
??座右銘：人生亦可燃燒，亦可腐敗，我愿燃燒，耗盡所有光芒。
??引言
?????????經(jīng)過(guò)web前端的學(xué)習(xí)，相信大家對(duì)于前端開(kāi)發(fā)有了一定深入的了解，今天我開(kāi)設(shè)了uni-app專欄，主要想從移動(dòng)端開(kāi)發(fā)方向進(jìn)一步發(fā)展，而對(duì)于我來(lái)說(shuō)寫移動(dòng)端博文的第二站就是uni-app開(kāi)發(fā)，希望看到我文章的朋友能對(duì)你有所幫助。
目錄
項(xiàng)目搭建
配置tabBar路由
Git管理項(xiàng)目
主頁(yè)搭建
實(shí)現(xiàn)輪播圖區(qū)域
配置小程序分包
分類導(dǎo)航區(qū)域
樓層布局區(qū)域
項(xiàng)目搭建
今天實(shí)現(xiàn)一個(gè)商城購(gòu)物的案例，并制作成一個(gè)微信小程序在手機(jī)上使用，項(xiàng)目需要有四個(gè)tabBar按鈕來(lái)實(shí)現(xiàn)，如果第一次接觸uni-app的話，歡迎訂閱一下本專欄，學(xué)習(xí)里面的文章，項(xiàng)目的實(shí)現(xiàn)原理基本可以搞懂，廢話不多說(shuō)，直接上手操作。
配置tabBar路由
在pages目錄上創(chuàng)建首頁(yè)(home)、分類(cate)、購(gòu)物車(cart)、我的(my) 這 4 個(gè) tabBar 頁(yè)面。在 HBuilderX 中，具體步驟如下：
接下來(lái)需要配置tabBar，相關(guān)圖標(biāo)庫(kù)可以自行去阿里云圖標(biāo)庫(kù)查找，這里不再贅述，如下：
接下來(lái)項(xiàng)目的樣式，我都會(huì)在小程序中進(jìn)行檢測(cè)配置，最后打包APP，結(jié)果如下所示：
Git管理項(xiàng)目
因?yàn)榇隧?xiàng)目的代碼還是比較多的，這里的話我就借助git進(jìn)行版本管理，創(chuàng)建子分支，如果子分支沒(méi)問(wèn)題的話就合并主分支，要知道我們?cè)趧?chuàng)建uni-app項(xiàng)目文件，是沒(méi)有g(shù)it忽略文件的，這里需要我們單獨(dú)創(chuàng)建，具體操作如下：
在項(xiàng)目根目錄中新建 .gitignore 忽略文件，并配置如下：
注意：由于我們忽略了 unpackage 目錄中僅有的 dist 目錄，因此默認(rèn)情況下， unpackage 目錄不會(huì)被 Git 追蹤,此時(shí)，為了讓 Git 能夠正常追蹤 unpackage 目錄，我們可以在 unpackage 目錄下創(chuàng)建一個(gè)叫做 .gitkeep 的文件進(jìn)行占位。
# 忽略的目錄
/node_modules
/unpackage/dist創(chuàng)建好忽略文件后，現(xiàn)在將文件上傳到遠(yuǎn)程倉(cāng)庫(kù)上，這里我使用的是github，當(dāng)然你也可以選擇國(guó)內(nèi)的gitee，效果都是一樣的，如下：
創(chuàng)建遠(yuǎn)程倉(cāng)庫(kù)：進(jìn)入github網(wǎng)址，登錄自己的賬號(hào)后點(diǎn)擊右上角頭像新建倉(cāng)庫(kù)，如下
創(chuàng)建完成后，會(huì)跳轉(zhuǎn)到如下界面，上面代碼詳細(xì)的告訴你如何將代碼提交到遠(yuǎn)程庫(kù)：??
生成本地倉(cāng)庫(kù)：具體步驟如下：
git init 生成工作區(qū)
git status 查看提交的文件情況
git add . 提交到暫存區(qū)
git commit -m "shop" 提交到版本區(qū)
推送到遠(yuǎn)程倉(cāng)庫(kù)：具體步驟如下：
git remote add origin git@github.com:ztK63LrD/uni-app_shop.git?? 關(guān)聯(lián)別名
git push -u origin main 推送分支
推送完成之后，刷新github頁(yè)面就會(huì)將我們推送的代碼呈現(xiàn)在頁(yè)面上，如下：
創(chuàng)建dev分支：基于master在本地創(chuàng)建dev分支，用來(lái)檢測(cè)開(kāi)發(fā)和記錄相關(guān)代碼，如下：
git checkout -b dev 創(chuàng)建并切換到該分支
git push origin -u "dev" 將該分支推送到遠(yuǎn)程倉(cāng)庫(kù)上
ok，接下來(lái)就開(kāi)始在我們創(chuàng)建的子分支dev上進(jìn)行代碼的書(shū)寫， 當(dāng)確保代碼完整性后再與主分支master進(jìn)行合并，這樣會(huì)大大提高代碼的正確性和規(guī)范性。接下來(lái)開(kāi)始真正的項(xiàng)目編寫，收好小板凳瞪大眼睛開(kāi)始學(xué)習(xí)了。
主頁(yè)搭建
接下來(lái)實(shí)現(xiàn)主頁(yè)樣式以及功能的搭建，具體實(shí)現(xiàn)過(guò)程如下：
實(shí)現(xiàn)輪播圖區(qū)域
實(shí)現(xiàn)輪播圖很簡(jiǎn)單，只要操作uni-app發(fā)起網(wǎng)絡(luò)請(qǐng)求的相關(guān)API即可使用，詳情可參看官網(wǎng)：
給出詳細(xì)代碼如下：
<template>
<view>
<!-- 輪播圖區(qū)域 -->
<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true">
<!-- 循環(huán)渲染輪播圖的item項(xiàng) -->
<swiper-item v-for="(item,index) in swiperList" :key="index">
<view class="swiper-item">
<!-- 動(dòng)態(tài)綁定圖片的 src 屬性 -->
<image :src="item.image_src" mode="aspectFill"></image>
</view>
</swiper-item>
</swiper>
</view>
</template>
<script>
export default {
data() {
return {
swiperList:[] // 輪播圖數(shù)據(jù)列表
};
},
onLoad() {
this.getSwiperList() // 調(diào)用方法，獲取輪播圖數(shù)據(jù)
},
methods:{
// 獲取輪播圖數(shù)據(jù)的函數(shù)
getSwiperList(){
uni.request({
url:'https://www.uinav.com/api/public/v1/home/swiperdata',
success:res => {
console.log(res)
this.swiperList = res.data.message
},
fail:error => {
uni.showToast({
title:'數(shù)據(jù)請(qǐng)求失?。?,
duration:1500,
icon:'none'
})
}
})
}
}
}
</script>
<style lang="scss">
swiper{
height: 330rpx;
.swiper-item, image{
width: 100%;
height: 100%;
}
}
</style>
因?yàn)楹笃诳赡軙?huì)出現(xiàn)很多的需要進(jìn)行彈框的操作，所以這里我們可以將上面的代碼中進(jìn)行彈框操作的showToast()函數(shù)進(jìn)行一個(gè)全局的封裝，操作如下：
配置小程序分包
如果小程序的項(xiàng)目資源過(guò)大的話，所有的頁(yè)面與資源都被打包在一起會(huì)導(dǎo)致由于項(xiàng)目體積過(guò)大從而影響小程序首次啟動(dòng)的下載時(shí)間，所以本次項(xiàng)目需要對(duì)小程序進(jìn)行分包處理，對(duì)于分包的詳情信息可參考我之前的一篇文章：小程序分包處理 。具體分包過(guò)程如下：
在項(xiàng)目根目錄中創(chuàng)建分包的根目錄，命名為subpkg；然后在pages.json中和pages節(jié)點(diǎn)平級(jí)的位置聲明 subPackages 節(jié)點(diǎn)，用來(lái)定義分包的相關(guān)結(jié)構(gòu)，如下：
在subpkg目錄上鼠標(biāo)右鍵新建頁(yè)面選項(xiàng)，填寫以下頁(yè)面的相關(guān)信息：
最后在subPackages節(jié)點(diǎn)下生成相應(yīng)的分包路徑，如下：
分包的基本配置完成后， 我們將原本的輪播圖圖片設(shè)置可跳轉(zhuǎn)的navigator標(biāo)簽并將圖片對(duì)應(yīng)的id進(jìn)行傳遞過(guò)去，如下：
分類導(dǎo)航區(qū)域
接下來(lái)實(shí)現(xiàn)主頁(yè)的分類導(dǎo)航區(qū)域，具體實(shí)現(xiàn)過(guò)程如下：
調(diào)用獲取分類列表數(shù)據(jù)的接口，將數(shù)據(jù)轉(zhuǎn)存到data當(dāng)中去，如下：
轉(zhuǎn)存完后開(kāi)始設(shè)置分類列表的布局，如下：
界面如下：
現(xiàn)在開(kāi)始給分類列表配置點(diǎn)擊事件，進(jìn)行頁(yè)面的跳轉(zhuǎn)，因?yàn)轫?xiàng)目的頁(yè)面還開(kāi)始寫完，現(xiàn)在僅寫分類列表中第一個(gè)分類圖片的點(diǎn)擊事件吧，如下：
樓層布局區(qū)域
接下來(lái)實(shí)現(xiàn)主頁(yè)的樓層布局區(qū)域，具體實(shí)現(xiàn)過(guò)程如下：
調(diào)用獲取樓層區(qū)域的接口，獲取樓層區(qū)域的數(shù)據(jù)并將其轉(zhuǎn)存到data里面：
渲染樓層的圖片與標(biāo)題，定義如下的ui結(jié)構(gòu)：
美化樓層的樣式：
具體樣式如下：
接下來(lái)給圖片設(shè)置點(diǎn)擊跳轉(zhuǎn)鏈接，跳轉(zhuǎn)到其相關(guān)的商品列表頁(yè)面，這里需要設(shè)置一下分包來(lái)提供給跳轉(zhuǎn)鏈接的詳情界面，如下：
接下來(lái)需要對(duì)調(diào)用獲取樓層接口的數(shù)據(jù)進(jìn)行一個(gè)處理，設(shè)置一個(gè)能匹配我們目前設(shè)置url路徑的地址，如下：
接下來(lái)對(duì)樓層的圖片設(shè)置路由跳轉(zhuǎn)標(biāo)簽，并將其圖片參數(shù)進(jìn)行傳遞，如下：
文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-408018.html
至此首頁(yè)的基本功能已經(jīng)完成，其相關(guān)的分包下的分頁(yè)內(nèi)容，會(huì)在后面進(jìn)行講解到，因?yàn)榇a量比較多，項(xiàng)目我會(huì)分四篇文章來(lái)講解，如果覺(jué)得不錯(cuò)的話，可以給博主一鍵三聯(lián)，您的支持就是博主創(chuàng)作的最大動(dòng)力。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-408018.html
到了這里，關(guān)于uni-app--》如何實(shí)現(xiàn)網(wǎng)上購(gòu)物小程序（上）？的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
