小程序模板与配置
-
-
WXSS 模板样式
-
全局配置
-
页面配置
-
网络数据请求
WXML 模板语法
数据绑定
-
在 data 中定义数据
-
在
WXML中使用数据 -
Mustache语法（双大括号）- {{ 需要绑定的数据 }} 插值表达式-
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 之间的数据同步
-
定义数据
-
渲染结构
-
美化样式
-
绑定
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个组成部分：
-
导航栏区域
navigationBar -
背景区域，默认不可见，下拉才显示
background -
页面的主体区域，用来显示
wxml中的布局
下拉刷新
"enablePullDownRefresh"：true
"backgroundColor"下拉刷新时的背景颜色
下拉刷新时 loading 的样式
backgroundTextStyle= light | dark；可选值只有两个
设置上拉触底的距离
上拉触顶是移动端的专有名词，通过手指在屏幕上的上拉滑动操作，从而加载更多数据的行为。
onReachBottomDistance：100
默认值：为 50 px，如果没有特殊需求，不建议修改。
tabBar
tabBar 是移动端应用常见的页面效果，用于实现多页面的快速切换。小程序中通常将其分为 底部 tabBar 和 顶部 tabBar。
注意：tabBar 中只能配置最少2个，最多5个tab页签；当渲染顶部 tabBar 时，不显示 icon，只显示文本。
tabBar 的6个组成部分
-
backgroundColor：tabBar 的背景色
-
selectIconPath：选中时的图片路径
-
borderStyle：tabBar 上边框的颜色
-
iconPath：未选中时的图片路径
-
slectedColor：tab 上的文字选中时的颜色
-
color：tab 上文字的默认（未选中）颜色
每个 tab 项的配置选项
-
pagePath，必填，页面路径，页面必须在 pages 中预先定义
-
text，必填，tab 上显示的文字
-
iconPath，未选中时的图标路径；当 position 为 top 时，不显示 icon
-
selectedIconPath，选中时的图标路径；当 position 为 top 时，不显示 icon
网络数据请求
小程序中网络数据请求的限制
小程序官方对数据接口的请求有两个限制：
-
只能请求
HTTPS类型的接口 -
必须将接口的域名添加到信任列表中
配置 request 合法域名
配置步骤： 登录微信小程序管理后台 → 开发 → 开发设置 → 服务器域名 → 修改 request 合法域名
注意事项：
-
域名只支持 https 协议
-
域名不能使用 IP 地址 或 localhost
-
域名必须经过 ICP 备案
-
服务器域名一个月内最多可申请5次修改
wx.request() 方法
与 jQuery 的 $.ajax({}) 的用法一样
总结
-
能够使用 WXML 模板语法渲染页面结构
-
wx:if \ wx:elif \ wx:else \ hidden \ wx:for \ wx:key
-
-
能够使用 WXSS 样式美化页面结构
-
rpx 尺寸单位、@import 样式导入、全局样式和局部样式
-
-
能够使用 app.json 对小程序进行全局性配置
-
pages \ window \ tabBar \ style
-
-
能够使用 page.json 对小程序页面进行个性化配置
-
对单个页面进行个性化配置、就近原则
-
-
能够知道如何发起网络数据请求
-
