功能描述如以下
在首页关于轮滑图的设置
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 }) }
我们如果要请求数据的话一般都会到js中写wx.request代码。可如果我们发现有几个请求的内容代码格式都差不多的话。我们就可以在app.js中写一个公共代码，供全局使用。在app.js中，同样有的全局变量 App<IAppOption>({ globalData: { cityname:"" },。能搞供给各个页面之间传递参数。所以在轮播图中的数据请求我们就封装到了http这个函数之中
onLoad() {
// 获取app.js封装的网络请求发现报错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")
关于 用http 传递参数我们也需要注意 一点的是关于this这个页面的全局。在用this.setdata时，所以我们在app.js中定义的 http(url,that,arr)这里的that就是this .而在js页面中传入的参数为this赋值给了that..要在页面中使用app.js应该如此定义 const app = getApp()
还有若要在配一些公共属性如下图。也可在util中配置，使用方法 const {host,bannerurl,indexUrl}=require('../../utils/commn/config.js')
关于跳转的话 goodtail(e){ console.log(e) wx.navigateTo( {url:"../iindexdetail/indexdetail?id="+e.currentTarget.dataset.id} ) },
可以在wxml中直接使用naviga跳转。也能用点击事件进行跳转。，而这里使用了点击事件跳转。并设置了data-id传递参数给事件用e来实现。后面发起请求把id传到另外一个页面。如图。通过onload的opinion获取
<view class="list" wx:for="{{listArr}}" wx:key="index" bind:tap="goodtail" data-id="{{item.id}}">
然后下面要注意的就是css的样式问题。关于flex布局，关于位置，关于绝对定位相对定位。关于外距离和内距离。在不清楚时用border把边框标出来。然后还有一个问题是图片不能够撑满整个容器，那么请设置 image{ width: 100%; height: 125%;}
关于文字对齐请用align .还有文字溢出
关于轮播图还有的就是下面的3/5的设置
// 轮播触发--------------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 >
这里有个bindchange的函数来监控轮播图发生更改时候的事件参数id
<view class="biaodi">{{currrentIdex+1}}/{{bannerArr.length}}</view>
下面是进入了详细页面。先是使用到showtoastonLoad(opnion) {
// 网络请求的接口id和数据
console.log(opnion.id)
wx.showLoading(
{title:"数据拼命加载中",
duration:500
}
)
来为我们展示数据正在加载中。而当用wx.request请求完数据再用complete来最后加载数据
然后使用app.htt请求数据app.http(host+indexDetail+"id="+opnion.id,this,'info');
我们还要实现的是在导航栏实现一个加载动画 wx.showNavigationBarLoading();。就是这一部分
而且还要实现更改导航栏文字的功能 。我们已经在app.js的函数中使用了这个功能
wx.setNavigationBarTitle({
title:res.data[0].title
下面来到食物馆这个页面
同理我们先把这个导航栏的页面更改一下 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;
请注意flex-wrap 是一个CSS属性，用于确定当flex项目超出其容器的宽度时，它们是否应该换行。它与容器元素上的 display: flex 或 display: inline-flex 属性一起使用。flex-wrap 属性接受三个值：1. nowrap：这是默认值。它表示flex项目不会换行，即使它们溢出容器，也会在单行中显示。2. wrap：这个值允许flex项目在需要时换行到多行。换行发生在第一行填满后，后续项目会放置在新的行上。3. wrap-reverse：这个值与 wrap 类似，但它以相反的顺序换行。换行从容器的底部或右侧开始，并向上或向左移动。
在这里我们还实现了对模板的使用。因为对于有的html样式和css样式都是一样的，可以重复使用。那么这个时
候我们直接建造一个文件夹来存储我们的模板。
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>
请注意这里的问题...item为展开列表。如果不需展开请直接用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>
通过template的名字的不同可以定义多个模板{{item.buynum}}，{{item.name}}必须为item中拥有的键才能识别到
我们在这里还实现了下拉刷新的功能。在使用之前需要到app.json中的window中开启 "window": { "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#518890", "navigationBarTitleText": "食疗坊", "navigationBarTextStyle": "black", "enablePullDownRefresh": true },enable为true
对于这一部分
图片
并不是请求得来。而同样是在utli.js中配置。
众所都知，我们在html中不能够使用js代码，但能够使用wxss
这个使用为<wxs src="../../utils/str.wxs" module="tools" />
再让我们回到下拉刷新。可在监控函数中定义 onPullDownRefresh() {
console.log("下拉刷新数据");
// 下拉更新数据 功能1.下拉重新请求接口2请求上海的数据
wx.request({
url: host+foodlist,
data:{
city:"上海",
page:1
},
success:(res)=>{
this.setData({
listArr:res.data.data.result,
num:1
})
console.log(res.data,"更多数据");
}
})
}, * 页面相关事件处理函数--监听用户下拉动作下拉刷新,要到页面的json中设置background颜色
{
"usingComponents": {},
"backgroundColor": "#ff7695",
"onReachBottomDistance":20
}
onReachBottomDistance为触底事件
onReachBottom() {
this.data.num++;
console.log("加载更多数据",this.data.num)
// 请求数据的接口
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里面数组的数据和新请求的数组数据合并
} else {
console.log("没有更多数据了")
this.setData({
moreinfo:"我是有底线的"
})
}
//
console.log(res);
}
然后我们实现搜索框的请求功能。我们使用 <navigator url="../diinwei/diinwei">{{location}}</navigator>
</view>
<navigator class="search" url="../search/search?cityname={{location}}"> 请输入你想要的内容
<!-- <input type="text" placeholder="请搜索你喜欢的" bindinput="search"/> 这里能够使用两种方式-->
</navigator>
</view>
来跳转到另一个页面
找到搜索的接口，把返回的数据套子在模板上
搜索功能由input绑定事件实现<view class="header">
<!-- 用户输入内容，搜索内容，显示数据，事件 input组件 bindinput -->
<input type="text" focus="true" placeholder="请输入你喜欢的内容" bindinput="getinputVal"/>
</view>
然后再到js中定义函数
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('输入内容不能为空');
//清空数据
this.setData({
list:[]
})
}},
实现接口数据请求返回
请注意在这块的bug就是this.setdata的异步返回不会返回数据，只有object返回
还有要获取定位权限的。请在app.json中的window中添加以下代码 "requiredPrivateInfos": ["getLocation", "chooseLocation", "chooseAddress"],
"permission": {
"scope.userLocation": {
"desc": "你的位置信息将用于小程序位置接口的效果展示"
}},
而后用按钮绑定函数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"})
在这里的跳转方法有几种，请注意
1 wx.switchTab(
2wx.relunch
3wx.navigator
对于更改页面的cityname.返回的数据要将其cityName赋值给全局变量。或用navigator携带参数，或用本地存储 wx.setStorageSync('cityName', citys);
这里有个bug，无法点击后返回
得重新刷新。不过可以在外部定义个全局变量
然后再在点击定位和热门城市的时候分别改变
再到这里使用if的判断语句
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
网友评论