标签：绑定 渲染 样式 配置 程序 tabBar 页面 模板 wx

• WXML 模板语法

• WXSS 模板样式

• 全局配置

• 页面配置

• 网络数据请求

 

WXML 模板语法

数据绑定

1. 在 data 中定义数据

2. 在 WXML 中使用数据

3. Mustache 语法（双大括号）- {{ 需要绑定的数据 }} 插值表达式

   1. Mustache 语法的应用场景：

      • 绑定内容（动态绑定）

      • 绑定属性

      • 运算（三元运算、算数运算等）

 

事件绑定

事件是渲染层到逻辑层的通讯方式。通过事件可以将用户在渲染层产生的行为，反馈到逻辑层进行业务的处理。

事件对象的属性列表

当事件回调触发的时候，会收到一个事件对象 event。

• target：触发事件的组件的一些属性值集合

• detail：额外的信息

target 和 currentTarget 的区别

• target 是触发该事件的源头组件

• currentTarget 是当前事件所绑定的组件

bandtap 的语法格式

bandtap(函数名)

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

调用 this.setData(dataObject) 方法

this.setData({
    count: this.data.count + 1
})

事件传参

小程序中的事件传参比较特殊，不能在绑定事件的同时为事件处理函数传递参数。

可以为组件提供 data-* 自定义属性传参，其中 * 代表的是参数的名字。

在事件处理函数中，通过 event.target.dataset.参数名 即可获得到具体参数的值

<button type="primary" bindtap="btnHandler(123)">这种方式不能传递参数</button>
​
<button type="primary" bindtap="btnHandler()" data-info="{{2}}">用这种方式传递参数</button>

bandinput

e.detail.value拿到input里的值。

实现文本框和 data 之间的数据同步

1. 定义数据

2. 渲染结构

3. 美化样式

4. 绑定 input 事件处理函数

 

列表渲染

hidden

在微信小程序中，直接使用 hidden="{{condition}}" 也能控制元素的显示与隐藏。

等同于 display: none; 频繁使用

条件复杂时，建议使用 wx:if

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

• 使用 wx:for-index 可以指定当前循环项的索引的变量名

• 使用 wx:for-item 可以指定当前项的变量名

wx:key 的使用

类似于 Vue 列表渲染中的 :key，小程序在实现列表渲染时，也建议为渲染出来的列表项指定唯一的 key 值，从而提高渲染的效率。

 

WXSS 模板样式

rpx 与 px 之间的换算

iphone 6 中：1rpx = 0.5px | 1px = 2rpx

 

全局样式与局部样式

• 当局部样式和全局样式冲突时，根据就近原则，局部样式会覆盖全局样式

• 当局部样式的权重大于或等于全局样式的权重时，才会覆盖全局的样式。

 

全局配置

window

小程序的窗口分为3个组成部分：

1. 导航栏区域 navigationBar

2. 背景区域，默认不可见，下拉才显示 background

3. 页面的主体区域，用来显示 wxml 中的布局

 

下拉刷新

"enablePullDownRefresh"：true

"backgroundColor"下拉刷新时的背景颜色

 

下拉刷新时 loading 的样式

backgroundTextStyle= light | dark；可选值只有两个

 

设置上拉触底的距离

上拉触顶是移动端的专有名词，通过手指在屏幕上的上拉滑动操作，从而加载更多数据的行为。

onReachBottomDistance：100

默认值：为 50 px，如果没有特殊需求，不建议修改。

 

tabBar

tabBar 是移动端应用常见的页面效果，用于实现多页面的快速切换。小程序中通常将其分为 底部 tabBar 和 顶部 tabBar。

注意：tabBar 中只能配置最少2个，最多5个tab页签；当渲染顶部 tabBar 时，不显示 icon，只显示文本。

 

tabBar 的6个组成部分

1. backgroundColor：tabBar 的背景色

2. selectIconPath：选中时的图片路径

3. borderStyle：tabBar 上边框的颜色

4. iconPath：未选中时的图片路径

5. slectedColor：tab 上的文字选中时的颜色

6. color：tab 上文字的默认（未选中）颜色

每个 tab 项的配置选项

• pagePath，必填，页面路径，页面必须在 pages 中预先定义

• text，必填，tab 上显示的文字

• iconPath，未选中时的图标路径；当 position 为 top 时，不显示 icon

• selectedIconPath，选中时的图标路径；当 position 为 top 时，不显示 icon

 

网络数据请求

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

小程序官方对数据接口的请求有两个限制：

1. 只能请求 HTTPS 类型的接口

2. 必须将接口的域名添加到信任列表中

 

配置 request 合法域名

配置步骤： 登录微信小程序管理后台 → 开发 → 开发设置 → 服务器域名 → 修改 request 合法域名

注意事项：

• 域名只支持 https 协议

• 域名不能使用 IP 地址 或 localhost

• 域名必须经过 ICP 备案

• 服务器域名一个月内最多可申请5次修改

 

wx.request() 方法

与 jQuery 的 $.ajax({}) 的用法一样

 

总结

1. 能够使用 WXML 模板语法渲染页面结构

   • wx:if \ wx:elif \ wx:else \ hidden \ wx:for \ wx:key

2. 能够使用 WXSS 样式美化页面结构

   • rpx 尺寸单位、@import 样式导入、全局样式和局部样式

3. 能够使用 app.json 对小程序进行全局性配置

   • pages \ window \ tabBar \ style

4. 能够使用 page.json 对小程序页面进行个性化配置

   • 对单个页面进行个性化配置、就近原则

5. 能够知道如何发起网络数据请求

   • wx.request() 方法、onLoad()事件

标签：绑定,渲染,样式,配置,程序,tabBar,页面,模板,wx
From： https://www.cnblogs.com/c0lmd0wn/p/16974080.html