小程序:tabBar页面配置,发送请求,案例,

103 阅读1分钟

图标存放

  • 首先图标要存放在,与page平齐的images文件夹里面;
  • 选中时的图标样式和未选中的图标样式各放置一个;

跳转的页面路径

  • 在app.json里面的pages,存放跳转路径,必须要放在最前面;

图标引用

  • 在app.json文件里面,与window平齐,添加一个tabBar对象;
 "tabBar":{
    "list":[
      {
        "pagePath": "pages/index/index",
        "text":"首页",
        "iconPath": "/images/tabs/home.png",
        "selectedIconPath": "/images/tabs/home-active.png"
      },
      {"pagePath": "pages/swiper/swiper",
      "text":"消息",
      "iconPath": "/images/tabs/message.png",
      "selectedIconPath": "/images/tabs/message-active.png"}
    ]
  },

image.png

全局配置navigationBarTitleText未生效

  • 把里面的这个属性去掉就可以了,"navigationStyle": "custom",

发送请求

  • 首先要配置域名;
  • 才能使用域名下的接口;
getInfo(){
  wx.request({
   //请求接口的地址
    url:'https://applet-base-api-t.itheima.net/api/get',
    method:'GET', //请求的方式
    data:{        //发送到服务器的数据
      name:'zs',
      age:20
    },
    success:(res)=>{  //请求成功后的回调函数
      console.log(res.data)
    }
  })

},

页面加载时请求数据

  • 此时需要在onload事件中调用获取数据的函数;

页面导航

  • 声明式导航
    • 在页面上声明一个导航组件;
    • 通过点击组件实现页面跳转
  • 编程式导航
    • 调用小程序的导航API,实现页面跳转