小程序学习 day2-全局配置、页面配置、网络数据请求

目录

全局配置

全局配置文件及常用配置项

window

导航栏

下拉刷新

上拉触底

tabBar

页面配置

网络数据请求

请求限制

配置request合法域名

发起GET请求

发起POST请求

​编辑

页面刚加载请求数据

跨域和Ajax

案例——本地生活

---

全局配置

全局配置文件及常用配置项

全局配置文件：app.json

常用配置项：

• pages：记录当前小程序所有页面存放路径
• window：全局设置小程序窗口外观
• tabBar：设置小程序底部tabBar效果
• style：是否启用新版本的组件样式

小程序窗口组成部分

window

window结点常用配置项

• navigationBar-导航栏区域
• background-背景区域
• wxml页面主体区域

导航栏

• 标题设置步骤：app.json->window->navigationBarTitleText
• 背景设置：app.json->window->navigationBarBackgroundColor   （注：只能设置16进制 例：#2b4b6b）
• 导航栏标题颜色：app.json->window->navigationBarTextStyle    （注：可选值只有black和white）

"window": {
    "navigationBarTextStyle": "white",
    "navigationBarTitleText": "黑马程序员",
    "navigationBarBackgroundColor": "#2b4b6b"
  },

下拉刷新

设置下拉刷新加载数据：app.json->window->enablePullDownRefresh     值设置为true

下拉刷新在模拟器可以自动闭合，但在真机上并不能自动闭合，后续讲解

自定义下拉刷新窗口背景： app.json->window->backgroundColor  注：只能设置16进制 例：#efefef）

设置下拉刷新loading样式：  app.json->window->backgroundTextStyle  注：默认值是white，可选值只有white和dark

"window": {
    "enablePullDownRefresh":true,
    "backgroundColor": "#efefef",
    "backgroundTextStyle":"dark",

  },

上拉触底

设置步骤： app.json->window->onReachBottomDistance设置新的数值

注意：默认距离为50px，没有特殊要求，使用默认即可。

该值指滚动条距离底部不足50px，自动触发加载

"window": {
    "onReachBottomDistance":100
  },

tabBar

tabBar定义要在window后跟着，不在window里面

运用于实现多页面的快速切换。通常分为：

• 底部tabBar
• 顶部tabBar

• tabBar只能配置最少2个、最多5个tab页签
• 当渲染顶部tabBar时，不显示icon，只显示文本

tabBar的6个组成部分

tabBar节点配置项

每个tab项的配置选项

list的里面的元素顺序要看你上面pages的顺序一样，比如你第一个是index，那你tabBar里list的第一个元素必须是index

第一个pagePath必须得是当前小程序的主页，否则不显示

案例——配置tabBar

1、准备图标，分为含-active选中图标和  不含-active默认图标

2、新建3个tab页面：home、message、contact

3、配置tabBar

"tabBar": {
    "list": [{
      "pagePath": "pages/home/home",
      "text": "首页",
      "iconPath": "/images/tabs/home.png",
      "selectedIconPath": "/images/tabs/home-active.png"
    },
    {
      "pagePath": "pages/message/message",
      "text": "消息",
      "iconPath": "/images/tabs/message.png",
      "selectedIconPath": "/images/tabs/message-active.png"
    },
    {
      "pagePath": "pages/contact/contact",
      "text": "联系人",
      "iconPath": "/images/tabs/contant.png",
      "selectedIconPath": "/images/tabs/contant-active.png"
    }
  ]
  },

页面配置

每个页面都有自己的.json配置文件，用来对当前页面的窗口外观、页面效果等进行配置。

页面的json配置可以覆盖app.json配置,即冲突时，就近原则

常用配置项

{
  "usingComponents": {},
  "navigationBarBackgroundColor": "#ff0000",
  "navigationBarTextStyle":"black",
  "navigationBarTitleText": "消息页面"
}

网络数据请求

请求限制

1、只能请求HTTPS类型的接口

2、必须将接口的域名添加到信任列表中

配置request合法域名

需求描述：假设在自己的微信小程序中，希望请求https://applet-base-api-t.itheima.net/域名下的接口

配置步骤：管理后台->开发管理->开发设置->服务器域名->修改 request合法域名

注意事项：

1. 域名只支持https协议
2. 域名不能使用IP地址或localhost
3. 域名必须经过ICP备案
4. 服务器域名一个月内最多可申请5次修改

发起GET请求

调用wx.request()方法，发起GET请求

.wxml

<button bindtap="getInfo">发起GET请求</button>

