模板与配置
一、WXML模板语法
1、WXML模板语法 - 数据绑定
WXML 使用双花括号 {{...}} 进行数据绑定，可以将变量动态显示在页面上。
<view>{{ message }}</view>
在相应的页面的 .js 文件中，需要定义数据：
// 在页面的.js文件中
Page({
data: {
message: 'Hello, WXML!'
}
});
2、WXML模板语法 - 事件绑定
WXML 支持事件绑定，使用 bind 或 catch 来绑定事件，例如点击按钮触发事件。
<button bindtap="handleTap">点击按钮</button>
在相应的页面的 .js 文件中，需要定义事件处理函数：
// 在页面的.js文件中
Page({
handleTap: function () {
console.log('按钮被点击了');
}
});
3、WXML模板语法 - 条件渲染
使用 wx:if、wx:else 和 wx:elif 实现条件渲染，根据条件显示不同内容。
<view wx:if="{{ condition }}">条件成立时显示</view>
<view wx:else>条件不成立时显示</view>
在相应的页面的 .js 文件中，需要定义条件：
// 在页面的.js文件中
Page({
data: {
condition: true
}
});
4、WXML模板语法 - 列表渲染
使用 wx:for 循环渲染列表，展示动态生成的内容。
<view wx:for="{{ array }}" wx:for-item="item" wx:for-index="index">
{{ index }} - {{ item }}
</view>
在相应的页面的 .js 文件中，需要定义列表数据：
// 在页面的.js文件中
Page({
data: {
array: ['Apple', 'Banana', 'Orange']
}
});
二、WXSS模板样式
1、WXSS模板样式 - rpx
1.1 什么是 rpx 尺寸单位
rpx 是小程序中的尺寸单位，它是相对长度单位，可以根据屏幕宽度进行自适应缩放。1rpx 在不同屏幕宽度下的物理像素大小是相等的，这使得设计师可以更方便地设计界面，而不用考虑不同设备的屏幕大小。
1.2 rpx 的实现原理
rpx 的实现原理是根据屏幕的宽度进行自适应缩放。小程序会将屏幕宽度分为 750 个逻辑像素（logical pixel），1rpx 就等于屏幕宽度的 1/750。因此，无论屏幕宽度是多少，1rpx 对应的物理像素都是相等的。
1.3 rpx 与 px 之间的单位换算
在小程序的设计稿中，通常会使用 750px 作为设计稿的宽度，这样 1rpx 就等于 1px。在实际开发中，可以使用下面的换算关系：
/* 在750px设计稿中，设置元素宽度为100px */
.example {
width: 100rpx; /* 小程序中使用rpx单位 */
/* 在编译后，小程序将自动进行换算为实际物理像素 */
}
通过这种方式，无论屏幕宽度是多少，设计稿中的 100rpx 都会被自动换算为相应的物理像素值。这种设计使得小程序在不同设备上都能保持良好的显示效果。
2、WXSS模板样式 - 样式导入
使用 @import 导入外部样式，保持样式模块化和可维护性。
@import 'common.wxss';
3、WXSS模板样式 - 全局样式和局部样式
定义全局样式和局部样式，通过 pageName.json 文件配置，确保页面样式的一致性。
/* 全局样式 */
body {
font-size: 14rpx;
}
/* 局部样式 */
.container {
background-color: #fff;
}
三、全局配置
1、全局配置 - window
配置全局窗口属性，如导航栏颜色、背景色等，提供整体风格。
{
"window": {
"navigationBarBackgroundColor": "#000",
"navigationBarTextStyle": "white"
}
}
window 节点常用的配置项
| 配置项 | 作用 | 示例 |
|---|---|---|
navigationBarBackgroundColor |
配置导航栏背景颜色。 | "navigationBarBackgroundColor": "#000" |
navigationBarTextStyle |
配置导航栏标题颜色，仅支持 black 或 white。 |
"navigationBarTextStyle": "white" |
navigationBarTitleText |
配置导航栏标题文字内容。 | "navigationBarTitleText": "首页" |
backgroundColor |
配置窗口的背景颜色。 | "backgroundColor": "#f1f1f1" |
backgroundTextStyle |
配置下拉 loading 的样式，仅支持 dark 或 light。 |
"backgroundTextStyle": "dark" |
enablePullDownRefresh |
配置是否开启下拉刷新。 | "enablePullDownRefresh": true |
onReachBottomDistance |
配置页面上拉触底事件触发时距页面底部距离，单位为px。 | "onReachBottomDistance": 50 |
pageOrientation |
配置屏幕旋转设置，支持 auto、portrait、landscape。 | "pageOrientation": "auto" |
disableScroll |
配置是否禁止页面滚动。 | "disableScroll": true |
这些常用的 window 节点配置项可以通过在小程序的 app.json 文件中进行设置，以全局性地影响整个小程序的表现。
2、全局配置 - tabBar
配置全局底部导航栏，方便用户快速切换页面。
{
"tabBar": {
"list": [
{
"pagePath": "pages/index/index",
"text": "首页"
},
{
"pagePath": "pages/about/about",
"text": "关于"
}
]
}
}
四、局部配置
1、页面配置文件的作用
页面配置文件（pageName.json）用于配置当前页面的特殊信息，如页面标题、导航栏颜色、引入自定义组件等。通过页面配置，可以使不同页面具有不同的显示效果和行为。
2、页面配置和全局配置的关系
全局配置文件（app.json）用于配置整个小程序的全局信息，如所有页面的基本配置。而页面配置文件则专门用于当前页面的特殊配置，它们之间形成了一种层级关系。在小程序加载页面时，会首先加载全局配置，然后再加载当前页面的局部配置，确保局部配置可以覆盖全局配置。
3、页面配置中常用的配置项
| 配置项 | 作用 | 示例 |
|---|---|---|
navigationBarTitleText |
配置页面导航栏标题，显示在导航栏中间。 | "navigationBarTitleText": "首页" |
navigationBarBackgroundColor |
配置页面导航栏背景颜色。 | "navigationBarBackgroundColor": "#000" |
usingComponents |
引入自定义组件，指定组件的路径。 | "usingComponents": { "custom-component": "/components/custom-component" } |
onReachBottom |
监听用户上拉触底事件，在页面滚动到底部时触发。 | "onReachBottom": "onReachBottom" |
enablePullDownRefresh |
配置是否启用下拉刷新功能。 | "enablePullDownRefresh": true |
backgroundTextStyle |
下拉刷新时的样式，仅支持 dark 和 light。 |
"backgroundTextStyle": "dark" |
backgroundColor |
配置下拉刷新时的背景颜色。 | "backgroundColor": "#f1f1f1" |
这些常用的页面配置项可以通过在相应页面的 pageName.json 文件中进行设置，以实现个性化的页面效果。
五、网络数据请求
1、小程序中网络数据请求的限制
小程序中网络数据请求有一些限制，包括域名限制、请求并发限制、请求超时限制等。确保了解这些限制，以便更好地处理数据请求。
另有如下两个特殊的限制：
- 1、只能请求HTTPS类型的接口
- 2、必须将接口的域名添加到信任列表中
2、配置 request 合法域名
在小程序开发中，需要在小程序管理后台配置合法域名，以确保可以向指定的域名发起网络请求。
配置步骤：登录微信小程序管理后台 -> 开发 -> 开发设置 -> 服务器域名 -> 修改 request 合法域名
注意事项：
① 域名只支持 https 协议
② 域名不能使用 IP 地址或 localhost
③ 域名必须经过 ICP 备案
④ 服务器域名一个月内最多可申请 5 次修改
3、发起 GET 请求
使用 wx.request 发起 GET 请求，可以通过设置 url 和其他参数来配置请求。
wx.request({
url: 'https://api.example.com/data',
method: 'GET',
success: function (res) {
console.log(res.data);
},
fail: function (error) {
console.error(error);
}
});
4、发起 POST 请求
使用 wx.request 发起 POST 请求，可以通过设置 url、data 和其他参数来配置请求。
wx.request({
url: 'https://api.example.com/postData',
method: 'POST',
data: {
key: 'value'
},
success: function (res) {
console.log(res.data);
},
fail: function (error) {
console.error(error);
}
});
5、在页面刚加载时请求数据
在页面的生命周期函数 onLoad 中发起网络请求，确保在页面刚加载时获取所需数据。
Page({
onLoad: function () {
this.loadData();
},
methods: {
loadData: function () {
wx.request({
url: 'https://api.example.com/data',
method: 'GET',
success: function (res) {
console.log(res.data);
},
fail: function (error) {
console.error(error);
}
});
}
}
});
6、跳过 request 合法域名校验
在开发阶段，可以通过在开发工具中的设置中关闭 不校验合法域名、web-view（业务域名）、TLS 版本以及 HTTPS 证书 来跳过域名校验，方便开发时的调试。
7、关于跨域和 Ajax 的说明
小程序中存在跨域限制，不支持普通的跨域 Ajax 请求。需要在小程序管理后台配置合法域名，确保请求的域名在合法域名列表中。可以使用 wx.request 发起网络请求，或通过云函数等方式实现跨域请求。文章来源：https://www.toymoban.com/news/detail-793027.html
确保了解以上内容，以便在小程序中合理发起和处理网络数据请求。文章来源地址https://www.toymoban.com/news/detail-793027.html
到了这里，关于微信小程序 - 模板与配置 介绍的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
