【小程序】小程序学习03_getswiperlist-CSDN博客

本文链接：https://blog.csdn.net/qq_28802325/article/details/122798916

03-全局配置

全局配置文件：app.json

pages小程序所有页面存放路径
window小程序窗口外观
tabBar小程序底部tabBar效果
style是否启用新版本的组件样式

window

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

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

    "navigationBarBackgroundColor": "#0078d7",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle": "white",

    "enablePullDownRefresh": true,
    "onReachBottomDistance": 50 
},

tabBar

基础

底部tabBar
顶部tabBar

最少2个，最多5个tab标签

渲染顶部tabBar时，不显示icon，只显示文本

6个组成部分：

tabBar节点的配置项：

每个tab项的配置选项：

tabBar与pages、window平级
"tabBar": {
    "list": [
        {
            "pagePath": "pages/11tabBar/11tabBar",
            "text": "index"
        },
        {
            "pagePath": "pages/list/list",
            "text": "list"
        }
    ]
},

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

案例：配置tabBar

拷贝图标资源
新建3个tab页面
配置tabBar选项

"tabBar": {
    "selectedColor": "#ff0000",
    "backgroundColor": "#efefef",
    "borderStyle": "white",
    "list": [
        {
            "pagePath": "pages/11tabHome/11tabHome",
            "text": "Home",
            "iconPath": "/icon/shouye.png",
            "selectedIconPath": "/icon/shouye-active.png"
        },
        {
            "pagePath": "pages/11tabUser/11tabUser",
            "text": "User",
            "iconPath": "/icon/yonghu.png",
            "selectedIconPath": "/icon/yonghu-active.png"
        },
        {
            "pagePath": "pages/11tabSetting/11tabSetting",
            "text": "Setting",
            "iconPath": "/icon/shezhi.png",
            "selectedIconPath": "/icon/shezhi-active.png"
        }
    ]
},

页面配置

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

页面的json配置可以覆盖app.json配置

页面配置常用配置项：

网络数据请求

数据请求限制

只能请求HTTPS类型的接口
必须将接口的域名添加到信任列表中

配置request合法域名

需求描述：假设在自己的微信小程序中，希望请求https://www.escook.cn/域名下的接口

配置步骤：

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

注意事项：

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

可在开发工具详情中关闭域名合法校验，仅在开发中使用

发起GET请求

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

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

// 发起GET请求
getInfo() {
    wx.request({
        url: 'https://www.escook.cn/api/get',
        method: 'GET',
        data: {
            name: 'hai',
            age: 22
        },
        success: (res) => {
            console.log('res',res.data)
        }
    })
},

发起POST请求

调用wx.request()方法，发起POST数据请求

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

// 发起POST请求
postInfo() {
    wx.request({
        url: 'https://www.escook.cn/api/post',
        method: 'POST',
        data: {
            name: 'hai',
            age: 22,
            gender: '男'
        },
        success: (res) => {
            console.log('POST:', res.data)
        }
    })
},

页面加载时请求数据

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

在onLoad()方法中调用即可

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

this表示当前页面的实例

跨域和Ajax

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

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

案例-本地生活

轮播图
功能区
版块
tabBar

解决控制台出现该情况

project.config.json中修改"setting"

添加"checkSiteMap": false

index.js

data: {
    // 存放轮播数据的列表
    swiperList: [],
    // 存放九宫格数据的列表
    gridList: []        
},
// 获取轮播图数据的方法
getSwiperList() {
    wx.request({
        url: 'https://www.escook.cn/slides',
        method: 'GET',
        success: (res) => {
            console.log(res.data)
            this.setData({
                swiperList: res.data
            })
        }
    })
},
// 获取九宫格数据的方法
getGridList() {
    wx.request({
        url: 'https://www.escook.cn/categories',
        method: 'GET',
        success: (res) => {
            console.log(res.data)
            this.setData({
                gridList: res.data
            })
        }
    })
},
// 启动事件
onLoad() {
    this.getSwiperList()
    this.getGridList()
},

index.wxml

<!-- 轮播图 -->
<swiper circular indicator-dots>
    <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/高木1.jpg" mode="widthFix"></image>
    <image src="/images/高木2.jpg" mode="widthFix"></image>
</view>

index.wxss

swiper {
  height: 350rpx;
}

swiper image {
  width: 100%;
  height: 100%;
}

.grid-list {
  display: flex;
  flex-wrap: wrap;
  border-bottom: 1rpx solid rgb(197, 154, 154);
  border-top: 1rpx solid rgb(197, 154, 154);
}

.grid-item {
  width: 33.33%;
  height: 200rpx;
  display: flex;
  /* 内容纵向布局 */
  flex-direction: column;
  /* 垂直居中 */
  align-items: center;
  /* 水平居中 */
  justify-content: center;
  /* ??? */
  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%;
}