页面配置文件的作用
小程序中，每个页面都有自己的.json 配置文件,用来对当前页面的窗口外观、页面效果等进行配置。
页面配置和全局配置的关系
小程序中，app.json中的window节点，可以全局配置小程序中每个页面的窗口表现。
如果某些小程序页面想要拥有特殊的窗口表现，此时，“页面级别的 json配置文件”就可以实现这种需求。
注意:当页面配置与全局配置冲突时，根据就近原则,最终的效果以页面配置为准。
页面配置中常用的配置项
小程序中网络数据请求的限制
出于安全性方面的考虑，小程序官方对数据接口的请求做出了如下
两个限制:
①只能请求HTTPS类型的接口
②必须将接口的域名添加到信任列表中
配置request合法域名
配置步骤:登录微信小程序管理后台->开发->开发设置->服务器域名->修改request合法域名
注意事项:
①域名只支持https协议
②域名不能使用IP地址或localhost
③域名必须经过ICP备案
④服务器域名一个月内最多可申请5次修改
发起GET请求
调用微信小程序提供的wx.request()方法，可以发起GET数据请求
发起POST请求url: ’ ’ //请求的接口地址，必须基于https 协议
method:‘GET’ //请求的方式
date:{ } //发送到服务器的数据
success: (res) => {
consolelog(res)
} //请求成功之后的回调函数
调用微信小程序提供的wx.request()方法，可以发起POST数据请求
url: ’ ’ //请求的接口地址，必须基于https 协议
method:‘POST’ //请求的方式
date:{ } //发送到服务器的数据
success: (res) => {
consolelog(res)
} //请求成功之后的回调函数
在页面刚加载时请求数据
在很多情况下，我们需要在页面刚加载的时候，自动请求一些初始化的数据。此时需要在页面的onLoad事件中调用获取数据的函数
跳过request合法域名校验
如果后端程序员仅仅提供了http协议的接口、暂时没有提供https协议的接口。
此时为了不耽误开发的进度，我们可以在微信开发者工具中，临时
开启「开发环境不校验请求域名、TLS版本及HTTPS证书」选项,
跳过request合法域名的校验。
关于跨域和Ajax的说明
跨域问题只存在于基于浏览器的Web开发中。由于小程序的宿主环境不是浏览器，而是微信客户端，所以小程序中不存在跨域的问题。
Ajax技术的核心是依赖于浏览器中的XMLHttpRequest这个对象，由于小程序的宿主环境是微信客户端，所 以小程序中不能叫做“发起Ajax请求”,而是叫做“发起网络数据请求’
案例
app.json
{ "pages":[ "pages/home/home", "pages/message/message", "pages/contact/contact" ], "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#2b4b6b", "navigationBarTitleText": "本地生活", "navigationBarTextStyle":"white" }, "tabBar": { "list": [{ "pagePath": "pages/home/home", "text": "首页", "iconPath": "/pages/img/home.png", "selectedIconPath": "/pages/img/home2.png" },{ "pagePath": "pages/message/message", "text": "多人", "iconPath": "/pages/img/众多用户.png", "selectedIconPath": "/pages/img/众多用户(1).png" },{ "pagePath": "pages/contact/contact", "text": "更多", "iconPath": "/pages/img/更多2.png", "selectedIconPath": "/pages/img/更多2(1).png" }] }, "style": "v2", "sitemapLocation": "sitemap.json" } // pages/home/home.js
Page({
/**
* 页面的初始数据
*/
data: {
swiperList:[],
jggList:[]
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
this.getSwiperList(),
this.getjggList()
},
getSwiperList(){
wx.request({
url: 'https://www.escook.cn/slides',
method:'GET',
success:(res)=>{
console.log(res)
this.setData({
swiperList:res.data
})
}
})
},
getjggList(){
wx.request({
url: 'https://www.escook.cn/categories',
method:'GET',
success:(res)=>{
console.log(res)
this.setData({
jggList:res.data
})
}
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
}
})<!--pages/home/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="{{jggList}}" wx:key="id">
<image src="{{item.icon}}"></image>
<text>{{item.name}}</text>
</view>
</view>
<view class="img-box">
<image src="" mode="widthFix"></image>
<image src="" mode="widthFix"></image>
</view>/* pages/home/home.wxss */
swiper{
height: 350rpx;
}
swiper image{
width: 100%;
height: 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-content: center;
align-items: 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%;
}
