一.项目构成
每个文件由四个基本文件组成
新建小程序页面
修改项目首页
WXML模板
- 与HTML的区别
- 标签名称不同
html:(div,span,img,a)
wxml:(view,text ,image,navigator) - 属性节点不同
- 提供了类似Vue的模板语法
WXSS样式
- 和css的区别
- 新增rpx尺寸单位
- 提供了全局样式和局部样式
- 仅支持部分css选择器
二.宿主环境
1.宿主环境是程序运行必须依赖的环境
- 通信模型
- 运行机制
小程序启动过程
页面渲染过程
- 组件
- view组件(当作div)
- scroll-view
纵向滚动在后方加属性scroll-y - swiper组件和swiper-item组件的使用
- text(类似span标签,是一个行内元素)
- user-select="true"属性:长按选中
- rich-text(富文本组件,支持把HTML渲染为WXML结构)
- button
- open-type属性可以调用各种服务
- navigator (类似于a链接)
- images
- API
- 事件监听API 以on开头
wx.onWindowResize(function callback)监听窗口尺寸变化事件 - 同步API 以Sync结尾
wx.setStorageSync('key','value')像本地储存中写入内容 - 异步API 需要通过success,fail computete
wx.request()发起网络请求
三.模板语法
-WXML模板语法
1.数据绑定
- 动态绑定内容
- 动态绑定属性
- 三元运算
- 算数运算
2.事件绑定
- 常用事件
2. 事件对象的属性列表
3. target 和 currentTarget的区别
4 .bindtap语法格式
5. 在事件处理函数中为data中的数据赋值
6. 事件传参 (与vue不同)
- bindinput的语法格式
8. 实现文本框与data之间的数据同步
3.条件渲染
- wx:if
2.结合
<block>使用wx-if
- hidden
4. wx:if 与hidden的区别
4.列表渲染
- wx:for
2.wx:key的使用
-WXSS模板样式
WXSS和CSS的关系
1. rpx
- rpx与px之间的换算
2.样式导入
- @import的语法样式
- 全局样式与局部样式
在app.wxss中的样式将作用于全局 在页面的.wxss文件中定义的样式为局部样式,只作用于当前页面
-全局配置
常用配置项目
window
2. window节点的常用配置项
3. 设置导航栏标题
4. 设置导航栏背景色
5. 设置导航栏的标题颜色(只有black和white)
6. 全局开启下拉刷新
7. 设置下拉刷新时的窗口背景色
8. 设置下拉刷新时的loading样式
9. 设置上拉触底的距离(不建议修改)
tabBar
- tabBar的组成部分
2. tabBar节点的配置项(list必填)
3. 每个tab项的配置选项
4.步骤
- 拷贝图标资源
- 新建3个对应的tab页面
- 配置tabBar选项
-页面配置
- 常用配置项
- 网络数据请求
- 小程序中网络数据请求的限制
2. 配置request合法域名
- 发起GET请求
4. 发起post请求
5. 在页面加载时请求数据
6. 跳过request合法域名验证
7. 关于跨域和AJAX的说明
四.视图与逻辑
页面导航
声明式导航
- 导航到tabBar页面
2. 导航到非tabBar页面
3.后退导航
编程式导航
- 导航到tabBar页面
2. 导航到非tabBar页面
3.后退导航
导航传参
- 声明式导航传参
2. 编程式导航传参
3.在onload中接收导航传参
页面事件
下拉刷新事件
下拉刷新配置
监听页面的下拉刷新事件
停止下拉刷新效果
上拉触底事件(案例)
监听事件
配置上拉触底距离
生命周期
应用生命周期函数
页面生命周期函数
WXS脚本
内嵌WXS脚本
外联WXS脚本
WXS特点
五.组件
自定义组件
- 创建组件
- 局部引用组件
3. 全局引用组件
4. 组件和页面的区别
