2023-10-06放完假后理一下



功能描述如以下

在首页关于轮滑图的设置

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

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 213,254评论 6赞 492
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 90,875评论 3赞 387
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 158,682评论 0赞 348
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 56,896评论 1赞 285
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 66,015评论 6赞 385
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 50,152评论 1赞 291
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,208评论 3赞 412
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,962评论 0赞 268
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,388评论 1赞 304
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,700评论 2赞 327
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,867评论 1赞 341
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,551评论 4赞 335
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,186评论 3赞 317
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,901评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,142评论 1赞 267
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,689评论 2赞 362
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,757评论 2赞 351

推荐阅读更多精彩内容