.js

  getInfo(){
    wx.request({
      url: 'https://applet-base-api-t.itheima.net/api/get',
      method: 'GET',
      data: {
          name: 'hai',
          age: 22
      },
      success: (res) => {
          console.log('res',res.data)
      }
  })
  },

发起POST请求

<button bindtap="postInfo">发起POST请求</button>

.js

postInfo(){
    wx.request({
      url: 'https://applet-base-api-t.itheima.net/api/post',
      method: 'POST',
      data: {
          name: 'll',
          age: 12
      },
      success: (res) => {
          console.log(res.data)
      }
  })
  },

页面刚加载请求数据

在某些场景中，需要页面加载时，自动请求一些初始化的数据

在onLoad()方法中调用即可

 onLoad(options) {
    this.getInfo(),
    this.postInfo()
  },

跳过合法域名校验

跨域和Ajax

跨域问题只存在于基于浏览器的Web开发中。由于小程序的宿主环境不是浏览器，而是微信客户端，所以小程序中不存在跨域的问题。

Ajax技术的核心是依赖于浏览器中的XMLHttpRequest这个对象，由于小程序的宿主环境是微信客户端，所以小程序中不能叫做“发起Ajax请求”，而是叫做“发起网络数据请求”。

案例——本地生活

box-sizing:因为有边框所以撑大了盒子体积，border-box相当于体积规定死边框不影响

home.wxss

swiper {
  height: 350rpx;
}
swiper image{
  height: 100%;
  width: 100%;
}
.grid-list {
  display: flex;
  flex-wrap: wrap;
  border-left: 1rpx solid #efefef;
  border-top: 1rpx solid #efefef;
}
.grid-item {
  width: 33.33%;
  height: 200rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-right: 1rpx solid #efefef;
  border-bottom: 1rpx solid #efefef;
  box-sizing: border-box;
}
.grid-item image{
  width: 60rpx;
  height: 60rpx;
}
.grid-item text {
  font-size: 24rpx;
  margin-top: 10rpx;
}
.img-box {
  display: flex;
  padding: 20rpx 10rpx;
  justify-content: space-around;
}
.img-box image{
  width: 45%;
}

home.wxml

<!-- 轮播图区域 -->
<swiper  indicator-dots circular>
  <swiper-item wx:for="{{swiperList}}" wx:key="id">
    <image src="{{item.image}}"></image>
  </swiper-item>
</swiper>

<!-- 九宫格区域 -->
<view class="grid-list">
  <view class="grid-item" wx:for="{{gridList}}" wx:key="id">
    <image src="{{item.icon}}"></image>
    <text>{{item.name}}</text>
  </view>
</view>

<!-- 图片区域 -->
<view class="img-box">
    <image src="/images/link-01.png" mode="widthFix"></image>
    <image src="/images/link-02.png" mode="widthFix"></image>
</view>

home.js

data: {
    //存放轮播图数据
    swiperList: [],
    //九宫格
    gridList: []
  },

 
  onLoad(options) {
    this.getswiperList(),
    this.getgridList()
  },
  getswiperList(){
    wx.request({
      url: 'https://applet-base-api-t.itheima.net/slides',
      method: 'GET',
      success: (res)=>{
        console.log(res)
        this.setData({
          swiperList: res.data
        })
      }
    })
  },
  getgridList(){
    wx.request({
      url: 'https://applet-base-api-t.itheima.net/categories',
      method: 'GET',
      success: (re)=>{
        console.log(re)
        this.setData({
          gridList: re.data
        })
      }
    })
  },

 

app.json

  "pages": [  
    "pages/home/home",
    "pages/message/message",
    "pages/contact/contact"
  ],
  "window": {
    "navigationBarTextStyle": "white",
    "navigationBarTitleText": "本地生活",
    "navigationBarBackgroundColor": "#2b4b6b"
  },
  "tabBar": {
    "list": [{
      "pagePath": "pages/home/home",
      "text": "首页",
      "iconPath": "/images/tabs/home.png",
      "selectedIconPath": "/images/tabs/home-active.png"
    },
    {
      "pagePath": "pages/message/message",
      "text": "消息",
      "iconPath": "/images/tabs/message.png",
      "selectedIconPath": "/images/tabs/message-active.png"
    },
    {
      "pagePath": "pages/contact/contact",
      "text": "联系我们",
      "iconPath": "/images/tabs/contact.png",
      "selectedIconPath": "/images/tabs/contact-active.png"
    }
  ]
  },