配置信息与网络请求
一、全局配置
1. 全局配置文件以及常用的配置项
1.1 全局配置文件
小程序根目录下的app.json
文件是小程序的全局配置文件
。常用的配置项如下:
- pages
记录当前小程序所有页面的存放路径
window
全局设置小程序窗口的外观
tabBar
设置小程序底部的tabBar
效果- style
是否启用新版
的组件样式
{
"pages":[
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "Weixin",
"navigationBarTextStyle":"black"
},
"style": "v2",//删掉该配置项就是默认使用旧版本的组件样式(目前不推荐删掉)
"sitemapLocation": "sitemap.json"
}
1.2 小程序窗口组成部分
2. 全局配置 - window
window:
主要用于全局配置小程序的外观。
2.1 window - 常用节点配置项
2.2 window - 设置导航栏的标题
设置步骤: app.json -> window -> navigationBarTitleText
{
"pages":[
"pages/test/test",
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",//下拉loading的样式,仅支持dark/light
"navigationBarBackgroundColor": "#fff",//导航栏背景色,不支持文本颜色如"red".仅支持十六进制颜色
"navigationBarTitleText": "我是导航标题", //导航栏标题
"navigationBarTextStyle":"black", //导航栏文本颜色
"enablePullDownRefresh": true,//开启下拉刷新
},
"style": "v2",
"sitemapLocation": "sitemap.json"
}
2.3 全局开启下拉刷新
功能
概念:下拉刷新
是移动端的专有名词,指的是通过手指在屏幕.上的下拉滑动操作,从而重新加载页面数据的行为
。
(这个是全局的)设置步骤: app.json -> window ->
把enablePullDownRefresh
的值设置为true
;
注意:在
app.json
中启用下拉刷新功能,会作用于每个小程序页面!
2.4 设置下拉刷新时窗口的背景色
当全局开启下拉刷新功
能之后,默认
的窗口背景为白色
。如果自定义下拉刷新窗口背景色,设置步骤为:
app.json -> window ->
为backgroundColor
指定16进制
的颜色值#efefef
。效果如下:
"window":{
"backgroundTextStyle":"dark",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "我是导航标题",
"navigationBarTextStyle":"black",
"enablePullDownRefresh": true,//开启下拉刷新
"backgroundColor": "#efefef",//设置下拉刷新背景色
},
2.5 设置下拉刷新时loading的样式
当全局开启下拉刷新功能
之后,默认
窗口的loading
样式为白色
,如果要更改loading样式的效果,设置步骤为app.json -> window ->
为backgroundTextStyle
指定dark
或light
值。
注意: backgroundTextStyle 的可选值只有
light
和dark
2.6 设置上拉触底
的距离
概念: .上拉触底
是移动端的专有名词,通过手指在屏幕上的.上拉滑动操作,从而加载更多数据的行为。
设置步骤: app.json -> window ->
为onReachBottomDistance
设置新的数值
"window":{
"backgroundTextStyle":"dark",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "我是导航标题",
"navigationBarTextStyle":"black",
"enablePullDownRefresh": true,
"backgroundColor": "#efefef",
"onReachBottomDistance": 100//上拉触底距离
}
注意:
默认
距离为50px
,如果没有特殊需求,建议使用默认值即可。
3. 全局配置- tabBar
3.1 什么是tabBar
tabBar
是移动端应用常见的页面效果,用于实现多页的快速切换。小程序中通常将其分为:
- 底部tabBar
- 顶部tabBar
注意:
- tabBar中只 能配置
最少2个、最多5个
tab页签. - 当渲染
顶部tabBar
时,不显示icon
,只显示文本
3.2 tabBar的6个组成部分
backgroundColor
: tabBar的背景色selectedlconPath
: 选中时的图片路径borderStyle
: tabBar. 上边框的颜色iconPath
: 未选中时的图片路径selectedColor
: tab. 上的文字选中时的颜色color
: tab.上文字的默认(未选中)颜色
3.3 tabBar节点的配置项
3.3.1 配置项属性列表说明
list
是必选项
,其他的都是可选项!
tabBar
与window、pages等都是平级的;
每个tab项
的配置选项:
pagePath
和text
是必选项,其他的是可选项
3.3.2 正常显示tabBar
{
//页面创建
"pages":[
"pages/home/home",
"pages/msg/msg",
"pages/index/index",
"pages/logs/logs"
],
//小程序窗口设置
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "Weixin",
"navigationBarTextStyle":"black"
},
//tabBar菜单选项配置
"tabBar": {
"position": "bottom",
"borderStyle":"black",
"color": "#75878a",
"selectedColor": "#f00056",
"backgroundColor": "#f0f0f4",
"list": [{
"pagePath": "pages/home/home",
"text": "主页",
"iconPath": "/icon/tabBar/home1.png",
"selectedIconPath": "/icon/tabBar/home2.png"
},
{
"pagePath": "pages/msg/msg",
"text": "消息页面",
"iconPath": "/icon/tabBar/msg1.png",
"selectedIconPath": "/icon/tabBar/msg2.png"
}]
},
//样式版本
"style": "v2",
"sitemapLocation": "sitemap.json"
}
//配置项文件中不能有注释
3.3.3 无法显示tabBar问题
注意:tabBar的页面
必须放到所有页面的前面
,否则无法显示tabBar如下列代码,若将
"pages/home/home"和"pages/msg/msg"
tabbar页面放到"pages/index/index","pages/logs/logs"
之后则无法显示tabBar菜单选项。
{
//页面创建
"pages":[
//非tabBar页面
"pages/index/index",
"pages/logs/logs"
//tabBar页面
"pages/home/home",
"pages/msg/msg",
],
//tabBar菜单选项配置
"tabBar": {
"position": "bottom",
"borderStyle":"black",
"color": "#75878a",
"selectedColor": "#f00056",
"backgroundColor": "#f0f0f4",
"list": [{
"pagePath": "pages/home/home",
"text": "主页",
"iconPath": "/icon/tabBar/home1.png",
"selectedIconPath": "/icon/tabBar/home2.png"
},
{
"pagePath": "pages/msg/msg",
"text": "消息页面",
"iconPath": "/icon/tabBar/msg1.png",
"selectedIconPath": "/icon/tabBar/msg2.png"
}]
}
}
//配置项文件中不能有注释
二、页面配置
2.1 页面配置文件的作用
小程序中,每个页面都有自己的json配置文件
,用来对当前页面
的窗口外观、页面效果等进行配置。
2.2 页面配置和全局配置的关系
小程序中,app.json
中的window
节点,可以全局配置
小程序中每个页面的窗口表现。如果某些小程序页面想要拥有特殊的窗口表现
,此时,“页面级别
的 .json配置文件
”就可以实现这种需求。
注意: 当页面配置与全局配置
冲突
时,根据就近原则
,最终的效果以页面配置为准
。
2.3 页面常用配置项
如下示例:
{
"usingComponents": {
},
"navigationBarBackgroundColor": "#f2ecde",
"navigationBarTextStyle": "black",
"navigationBarTitleText": "消息页面",
"backgroundColor": "#f0fcff"
}
三、网络请求 - GET和POST
3.1 小程序中网络数据请求的限制
出于安全性
方面的考虑,小程序官方对数据接口的请求
做出了如下两个限制:
- 只能请求
HTTPS
类型的接口 - 必须将
接口的域名
添加到信任列表
中
注意事项:
- 域名只支持
https协议
- 域名
不能
使用IP地址
或localhost
- 域名
必须
经过ICP备案
- 服务器域名- -个月内
最多
可申请5次修改
3.2 配置request合法域名
需求描述:假设在自己的微信小程序中,希望请求https:/ /www.escook.cn/
域名下的接口
配置步骤:登录微信小程序管理后台
->开发
->开发设置-
>服务器域名
->修改request合法域名
官方说明的是,一个月只能修改5次,下面是显示错误,
谨慎修改!
!
3.3 发起GET请求
调用微信小程序提供的wx.request()
方法,可以发起GET数据请求(下面接口是没有功能的,所以没有东些
),示例代码如下:
3.4 发起POST请求
调用微信小程序提供的wx.request()
方法,可以发起POST
数据请求,示例代码如下:
wxml:
<!--pages/index/index.wxml-->
<button bindtap="getInfo" type="primary">发起GET请求</button>
---
<button bindtap="postInfo" type="primary">发起POST请求</button>
js文件:
// pages/index/index.js
Page({
/**
* 页面的初始数据
*/
data: {
},
// 发起一个get请求
getInfo(){
wx.request({
url:'https://api.aa1.cn',//请求接口地址
method:'GET',//请求方式
// data:{//发送到服务器的数据
// name:'zs',
// age:20
// },
success:(res)=>{
//请求成功的回调函数
console.log(res);
}
})
},
// 发起一个post请求
postInfo(){
wx.request({
url:'https://api.aa1.cn',//请求接口地址
method:'POST',//请求方式
data:{
//发送到服务器的数据
name:'zs',
age:20
},
success:(res)=>{
//请求成功的回调函数
console.log("发送post回调函数==>",res);
}
})
},
})
3.5 页面刚加载时请求数据
页面刚加载时初始化数据
,此时可以使用onLoad事件
中调用获取数据的函数:
/**
生命周期函数 - 监听页面加载
*/
onLoad(options) {
this.getSwiperList()
this.GridList()
},
//获取轮播图的函数
getSwiperList(){
...
},
//获取九宫格的数据
GridList(){
...
}
3.6 网络请求 - request请求的注意事项
3.6.1 跳过request合法域名校验
情景:后台只有HTTP
接口,没有准备HTTPS接口协议
;
解决方式:临时开启开发环境不校验请求域名、TLS版本以及HTTPS证书选项
,跳过request合法域名检测;
注意:跳过request合法域名校验的选项,
仅限
在开发与调试阶段
使用,上线的时候需要关闭!
3.6.2 关于Ajax跨域问题说明
跨域
问题只存在于浏览器web端
,小程序
不是浏览器端,而是基于微信客户端
,所以微信小程序不存在跨域问题
!
Ajax技术核心
是依赖于浏览器中的XMLHttpRequest
这个对象,由于微信小程序的宿主环境是微信客户端
,所以小程序中不能叫做
“发起Ajax请求”,而是叫做“发起网络数据请求
”。
四、总结
- 能够使用WXML模板语法渲染页面结构
wx:if
、wxelif、wx:else、hidden、wx:for、wx:key
- 能够使用WXSS样式美化页面结构
rpx 尺寸单位
、@import 样式导入、全局样式和局部样式
- 能够使用app.json对小程序进行全局性配置
- pages、
window、tabBar
、style
- 能够使用 page.json 对小程序页面进行个性化配置
- 对单个页面进行个性化配置、
就近原则
- 能够知道如何发起网络数据请求
wx.request()
方法、onLoad()
事件
链接: 快捷回顾WXML语法