wx:if和hidden
<view wx:if="{{isShow}}">wx:if</view>
<view hidden="{{isShow}}">hidden</view>
区别：
wx:if : 切换的时候销毁或重新渲染；wx:if 是惰性的，在初始条件为 false，框架什么也不做，在条件第一次变成真的时候才开始局部渲染。
hidden : 组件始终会被渲染，只是简单的控制显示与隐藏。
使⽤
频繁切换使⽤ hidden , 运⾏时条件变化使⽤ wx: if
网络请求
网络请求限制
出于安全考虑，小程序对数据接口的请求有要求：
- 只能请求https类型的接口
- 必须将接口的域名添加到信任列表中
配置合法域名
登录小程序公众平台--->开发管理---->开发设置--->服务器域名--->修改合法域名
发起GET请求
wx.request({
url: 'example.php', //仅为示例，并非真实的接口地址
method:'GET',
data: {
x: '',
y: ''
},
header: {
'content-type': 'application/json' // 默认值
},
success (res) {
console.log(res.data)
}
})
在页面刚加载时请求数据
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
this.getData()
},
getData(){
wx.request({
url: 'https://www.escook.cn/slides', //仅为示例，并非真实的接口地址
method:'GET',
header: {
'content-type': 'application/json' // 默认值
},
success:(res)=>{
// console.log(res.data)
this.setData({
banners:res.data
})
}
})
},
发起Post请求
wx.request({
url: 'example.php', //仅为示例，并非真实的接口地址
method:'POST',
data: {
x: '',
y: ''
},
header: {
'content-type': 'application/json' // 默认值
},
success (res) {
console.log(res.data)
}
})
跳过request合法域名校验
后端程序员仅仅提供了http协议的接口，需要不校验合法域名
微信开发者工具---->详情---->不校验合法域名
没有跨域
跨域只存在于浏览器的web开发中，小程序是运行在微信环境中，小程序不存在跨域问题
Ajax技术的核心是依赖于浏览器的 XMLHttpRequest 对象，小程序是运行在微信环境中没有这个对象，小程序不能叫做ajax请求 叫做发起网络数据请求
页面导航
页面导航的两种方式
-
声明式导航
在页面上声明 导航组件，url属性是导航地址
-
编程式导航
调用小程序的导航API，实现页面跳转
声明式导航
导航到tabBar页面
tabBar页面是被配置为tabBar的页面
navigator组件，需要指定url属性和open-type属性
url: 跳转页面的地址 必须以 / 开头
open-type 跳转的方式 值为switchTab
<navigator url="/pages/home/home" open-type="switchTab">跳转到home</navigator>
导航到非tabBar页面
tabBar页面是被配置为tabBar的页面
navigator组件，需要指定url属性和open-type属性
url: 跳转页面的地址 必须以 / 开头
open-type 跳转的方式 值为navigate
<navigator url="/pages/cart/cart" open-type="navigate">cart</navigator>
导航到非tabBar页面时，open-type="navigate" 可以省略
后退导航
如果要后退到上一页面或多级页面，需要指定open-type和delta属性
open-type 的值必须是navigateBack ，表示要进行后退导航
delta 的值必须是数字，表示后退的层级
<navigator open-type="navigateBack" delta="1">返回</navigator>
如果只是返回到上一页面，可以省略delta=“1”，因为默认值为1
传参
/pages/cart/cart?id=2&name=zs
- 参数和路径直接使用？分割
- 参数名和参数值之间用 =
- 不同参数用 & 分割
<navigator url="/pages/cart/cart?id=2&name=zs" open-type="navigate">跳转到home</navigator>
<navigator url="/pages/cart/cart?id={{num}}&name=zs" open-type="navigate">跳转到home</navigator>
编程式导航
导航到tabBar
wx.switchTab({
url: '/pages/home/home',
})
导航到非tabBar
wx.navigateTo({
url: '/pages/cart/cart',
})
后退导航
wx.navigateBack({
delta:1
})
传参
wx.switchTab({
url: '/pages/cart/cart?id=23&name=zs',
})
wx.switchTab({
url: `/pages/cart/cart?id=${this.data.num}&name=zs`,
})
在onLoad中接收参数
onLoad(options) {
console.log(options,"options") //{id: "23", name: "zs"}
},
页面事件
下拉刷新
手指在屏幕上下拉滑动操作，重新加载页面数据
步骤
1启动下拉刷新
-
全局开启下拉刷新
在app.json 的window节点中，enablePullDownRefresh:true
-
局部开启下拉刷新
在页面的.json文件中，enablePullDownRefresh:true
2配置下拉刷新窗口样式
backgroundTextStyle:dark 下拉的loading的效果
backgroundColor 窗口的背景颜色
3监听下拉刷新事件
通过onPullDownRefresh()监听用户下拉事件
4停止下拉刷新动作
// 数据重置成功，调用该函数，关闭下拉刷新的效果
wx.stopPullDownRefresh()
上拉加载
手指在屏幕上上拉滑动操作，加载更多数据
步骤
配置上拉触底距离
- 全局配置 onReachBottomDistance：60
- 局部配置 onReachBottomDistance ：60
监听页面的上拉触底事件
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
console.log("触发了上拉触底事件")
},
上拉触底案例
- 定义获取随机颜色的方法
- 在页面加载时获取初始数据
- 渲染页面解构 美化效果
- 上拉触底时调用获取随机颜色的方法
- 添加loading提示效果
定义获取随机颜色的方法
// 1定义获取随机颜色的方法
getColors(){
wx.request({
url: 'https://www.escook.cn/api/color',
method:'GET',
success:(data)=>{
console.log(data.data.data)
this.setData({
colorList:data.data.data
})
}
})
},
在页面加载时获取初始数据
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
this. getColors()
},
渲染页面解构 美化效果
<view class="box" wx:for="{{colorList}}" wx:key="*this" style="background-color:rgb({{item}}) ;">{{item}}</view>
上拉触底时调用获取随机颜色的方法
赋值一定要进行数组的合并
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
console.log("触发了上拉触底事件")
this.getColors()
},
// 1定义获取随机颜色的方法
getColors(){
wx.request({
url: 'https://www.escook.cn/api/color',
method:'GET',
success:(data)=>{
console.log(data.data.data)
this.setData({
colorList:[...this.data.colorList,...data.data.data]
})
}
})
},
