【微信小程序开发】入门Day2 —— 从视图逻辑到配置请求全方位解析
1. WXML 模板语法
- 数据绑定
<!-- 在页面对应的.js文件中 --> Page({ data: { // 字符串类型数据 info: 'Hello, World!', // 数组类型数据 msgList: [ {msg: 'Apple'}, {msg: 'Banana'} ] } }) <!-- 在WXML文件中 --> <view>{{info}}</view> <view>{{msgList[0].msg}}</view>
- 基本原则:在
data
中定义数据,在WXML
中使用Mustache
语法(双大括号)绑定数据。 - 数据定义:在页面对应的
.js
文件中,将数据定义在data
对象里,可包含字符串、数组等类型。 - 应用场景:包括绑定内容、绑定属性以及进行运算(三元运算、算术运算等)。
- 基本原则:在
- 事件绑定
<!-- 在WXML文件中 --> <button bindtap="handleTap">点击我</button> <input bindinput="handleInput" /> <checkbox bindchange="handleChange" /> <!-- 在页面对应的.js文件中 --> Page({ handleTap: function(event) { console.log('点击事件被触发', event); }, handleInput: function(event) { console.log('输入框内容改变', event.detail.value); }, handleChange: function(event) { console.log('复选框状态改变', event.detail.value); } })
- 事件概念:是渲染层到逻辑层的通讯方式,用于处理用户在渲染层的行为。
- 常用事件:如
bindtap
(类似click
)、input
(文本框输入)、change
(状态改变)等。 - 事件对象:包含
type
、timeStamp
、target
、currentTarget
等属性。 - 事件传参:通过
data-*
自定义属性传参,在事件处理函数中通过event.target.dataset.参数名
获取参数值。
- 条件渲染
<!-- wx:if --> <view wx:if="{{isVisible}}">我是根据条件显示的元素</view> <view wx:elif="{{isAnotherCondition}}">我是另一个条件下显示的元素</view> <view wx:else>我是其他情况显示的元素</view> <!-- 结合<block>使用wx:if --> <block wx:if="{{isBlockVisible}}"> <view>我是<block>中的第一个元素</view> <view>我是<block>中的第二个元素</view> </block> <!-- hidden --> <view hidden="{{isHidden}}">我是根据hidden属性隐藏或显示的元素</view>
- wx:if:根据条件判断是否渲染代码块,可搭配
wx:elif
和wx:else
。 - 结合<block>:使用
<block>
标签包裹多个组件,在<block>
上使用wx:if
控制展示与隐藏。 - hidden:通过设置
hidden="{{ condition }}"
控制元素显示与隐藏,与wx:if
相比,运行方式和使用场景有所不同。
- wx:if:根据条件判断是否渲染代码块,可搭配
- 列表渲染
<!-- 在页面对应的.js文件中 --> Page({ data: { userList: [ {id: 1, name: '张三'}, {id: 2, name: '李四'} ] } }) <!-- 在WXML文件中 --> <view wx:for="{{userList}}" wx:key="id">{{item.name}}</view>
- wx:for:根据指定数组循环渲染组件,默认索引为
index
,当前项为item
,也可手动指定变量名。 - wx:key:建议为列表项指定唯一
key
值,提高渲染效率。
- wx:for:根据指定数组循环渲染组件,默认索引为
2. WXSS 模板样式
- WXSS 简介:是用于美化
WXML
组件样式的语言,类似CSS
,具有CSS
大部分特性,并进行了扩充和修改。 - rpx 尺寸单位
/* 在.wxss文件中 */ .example { width: 100rpx; height: 50rpx; background-color: red; }
- 定义:微信小程序独有的解决屏适配的尺寸单位,将屏幕宽度等分为 750 份。
- 换算原理:在不同设备上会自动换算成像素单位,如在
iPhone6
上1rpx = 0.5px
。
- 样式导入:
使用/* common.wxss文件 */ .common-style { color: blue; font-size: 14px; } /* 在页面的.wxss文件中 */ @import "common.wxss"; .page-style { background-color: yellow; }
@import
语法导入外联样式表。 - 全局样式和局部样式
/* app.wxss文件(全局样式) */ .global-style { text-align: center; } /* 在页面的.wxss文件(局部样式) */ .local-style { color: green; font-weight: bold; }
- 全局样式:定义在
app.wxss
中,作用于每一个页面。 - 局部样式:在页面的
.wxss
文件中定义,只作用于当前页面,当局部样式和全局样式冲突时,根据就近原则和权重覆盖。
- 全局样式:定义在
3. 配置文件
- 全局配置
// app.json文件 { "pages": [ "pages/index/index", "pages/logs/logs" ], "window": { "navigationBarTitleText": "我的小程序", "navigationBarBackgroundColor": "#000000", "navigationBarTextStyle": "white", "backgroundColor": "#ffffff", "backgroundTextStyle": "dark", "enablePullDownRefresh": false, "onReachBottomDistance": 50 }, "tabBar": { "list": [ { "pagePath": "pages/index/index", "text": "首页", "iconPath": "images/tabbar/home.png", "selectedIconPath": "images/tabbar/home_active.png" }, { "pagePath": "pages/logs/logs", "text": "日志", "iconPath": "images/tabbar/logs.png", "selectedIconPath": "images/tabbar/logs_active.png" } ] } }
- 配置文件:
app.json
是小程序的全局配置文件,常用配置项包括pages
、window
、tabBar
、style
等。 - window 配置:可设置导航栏标题、背景色、标题颜色,以及窗口背景色、下拉刷新功能、上拉触底距离等。
- tabBar 配置:用于实现多页面快速切换,可配置背景色、边框色、文字颜色、图标路径等,
tabBar
中只能配置 2 - 5 个tab
页签。
- 配置文件:
- 页面配置
// 例如在pages/index/index.json文件 { "navigationBarTitleText": "首页", "navigationBarBackgroundColor": "#333333", "navigationBarTextStyle": "white", "enablePullDownRefresh": true }
- 配置文件作用:每个页面都有自己的
.json
配置文件,用于对当前页面的窗口外观、页面效果等进行配置。 - 与全局配置关系:当页面配置与全局配置冲突时,根据就近原则,以页面配置为准。
- 配置文件作用:每个页面都有自己的
4. 网络数据请求
// 在页面的.js文件中
Page({
onLoad: function () {
wx.request({
url: 'https://example.com/api/data', // 这里需要替换为合法的https接口
method: 'GET',
data: {
param1: 'value1',
param2: 'value2'
},
success: function (res) {
console.log('请求成功', res);
},
fail: function (err) {
console.log('请求失败', err);
}
});
}
})
- 请求限制:只能请求
HTTPS
类型的接口,且必须将接口的域名添加到信任列表中。 - 配置域名:登录微信小程序管理后台进行
request
合法域名配置,域名需满足一定条件且有修改次数限制。 - 发起请求:使用
wx.request()
方法发起GET
或POST
请求,可在页面onLoad
事件中请求数据。 - 跨域说明:小程序不存在跨域问题,因为宿主环境不是浏览器。
5. 页面导航
- 导航方式
- 声明式导航:使用
<navigator>
组件实现页面跳转。<!-- 导航到tabBar页面 --> <navigator url="/pages/tabbarPage/tabbarPage" open-type="switchTab">去tabBar页面</navigator> <!-- 导航到非tabBar页面 --> <navigator url="/pages/otherPage/otherPage">去其他页面</navigator> <!-- 后退导航 --> <navigator open-type="navigateBack" delta="2">后退两页</navigator>
- 导航到 tabBar 页面:需指定
url
(以/
开头,指向 tabBar 页面地址)和open-type="switchTab"
属性。 - 导航到非 tabBar 页面:指定
url
(以/
开头),open-type="navigate"
(可省略)。 - 后退导航:
open-type="navigateBack"
,可指定delta
属性表示后退层级(默认为 1,后退到上一页面可省略)。
- 导航到 tabBar 页面:需指定
- 编程式导航:调用小程序导航 API 实现跳转。
// 在页面的.js文件中 Page({ // 导航到tabBar页面 goToTabBarPage: function () { wx.switchTab({ url: '/pages/tabbarPage/tabbarPage' }); }, // 导航到非tabBar页面 goToOtherPage: function () { wx.navigateTo({ url: '/pages/otherPage/otherPage?param=value' }); }, // 后退导航 goBack: function () { wx.navigateBack({ delta: 1 }); } })
- 导航到 tabBar 页面:使用
wx.switchTab(Object object)
方法,Object
包含url
等属性。 - 导航到非 tabBar 页面:使用
wx.navigateTo(Object object)
方法,Object
包含url
等属性。 - 后退导航:使用
wx.navigateBack(Object object)
方法,Object
包含delta
等属性。
- 导航到 tabBar 页面:使用
- 声明式导航:使用
- 导航传参
// 在接收导航参数的页面的.js文件中的onLoad函数中 Page({ onLoad: function (options) { console.log('接收到的参数', options); } })
- 声明式导航传参:
navigator
组件的url
属性后可携带参数,参数与路径用?
分隔,参数键值用=
相连,不同参数用&
分隔。 - 编程式导航传参:调用
wx.navigateTo
方法跳转时也可携带参数。 - 接收导航参数:在
onLoad
事件中可获取导航传递的参数。
- 声明式导航传参:
6. 页面事件
- 下拉刷新事件
// 在页面的.js文件中 Page({ data: { count: 0 }, onPullDownRefresh: function () { this.setData({ count: 0 }); // 模拟数据加载过程 setTimeout(() => { console.log('数据加载完成'); wx.stopPullDownRefresh(); }, 2000); } })
- 启用下拉刷新:可全局(在
app.json
的window
节点设置enablePullDownRefresh
为true
)或局部(在页面的.json
配置文件设置)开启。 - 配置窗口样式:通过
backgroundColor
和backgroundTextStyle
配置下拉刷新窗口的背景色和loading
样式。 - 监听事件:在页面的
.js
文件中通过onPullDownRefresh()
函数监听,可在函数中处理数据重置等操作,处理完需调用wx.stopPullDownRefresh()
停止下拉刷新效果。
- 启用下拉刷新:可全局(在
- 上拉触底事件
// 在页面的.js文件中 Page({ data: { itemList: [], isLoading: false }, onLoad: function () { this.loadData(); }, onReachBottom: function () { if (!this.data.isLoading) { this.data.isLoading = true; this.loadData(); } }, loadData: function () { // 模拟数据加载过程 setTimeout(() => { const newItems = [ {id: this.data.itemList.length + 1, name: '新数据' + (this.data.itemList.length + 1)} ]; this.setData({ itemList: this.data.itemList.concat(newItems), isLoading: false }); }, 2000); } })
- 监听事件:在页面的
.js
文件中通过onReachBottom()
函数监听。 - 配置触底距离:可在全局或页面的
.json
配置文件中通过onReachBottomDistance
属性配置,默认距离为50px
。 - 案例实现步骤:包括定义获取随机颜色方法、页面加载时获取初始数据、渲染 UI 结构并美化、上拉触底时调用方法、添加
loading
提示效果以及对上拉触底进行节流处理。
- 监听事件:在页面的
7. 生命周期
- 生命周期概念:指对象从创建到运行再到销毁的整个阶段,小程序分为应用生命周期和页面生命周期。
- 生命周期函数:由小程序框架提供的内置函数,伴随生命周期按次序执行,用于在特定时间点执行特定操作。
- 应用的生命周期函数:
在// app.js文件 App({ onLaunch: function (options) { console.log('小程序初始化完成'); }, onShow: function (options) { console.log('小程序启动或从后台进入前台显示'); }, onHide: function () { console.log('小程序从前台进入后台'); } })
app.js
中声明,包括onLaunch
(小程序初始化完成时执行)、onShow
(小程序启动或从后台进入前台显示时触发)、onHide
(小程序从前台进入后台时触发)。 - 页面的生命周期函数:
在页面的// 在页面的.js文件中 Page({ onLoad: function (options) { console.log('页面加载'); }, onShow: function () { console.log('页面显示'); }, onReady: function () { console.log('页面初次渲染完成'); }, onHide: function () { console.log('页面隐藏'); }, onUnload: function () { console.log('页面卸载'); } })
.js
文件中声明,包括onLoad
(监听页面加载,一个页面只调用 1 次)、onShow
(监听页面显示)、onReady
(监听页面初次渲染完成,一个页面只调用 1 次)、onHide
(监听页面隐藏)、onUnload
(监听页面卸载,一个页面只调用 1 次)。
- 应用的生命周期函数:
8. WXS 脚本
- WXS 概述
- 定义:小程序独有的脚本语言,结合
WXML
构建页面结构。 - 应用场景:主要作为 “过滤器”,解决
wxml
中无法调用页面.js
中定义函数的问题。 - 与 JavaScript 的关系:语法类似但有区别,有自己的数据类型,不支持部分 ES6 及以上语法,遵循 CommonJS 规范。
- 定义:小程序独有的脚本语言,结合
- 基础语法
- 内嵌 wxs 脚本:编写在
wxml
文件的<wxs>
标签内,需提供module
属性指定模块名称。<view>{{m1.toUpper(username)}}</view> <wxs module="m1"> // 将文本转为大写形式zs->ZS module.exports.toUpper = function(str) { return str.toUpperCase(); } </wxs>
- 定义外联的 wxs 脚本:编写在以
.wxs
为后缀名的文件内。// tools.wxs文件 function toLower(str) { return str.toLowerCase(); } module.exports = { toLower: toLower };
- 使用外联的 wxs 脚本:在
wxml
中引入时,<wxs>
标签需添加module
和src
属性。<view>{{m2.toLower(country)}}</view> <wxs src="../../utils/tools.wxs" module="m2"></wxs>
- 内嵌 wxs 脚本:编写在
- WXS 的特点
- 与 JavaScript 不同:虽借鉴语法但本质不同。
- 不能作为组件的事件回调:典型应用是 “过滤器”,不能作为组件事件回调函数。
- 隔离性:运行环境与其他 JavaScript 代码隔离,不能相互调用。
- 性能好:在 iOS 设备上比 JavaScript 代码快。
原文地址:https://blog.csdn.net/2303_76696898/article/details/142671918
免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!