此笔记参考b站 黑马程序员微信小程序开发视频
小程序 - 视图与逻辑
1. 页面导航
1. 页面导航 - 页面之间的相互跳转
浏览器实现导航的方式有两种：
<a> 链接- location.href
小程序实现导航的方式有两种：
-
声明式导航
在页面上声明一个
<navigator>导航组件
通过点击<navigator>组件实现页面跳转 -
编程式导航
调用小程序的导航API，实现页面的跳转
2. 声明式导航（直接在wxml 标签里指定属性）
1. 导航到 tabBar 页面
导航到tabBar页面（必须要有open-type=“switchTab”）
url必须 / 开头
2. 导航到 非tabBar页面
导航到非 tabBar 页面（open-type=“navigate”）（其实可以省略不写）
url必须 / 开头
3. 后退导航
（open-type=“navigateBack”）
delta=“1”（默认值，后退一页可以不写）
3. 编程式导航（在js文件中 调用 wx.方法）
1. 导航到 tabBar 页面
url 后不能带参数
**示例：**跳转到 tabBar 页面 wx.switchTab({})
2. 导航到 非tabBar 页面
url 后可以带参数
**示例：**跳转到非 tabBar 页面 wx.navigateTo({})
3. 后退导航
示例：
wx.navigateBack(
{ delta: 1 后退一层可以不写}
)
4. 导航传参
1. 声明式导航传参
键 = 值
不同参数A & B
2. 编程式导航传参
**示例：**跳转到非 tabBar 页面 wx.navigateTo({})
可以带参数
3. 在 onLoad 中接受导航参数
options 就是参数对象
将导航传递过来的参数对象，挂载到页面的data对象里，这样方便调用
this.setData()
2.页面事件
1. 下拉刷新
移动端专有名词，指的是手指在屏幕上的下拉滑动操作，从而重新加载页面数据的行为
启用下拉刷新效果：（默认未开启）
推荐使用 局部页面开启下拉刷新
json文件中 - 配置下拉刷新窗口的样式
监听页面的下拉刷新事件
在页面的 json 文件中配置 开启下拉刷新
设置onPullDownRefresh: function(){ }
刷新后，控制台会打印字符串
重置count的值
停止下拉刷新效果
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
this.setData({
count: 0
})
wx.stopPullDownRefresh()
},
2. 上拉触底 事件
手指在屏幕上的上拉滑动操作，加载更多数据的行为
监听页面的上拉触底 事件
onReachBottom（）
防止频繁的发起数据请求：
上拉触底之后，又触发了一次上拉触底事件，不应该再重新加载。（节流，同一时间只允许发出一次请求，上一次请求未完成时，不可以重复发请求）
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
console.log("触发了上拉触底事件")
},
3. 配置上拉触底 距离
.json 文件配置
{
"usingComponents": {},
"enablePullDownRefresh": true,
"backgroundColor": "#efefef",
"backgroundTextStyle": "dark",
"onReachBottomDistance": 150
}
4. 上拉触底案例
/**
* 页面的初始数据
*/
data: {
colorList: []
},
getColors(){
wx.request({
url: 'https://applet-base-api-t.itheima.net/api/color',
method: 'get',
success: ({data: res}) =>{
this.setData({
colorList:[...this.data.colorList,...res.data]
})
}
})
},
1. 定义获取随机颜色的方法
展开旧数据，交给大数组；展开新数据，交给大数组。
2. 在页面加载时获取初始数据
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
this.getColors()
},
3. 渲染 UI 结构 并美化页面效果
wx:for 循环
wxml
<view wx:for="{{colorList}}" wx:key="index" class="num-item" style="background-color: rgba({{item}});">{{item}}</view>
wxss
.num-item {
border: 1px solid #efefef;
border-radius: 8rpx;
line-height: 200rpx;
margin: 15rpx;
text-align: center;
text-shadow: 0rpx 0rpx 5rpx #fff;
box-shadow: 1rpx 1rpx 6rpx #aaa;
}
4. 上拉触底时获取随机颜色
5. 添加 loading 提示效果
getColors(){
// 需要展示 loading效果
wx.showLoading({
title: '数据加载中...'
})
wx.request({
url: 'https://applet-base-api-t.itheima.net/api/color',
method: 'get',
success: ({data: res}) =>{
this.setData({
colorList:[...this.data.colorList,...res.data]
})
},
// 成功之后隐藏 loading
complete: () => {
wx.hideLoading()
}
})
},
6. 对上拉触底进行 节流 操作
连续触底好几次，当前正在请求下一页的数据，需要把后续的所有请求都 屏蔽 掉。
5. 自定义编译模式
3. 生命周期
1. 什么是 生命周期
启动 - 关闭，中间所经过的时间段。
2. 生命周期 的 分类
3. 什么是 生命周期 函数
4. 生命周期函数 的 分类
5. 应用的 生命周期函数
onLaunch 全局只触发一次
6. 页面的 生命周期函数
4.WXS脚本
1. 介绍
WXS（WeiXin Script） 是小程序独有的一套 脚本语言，结合WXML，可以构建出页面的结构。
WXML 中无法调用在页面的 .js 中定义的函数，但是，wxml 中可以调用 wxs 中定义的函数。因此，小程序中wxs的典型应用场景就是 “过滤器”。
现在支持 es6 语法了！
2. 基础语法
内嵌 wxs 脚本：
wxs 代码可以编写在 wxml 文件中的 <wxs> 标签内
类似于 JavaScript 代码可以编写在 html 文件中的 <script> 标签内一样。
1. 内嵌脚本
在 view 中直接调用 {{ module 名字 . 方法名字}}
<view>{{m1.toUpper(username)}}</view>
<wxs module="m1">
module.exports.toUpper = function(str) {
return str.toUpperCase()
}
</wxs>
2. 定义外联的 wxs 脚本
// 外联 wxs 脚本
function toLower(str){
return str.toLowerCase()
}
module.exports = {
toLower: toLower // 属性，对应具体的值
}
3. 使用 外联的 wxs 脚本
wxml 中使用
<view>{{m2.toLower(country)}}</view>
<wxs src="../../utils/tools.wxs" module="m2"></wxs>
4. wxs 的特点
1. 与 js 不同
2. 不能作为 组件的 事件回调
3. 隔离性
4. 性能好
5. 案例 - 本地生活（列表页面）
1. 页面导航 并传参
wxml
navigator ， url 跳转目标页面，?后页面与页面之间传参
<!-- 九宫格区域 -->
<view class="grid-list">
<navigator class="grid-item" wx:for="{{gridList}}" wx:key="id"
url="/pages/shoplists/shoplists?id={{item.id}}&title={{item.name}}">
<image src="{{item.icon}}"></image>
<text>{{item.name}}</text>
</navigator>
</view>
2. 动态设置标题内容，并创建编译模式
在页面的 onReady里使用wx.setNavigationBarTitle
前一个页面传递的参数，可以在 后一个页面的 js - onLoad 里获取。
需要将options里的数据，转存到 data 里。
/**
* 页面的初始数据
*/
data: {
query:[],
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
this.setData({
query: options
})
},
之后再在 onReady里使用转存到 data 里的数据。
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
wx.setNavigationBarTitle({
title: this.data.query.title,
})
},
3. 列表页面的 API 接口
请求参数，
/**
* 页面的初始数据
*/
data: {
query:[],
shopList:[],
page:1,
pageSize:10,
total:0
},
//
getShopList(){
wx.request({
url: `https://applet-base-api-t.itheima.net/categories/${this.data.query.id}/shops`,
method: 'GET',
data: {
_page: this.data.page,
_limit: this.data.pageSize
},
success: (res)=>{
this.setData({
shopList: [...this.data.shopList,...res.data],
total: res.header['X-Total-Count'] - 0 // 从字符 获得数字
})
}
})
},
4. 初步实现 上拉加载效果
1. 展示 loading 的效果
在 js 中，先showLoading，后在 complete 里 hideLoading
// 以分页的形式 获取商铺列表数据 的方法
getShopList(){
// 展示 loading 效果
wx.showLoading({
title: '数据加载中...',
})
wx.request({
url: `https://applet-base-api-t.itheima.net/categories/${this.data.query.id}/shops`,
method: 'GET',
data: {
_page: this.data.page,
_limit: this.data.pageSize
},
success: (res)=>{
this.setData({
shopList: [...this.data.shopList,...res.data],
total: res.header['X-Total-Count'] - 0
})
},
//
complete: ()=>{
wx.hideLoading()
}
})
},
2. 上拉触底，请求下一页数据
上拉触底的距离
json 里配置
{
"usingComponents": {},
"onReachBottomDistance": 200
}
页码值加一， 再getShopList
js 里编写代码
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
this.setData({
page: this.data.page + 1
})
// 获取下一页数据
this.getShopList()
},
3. 节流阀
data 里定义节流阀
isLoading: false
getShopList 方法里，先设置 true， complete 之后 设置回 false
// 以分页的形式 获取商铺列表数据 的方法
getShopList(){
this.setData({
isLoading: true
})
// 展示 loading 效果
wx.showLoading({
title: '数据加载中...',
})
wx.request({
url: `https://applet-base-api-t.itheima.net/categories/${this.data.query.id}/shops`,
method: 'GET',
data: {
_page: this.data.page,
_limit: this.data.pageSize
},
success: (res)=>{
this.setData({
shopList: [...this.data.shopList,...res.data],
total: res.header['X-Total-Count'] - 0
})
},
//
complete: ()=>{
wx.hideLoading()
this.setData({isLoading: false})
}
})
},
5. 判断是否还有 下一页数据
没有后续数据，不应该发起额外的请求
。。。
代码：（js）
显示 消息提示框
onReachBottom() {
if(this.data.page * this.data.pageSize >= this.data.total){
// 证明没有下一页的数据了
return wx.showToast({
title: '数据加载完毕！',
icon: 'none'
})
}
if(this.data.isLoading) return //正在请求，结束该方法
this.setData({
page: this.data.page + 1
})
this.getShopList()
},
6. 实现 下拉刷新功能
- json
{
"usingComponents": {},
"onReachBottomDistance": 200,
"enablePullDownRefresh": true,
"backgroundColor": "#efefef",
"backgroundTextStyle": "dark"
}
- 在 js 中，重置关键数据，发起数据请求
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
// 重置关键的数据
this.setData({
page: 1,
shopList: [],
total: 0
}),
// 重新发起数据请求
this.getShopList()
},
- 在 js 中，结束下拉刷新效果
wx.stopPullDownRefresh()
// 总方法名
getShopList(cb){
// wx.request里
complete: ()=>{
wx.hideLoading()
this.setData({isLoading: false})
//写在这里，不太合适，上拉触底也会调用，但是用不到。要优化
// wx.stopPullDownRefresh()
cb &&cb() // 短路运算
}
})
}
7. 使用 wxs 处理手机号
tools.wxs
// 外联 wxs 脚本
function toLower(str){
return str.toLowerCase()
}
function splitPhone(str) {
if(str.length !== 11) return str
var arr = str.split('')
console.log(arr)
arr.splice(3,0,'-')
arr.splice(8,0,'-')
return arr.join('')
}
module.exports = {
toLower: toLower, // 属性，对应具体的值
splitPhone: splitPhone
}
在 wxml 里写，就可以用了
<view class="shop-item" wx:for="{{shopList}}" wx:key="id">
<view class="thumb">
<image src="{{item.images[0]}}"></image>
</view>
<view class="info">
<text class="shop-title">{{item.name}}</text>
<text>电话：{{tools.splitPhone(item.phone)}}</text>
<text>地址：{{item.address}}</text>
<text>营业时间：{{item.businessHours}}</text>
</view>
</view>
<wxs src="../../utils/tools.wxs" module="tools"></wxs>
8.总结
2564
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
