功能描述如以下
在首頁(yè)關(guān)于輪滑圖的設(shè)置
http(url,that,arr){????//?var?that=this;????wx.request({??????url:url,??????success:(res)=>{????????wx.showLoading({??????????title:"加載完畢",??????????duration:500????????})????????if?(res.data.status==200?)?{??????????that.setData({[arr]:res.data.data})?????????????console.log(res.data);???????????????????????//?console.log(res.data,'89')????????????????????????}??????else?if?(?typeof?res.data.status?===?'undefined'){????????that.setData({[arr]:res.data[0]})??????????console.log(res.data)????????wx.setNavigationBarTitle({??????????title:res.data[0].title????????????})??????}
我們?nèi)绻?qǐng)求數(shù)據(jù)的話一般都會(huì)到j(luò)s中寫wx.request代碼椭赋√靶剑可如果我們發(fā)現(xiàn)有幾個(gè)請(qǐng)求的內(nèi)容代碼格式都差不多的話趾疚。我們就可以在app.js中寫一個(gè)公共代碼胁编，供全局使用亩冬。在app.js中酵幕，同樣有的全局變量 App<IAppOption>({??globalData:?{????cityname:""??},芬迄。能搞供給各個(gè)頁(yè)面之間傳遞參數(shù)又厉。所以在輪播圖中的數(shù)據(jù)請(qǐng)求我們就封裝到了http這個(gè)函數(shù)之中
??onLoad()?{
????//?獲取app.js封裝的網(wǎng)絡(luò)請(qǐng)求發(fā)現(xiàn)報(bào)錯(cuò)WAServiceMainContext.js?t=wechat&s=1695694252907&v=3.1.1:1?TypeError:?Cannot?read?property?'setData'?of?undefined
????//?app.http(host+bannerurl,"bannerArr")
????app.http(host+bannerurl,this,'bannerArr');
????app.http(host+indexUrl,this,'listArr');
????//?this.http(host+indexUrl,"listArr")
關(guān)于 用http? ? ?傳遞參數(shù)我們也需要注意 一點(diǎn)的是關(guān)于this這個(gè)頁(yè)面的全局嘲碧。在用this.setdata時(shí)稻励，所以我們?cè)赼pp.js中定義的 http(url,that,arr)這里的that就是this .而在js頁(yè)面中傳入的參數(shù)為this賦值給了that..要在頁(yè)面中使用app.js應(yīng)該如此定義 const?app?=?getApp()
還有若要在配一些公共屬性如下圖。也可在util中配置呀潭，使用方法 const?{host,bannerurl,indexUrl}=require('../../utils/commn/config.js')
關(guān)于跳轉(zhuǎn)的話 ?goodtail(e){????console.log(e)????wx.navigateTo(??????{url:"../iindexdetail/indexdetail?id="+e.currentTarget.dataset.id}????)??},
可以在wxml中直接使用naviga跳轉(zhuǎn)钉迷。也能用點(diǎn)擊事件進(jìn)行跳轉(zhuǎn)。钠署，而這里使用了點(diǎn)擊事件跳轉(zhuǎn)糠聪。并設(shè)置了data-id傳遞參數(shù)給事件用e來(lái)實(shí)現(xiàn)。后面發(fā)起請(qǐng)求把id傳到另外一個(gè)頁(yè)面谐鼎。如圖舰蟆。通過(guò)onload的opinion獲取
?<view?class="list"?wx:for="{{listArr}}"?wx:key="index"?bind:tap="goodtail"?data-id="{{item.id}}">
然后下面要注意的就是css的樣式問(wèn)題趣惠。關(guān)于flex布局，關(guān)于位置身害，關(guān)于絕對(duì)定位相對(duì)定位味悄。關(guān)于外距離和內(nèi)距離。在不清楚時(shí)用border把邊框標(biāo)出來(lái)塌鸯。然后還有一個(gè)問(wèn)題是圖片不能夠撐滿整個(gè)容器侍瑟，那么請(qǐng)?jiān)O(shè)置 image{??width:?100%;??height:?125%;}
關(guān)于文字對(duì)齊請(qǐng)用align .還有文字溢出
關(guān)于輪播圖還有的就是下面的3/5的設(shè)置
??//?輪播觸發(fā)--------------js
??swiperchange(e){
????this.setData({
??????currrentIdex:e.detail.current
????})}
html
??<swiper?class="banner"??indicator-color="black"?indicator-active-color="white"?circular="true"??bindchange="swiperchange"?autoplay?>
這里有個(gè)bindchange的函數(shù)來(lái)監(jiān)控輪播圖發(fā)生更改時(shí)候的事件參數(shù)id
?<view?class="biaodi">{{currrentIdex+1}}/{{bannerArr.length}}</view>
下面是進(jìn)入了詳細(xì)頁(yè)面。先是使用到showtoastonLoad(opnion)?{
//?網(wǎng)絡(luò)請(qǐng)求的接口id和數(shù)據(jù)
????console.log(opnion.id)?
?????wx.showLoading(
??????{title:"數(shù)據(jù)拼命加載中",
??????duration:500
??????}
????)???
來(lái)為我們展示數(shù)據(jù)正在加載中丙猬。而當(dāng)用wx.request請(qǐng)求完數(shù)據(jù)再用complete來(lái)最后加載數(shù)據(jù)
然后使用app.htt請(qǐng)求數(shù)據(jù)app.http(host+indexDetail+"id="+opnion.id,this,'info');
我們還要實(shí)現(xiàn)的是在導(dǎo)航欄實(shí)現(xiàn)一個(gè)加載動(dòng)畫 wx.showNavigationBarLoading();涨颜。就是這一部分
而且還要實(shí)現(xiàn)更改導(dǎo)航欄文字的功能?。我們已經(jīng)在app.js的函數(shù)中使用了這個(gè)功能
??wx.setNavigationBarTitle({
??????????title:res.data[0].title
下面來(lái)到食物館這個(gè)頁(yè)面
同理我們先把這個(gè)導(dǎo)航欄的頁(yè)面更改一下????wx.setNavigationBarTitle({
??????title:"食療館"
后面的css布局
.fenlei{
??//?border:?1rpx?red?solid;
??display:?flex;
?flex-wrap:?wrap;
??padding:?10rpx;
??justify-content:?space-around;
position:?absolute;
top:?9%;
flex-direction:?row;
//?margin:?auto;
}
.fenlei-item?image{
??width:50rpx;
??height:?50rpx;
}
.fenlei-item?{
??//?border:?1rpx?red?solid;
??width:70rpx;
??height:70rpx;
??margin-left:50rpx;
??margin-right:?50rpx;
??font-size:?9rpx;
??margin-top:?20rpx;
??font-size:?20rpx;
??text-align:?center;
請(qǐng)注意flex-wrap?是一個(gè)CSS屬性茧球，用于確定當(dāng)flex項(xiàng)目超出其容器的寬度時(shí)庭瑰，它們是否應(yīng)該換行。它與容器元素上的?display: flex?或?display: inline-flex?屬性一起使用抢埋。flex-wrap?屬性接受三個(gè)值：1.?nowrap：這是默認(rèn)值弹灭。它表示flex項(xiàng)目不會(huì)換行，即使它們溢出容器揪垄，也會(huì)在單行中顯示穷吮。2.?wrap：這個(gè)值允許flex項(xiàng)目在需要時(shí)換行到多行。換行發(fā)生在第一行填滿后饥努，后續(xù)項(xiàng)目會(huì)放置在新的行上酒来。3.?wrap-reverse：這個(gè)值與?wrap?類似，但它以相反的順序換行肪凛。換行從容器的底部或右側(cè)開始堰汉，并向上或向左移動(dòng)。
在這里我們還實(shí)現(xiàn)了對(duì)模板的使用伟墙。因?yàn)閷?duì)于有的html樣式和css樣式都是一樣的翘鸭，可以重復(fù)使用。那么這個(gè)時(shí)
候我們直接建造一個(gè)文件夾來(lái)存儲(chǔ)我們的模板戳葵。
css引入的寫法為 @import?'../templates/foolist/foodlist.wxss';
在html中為 </view><view></view><import?src="../templates/foolist/foodlist.wxml"/><block?wx:for="{{listArr}}"?wx:key="index">????<template?is="foodlist"?data="{{...item}}"/></block><view?class="more">{{moreinfo}}</view>
請(qǐng)注意這里的問(wèn)題...item為展開列表就乓。如果不需展開請(qǐng)直接用item.而在模板文件中
<template?name="foodlist1">
??<view?class="shop-info">
??<view?class="shop-image">
??<image?src="{{item.pic}}"?mode=""/>
????</view>
??<view?class="shop-text">
????<view?class="title">{{item.name}}</view>
????<view?class="detail">{{item.description}}</view>
????<view?class="other">
??????<view?class="money">${{item.price}}</view>
??????<view?class="num">{{item.buynum}}人付款</view>
????</view>
??</view>
</view>
</template>
通過(guò)template的名字的不同可以定義多個(gè)模板{{item.buynum}}，{{item.name}}必須為item中擁有的鍵才能識(shí)別到
我們?cè)谶@里還實(shí)現(xiàn)了下拉刷新的功能拱烁。在使用之前需要到app.json中的window中開啟 ??"window":?{????"backgroundTextStyle":?"light",????"navigationBarBackgroundColor":?"#518890",????"navigationBarTitleText":?"食療坊",????"navigationBarTextStyle":?"black",????"enablePullDownRefresh":?true??},enable為true
對(duì)于這一部分
并不是請(qǐng)求得來(lái)生蚁。而同樣是在utli.js中配置戏自。
眾所都知，我們?cè)趆tml中不能夠使用js代碼志衣，但能夠使用wxss
這個(gè)使用為<wxs?src="../../utils/str.wxs"?module="tools"?/>
再讓我們回到下拉刷新屯援。可在監(jiān)控函數(shù)中定義??onPullDownRefresh()?{
????console.log("下拉刷新數(shù)據(jù)");
????//?下拉更新數(shù)據(jù)??功能1.下拉重新請(qǐng)求接口2請(qǐng)求上海的數(shù)據(jù)
????wx.request({
??????url:?host+foodlist,
??????data:{
????????city:"上海",
????????page:1
??????},
??????success:(res)=>{
????????this.setData({
??????????listArr:res.data.data.result,
??????????num:1
????????})
????????console.log(res.data,"更多數(shù)據(jù)");
??????}
????})
??},?*?頁(yè)面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動(dòng)作下拉刷新,要到頁(yè)面的json中設(shè)置background顏色
{
??"usingComponents":?{},
??"backgroundColor":?"#ff7695",
??"onReachBottomDistance":20
}
onReachBottomDistance為觸底事件
??onReachBottom()?{
????this.data.num++;
????console.log("加載更多數(shù)據(jù)",this.data.num)
????//?請(qǐng)求數(shù)據(jù)的接口
????wx.request({
??????url:?host+foodlist,
??????data:{
????????city:this.data.location,
????????page:this.data.num
??????},
??????success:(res)=>{
????????if?(res.status==200)?{
??????????console.log(res.data)
??????????????this.setData({
??????????listArr:this.data.listArr.concat(res.data.data.result)})
??????????//?如何把data里面數(shù)組的數(shù)據(jù)和新請(qǐng)求的數(shù)組數(shù)據(jù)合并
????????}?else?{
??????????console.log("沒有更多數(shù)據(jù)了")
??????????this.setData({
????????????moreinfo:"我是有底線的"
??????????})
????????}
????????//
????????console.log(res);
??????}
然后我們實(shí)現(xiàn)搜索框的請(qǐng)求功能狞洋。我們使用??????<navigator?url="../diinwei/diinwei">{{location}}</navigator>
????</view>
????<navigator?class="search"?url="../search/search?cityname={{location}}">?請(qǐng)輸入你想要的內(nèi)容
????<!--?<input?type="text"?placeholder="請(qǐng)搜索你喜歡的"?bindinput="search"/>?這里能夠使用兩種方式-->
????</navigator>
??</view>
來(lái)跳轉(zhuǎn)到另一個(gè)頁(yè)面
找到搜索的接口绿店，把返回的數(shù)據(jù)套子在模板上
搜索功能由input綁定事件實(shí)現(xiàn)<view?class="header">
<!--?用戶輸入內(nèi)容吉懊，搜索內(nèi)容，顯示數(shù)據(jù)惕它，事件?input組件?bindinput?-->
??<input?type="text"?focus="true"?placeholder="請(qǐng)輸入你喜歡的內(nèi)容"?bindinput="getinputVal"/>
</view>
然后再到j(luò)s中定義函數(shù)
getinputVal(e){
??console.log(e.detail);
if?(e.detail.value)?{
??wx.request({
????url:host+searchurl,
????data:{
??????city:this.data.cityName,
??????name:e.detail.value
????},
????success:(res)=>{
??????console.log(res.data);
??????console.log(res.data.data,"dsfwsedf")
??????if?(res.data.status==200)?{
????????this.setData({
??????????liistArr:res.data.data
????????})
??????}
????}
??})
}
else
{
??console.log('輸入內(nèi)容不能為空');
??//清空數(shù)據(jù)
??this.setData({
????list:[]
??})
}},
實(shí)現(xiàn)接口數(shù)據(jù)請(qǐng)求返回
請(qǐng)注意在這塊的bug就是this.setdata的異步返回不會(huì)返回?cái)?shù)據(jù)废登，只有object返回
還有要獲取定位權(quán)限的堡距。請(qǐng)?jiān)赼pp.json中的window中添加以下代碼??"requiredPrivateInfos":?["getLocation",?"chooseLocation",?"chooseAddress"],
??"permission":?{
????"scope.userLocation":?{
??????"desc":?"你的位置信息將用于小程序位置接口的效果展示"?
????}},
而后用按鈕綁定函數(shù)getLocation(){
????wx.getLocation({
??????success:?function(res)?{
????????console.log(host+locaation);//longitude???latitude
????????//http://iwenwiki.com:3002/api/lbs/location?latitude=39.90&longitude=116.4
????????wx.request({
??????????url:?'http://iwenwiki.com:3002/api/lbs/location',
??????????data:{
????????????latitude:?res.latitude,
????????????longitude:?res.longitude
??????????},
??????????success:result=>{
????????????console.log(result);
????????????var?citys?=?result.data.result.ad_info.city;
????????????var?cityName?=?citys.slice(0,?citys.length-1);
????????????console.log(cityName);
????????????//?wx.reLaunch({??給全局變量
????????????console.log(app);
????????????app.globalData.cityname=cityName;????
????????????????wx.switchTab({
url:"../foodcare/foodcare"})
在這里的跳轉(zhuǎn)方法有幾種兆蕉，請(qǐng)注意
1?wx.switchTab(
2wx.relunch
3wx.navigator
對(duì)于更改頁(yè)面的cityname.返回的數(shù)據(jù)要將其cityName賦值給全局變量∫壮恚或用navigator攜帶參數(shù)包蓝，或用本地存儲(chǔ)?wx.setStorageSync('cityName',?citys);
這里有個(gè)bug测萎，無(wú)法點(diǎn)擊后返回
得重新刷新。不過(guò)可以在外部定義個(gè)全局變量
然后再在點(diǎn)擊定位和熱門城市的時(shí)候分別改變
再到這里使用if的判斷語(yǔ)句
???if?(app.globalData.cityname?&&app.globalData.num==1)?{
??????this.setData({
????????location:app.globalData.cityname
??????}),
????????wx.request({
??????url:?'http://iwenwiki.com:3002/api/foods/list',
??????data:{
????????city:this.data.location,
????????page:?1
