模板与配置

一、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 发起网络请求，或通过云函数等方式实现跨域请求。

确保了解以上内容，以便在小程序中合理发起和处理网络数据请求。