小程序 – 模板与配置

个人简介

👨‍💻‍个人主页： 魔术师
📖学习方向： 主攻前端方向，正逐渐往全栈发展
🚴个人状态： 研发工程师，现效力于政务服务网事业
🇨🇳人生格言： “心有多大，舞台就有多大。”
📚推荐学习： 🍉Vue2 🍋Vue3 🍓Vue2/3项目实战 🥝Node.js实战 🍒Three.js 🍇鸿蒙开发🥭小程序
🪧使用备注：仅供学习交流 严禁用于商业用途 ，若发现侵权内容请及时联系作者
📤更新进度：持续更新内容
🤙个人名片：每篇文章最下方都有加入方式，旨在交流学习&资源分享，快加入进来吧

模板与配置目录

个人简介

2. 小程序 – 模板与配置

2.1 WXML 模板语法

数据绑定
事件绑定
条件渲染
列表渲染

2.2 WXSS 模板样式

rpx 尺寸单位
样式导入
全局样式和局部样式

2.3 全局配置(根目录下的 app.json 文件)

window配置
tabBar配置多页面切换
案例：配置 tabBar

2.4 页面配置
2.5 网络数据请求

2. 小程序 – 模板与配置

目标：

2.1 WXML 模板语法

数据绑定

数据绑定的基本原则
① 在 data 中定义数据
② 在 WXML 中使用数据
在 data 中定义页面的数据

Mustache 语法的格式

Mustache 语法的应用场景

动态绑定内容

动态绑定属性

三元运算

算数运算

事件绑定

什么是事件

小程序中常用的事件

事件对象的属性列表

target 和 currentTarget 的区别

bindtap 的语法格式

在事件处理函数中为 data 中的数据赋值

事件传参



bindinput 的语法格式

实现文本框和 data 之间的数据同步
实现步骤：
① 定义数据

② 渲染结构

③ 美化样式

④ 绑定 input 事件处理函数

条件渲染

wx:if

结合 <block> 使用 wx:if

hidden

wx:if 与 hidden 的对比

列表渲染

wx:for

手动指定索引和当前项的变量名*

wx:key 的使用

2.2 WXSS 模板样式

什么是 WXSS
WXSS (WeiXin Style Sheets)是一套样式语言，用于美化 WXML 的组件样式，类似于网页开发中的 CSS。
WXSS 和 CSS 的关系

rpx 尺寸单位

什么是 rpx 尺寸单位
rpx（responsive pixel）是微信小程序独有的，用来解决屏适配的尺寸单位。
rpx 的实现原理

rpx 与 px 之间的单位换算

样式导入

什么是样式导入
使用 WXSS 提供的 @import 语法，可以导入外联的样式表。
@import 的语法格式

全局样式和局部样式

全局样式
定义在 app.wxss 中的样式为全局样式，作用于每一个页面。
局部样式

2.3 全局配置(根目录下的 app.json 文件)

全局配置文件及常用的配置项

window配置

小程序窗口的组成部分

了解 window 节点常用的配置项

设置导航栏的标题

设置导航栏的背景色

设置导航栏的标题颜色

全局开启下拉刷新功能

设置下拉刷新时窗口的背景色

设置下拉刷新时 loading 的样式

设置上拉触底的距离

tabBar配置多页面切换

什么是 tabBar

tabBar 的 6 个组成部分

tabBar 节点的配置项

每个 tab 项的配置选项

案例：配置 tabBar

需求描述

实现步骤

拷贝图标资源

新建 3 个对应的 tab 页面

配置 tabBar 选项

完整的配置代码

2.4 页面配置

页面配置文件的作用
小程序中，每个页面都有自己的 .json 配置文件，用来对当前页面的窗口外观、页面效果等进行配置。
页面配置和全局配置的关系

页面配置中常用的配置项

2.5 网络数据请求

小程序中网络数据请求的限制

配置 request 合法域名

发起 GET 请求

发起 POST 请求

在页面刚加载时请求数据

跳过 request 合法域名校验

关于跨域和 Ajax 的说明