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%;
}