配置uni-app開發(fā)環(huán)境

uni-app快速上手 | uni-app官網(wǎng)

?

創(chuàng)建項(xiàng)目

圖中四個(gè)劃線就是要配置的地方.

選擇vue2還是vue3看個(gè)人選擇。

目錄結(jié)構(gòu)

但是現(xiàn)在新版本創(chuàng)建的項(xiàng)目已經(jīng)沒有components目錄了，需要自己創(chuàng)建。

項(xiàng)目運(yùn)行到微信開發(fā)者工具

使用git管理項(xiàng)目

node-modules是第三方包，沒有必要進(jìn)行g(shù)it管理。

/unpackage/dist是運(yùn)行時(shí)自動(dòng)生成的目錄。

tabBar開發(fā)

創(chuàng)建tabBar分支

然后使用git branch可以查看當(dāng)前所在分支。

?

創(chuàng)建tabbar頁(yè)面?

四個(gè)頁(yè)面創(chuàng)建好后在pages.json里面會(huì)自動(dòng)多四個(gè)頁(yè)面路徑。?

配置tabBar效果

"tabBar": {
"selectedColor": "#C00000",
"list": [
{
"pagePath": "pages/home/home",
"text": "首頁(yè)",
"iconPath": "static/tab_icons/home.png",
"selectedIconPath": "static/tab_icons/home-active.png"
},
{
"pagePath": "pages/cate/cate",
"text": "分類",
"iconPath": "static/tab_icons/cate.png",
"selectedIconPath": "static/tab_icons/cate-active.png"
},
{
"pagePath": "pages/cart/cart",
"text": "購(gòu)物車",
"iconPath": "static/tab_icons/cart.png",
"selectedIconPath": "static/tab_icons/cart-active.png"
},
{
"pagePath": "pages/my/my",
"text": "我的",
"iconPath": "static/tab_icons/my.png",
"selectedIconPath": "static/tab_icons/my-active.png"
}
]
}

刪除默認(rèn)的index頁(yè)面?

1. 在 HBuilderX 中，把 pages 目錄下的 index首頁(yè)文件夾 刪除掉

2. 同時(shí)，把 page.json 中記錄的 index 首頁(yè) 路徑刪除掉

3.?為了防止小程序運(yùn)行失敗，在微信開發(fā)者工具中，手動(dòng)刪除 pages 目錄下的 index 首頁(yè)文件 夾 4. 同時(shí)，把 components 目錄下的 uni-link 組件文件夾 刪除掉

修改導(dǎo)航欄條的樣式效果

1. 打開 pages.json 這個(gè)全局的配置文件

2. 修改 globalStyle 節(jié)點(diǎn)如下：

{
"globalStyle": {
"navigationBarTextStyle": "white",
"navigationBarTitleText": "鼠鼠優(yōu)購(gòu)",
"navigationBarBackgroundColor": "#C00000",
"backgroundColor": "#FFFFFF"
}
}

分支的提交與合并

首頁(yè)

創(chuàng)建home分支

配置網(wǎng)絡(luò)請(qǐng)求

@escook/request-miniprogram - npm (npmjs.com)?

跟著官方文檔里面的指引做，可以將配置請(qǐng)求響應(yīng)攔截器和請(qǐng)求根路徑等等。

首先在項(xiàng)目根目錄初始化一個(gè)npm的包管理配置文件。

git init -y

?安裝網(wǎng)絡(luò)請(qǐng)求的包

npm install @escook/request-miniprogram

然后在main.js里面進(jìn)行如下配置?

凡是wx.的方法都可以使用uni.代替。

這部分的代碼必須要放在ifndef vue3外面，否則微信開發(fā)者哪里會(huì)有報(bào)錯(cuò),具體就是下面這個(gè)

【微信小程序】TypeError: Cannot read property ‘get‘ of undefined & Error: MiniProgramError-CSDN博客

//導(dǎo)入網(wǎng)絡(luò)請(qǐng)求的包
import { $http } from '@escook/request-miniprogram'uni.$http=$http
//配置根路徑
$http.baseUrl='https://api-hmugo-web.itheima.net'
//請(qǐng)求攔截器
$http.beforeRequest=function(options){uni.showLoading({title:'數(shù)據(jù)加載中...'})
}
//響應(yīng)攔截器
$http.afterRequest=function(){uni.hideLoading()
}

輪播圖區(qū)域

請(qǐng)求輪播圖的數(shù)據(jù)

const { data : res} 是解構(gòu)賦值，res可以換，前面的data不能

home.vue中

<template><view>home</view>
</template><script>export default {data() {return {//輪播圖的數(shù)據(jù)列表swiperList:[]};}, onLoad(){this.getSwiperList()},methods:{async getSwiperList(){const {data:res}= await uni.$http.get('/api/public/v1/home/swiperdata')//請(qǐng)求失敗if(res.meta.status!==200){return uni.showToast({title:'數(shù)據(jù)請(qǐng)求失敗!',duration:1500,icon: 'none' })}//請(qǐng)求成功  this.swiperList=res.messageconsole.log(this.swiperList)}}}
</script><style lang="scss"></style>

渲染輪播圖的UI結(jié)構(gòu)

<template><view><swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true"><swiper-item v-for="(item,i) in swiperList" :key="i"><view class="swiper-item"><image :src="item.image_src"></image></view></swiper-item></swiper></view>
</template>

<style lang="scss">
swiper{height:330rpx;.swiper-item,image{width:100%;height:100%;}
}
</style> 

?效果如下

配置小程序分包

  "subPackages": [{"root":"subpkg","pages":[]}],

?點(diǎn)擊輪播圖跳轉(zhuǎn)商品詳情頁(yè)

將view組件改為navigator組件，

跳轉(zhuǎn)頁(yè)面的同時(shí)將商品id也傳過(guò)去

封裝uni.$showMsg()方法

分類導(dǎo)航區(qū)域

獲取分類導(dǎo)航的數(shù)據(jù)

用到的接口如下

?

渲染分類導(dǎo)航的UI結(jié)構(gòu)

點(diǎn)擊跳轉(zhuǎn)分類頁(yè)面

樓層區(qū)域

獲取樓層數(shù)據(jù)

?

渲染樓層標(biāo)題?

?得到如下

?

渲染樓層圖片

  <view class="floor-list"><view class="floor-item" v-for="(item,i) in floorList" :key="i"><image :src="item.floor_title.image_src" class="floor-title"></image><view class="floor-img-box"><!--左側(cè)大圖片的盒子--><view class="left-img-box"><image :src="item.product_list[0].image_src" :style="{width:item.product_list[0].image_width+'rpx'}" mode="widthFix"> </image></view><!--右側(cè)4個(gè)小圖片的盒子--><view class="right-img-box"><view class="roght-img-item" v-for="(item2,i2) in item.product_list" :key="i2" v-show="i2 !== 0"><image :src="item2.image_src" mode="widthFix" :style="{width:item2.image_width+'rpx'}" ></image></view></view></view></view></view>

.floor-title{height: 60rpx;width: 100%;display: flex;
}.right-img-box{display:flex;flex-wrap: wrap;justify-content: space-around;
}
.floor-img-box{display: flex;padding-left: 10rpx
}

效果如下?

點(diǎn)擊樓層圖片跳轉(zhuǎn)到商品列表頁(yè)面

?用到的返回?cái)?shù)據(jù)如下所示.這里返回的路徑有問題，要對(duì)路徑做替換。

?

?

合并分支并提交