微信小程序的组件
view
普通视图区域
类似于html的div,是个块级元素
常用来实现页面的布局效果
scroll-view
可滚动的试图区域
常用来实现滚动列表效果
swiper swiper-item
轮播图容器组件和轮播图item组件
text
文本组件
类似于html中的span标签,是一个行内元素
通过text组件的selectable属性,实现长按选中文本内容的效果
rich-text
富文本组件
通过nodes属性节点,把html字符串渲染为wxml结构
button
按钮组件
通过open-type属性可以调用微信提供的各种功能
image
图片组件
默认宽度300px,高度240px
navigator
页面导航组件
类似与html的a链接
mode属性用来指定图片的裁剪和缩放模式,常用mode属性值如下:
API接口
事件监听API
以on开头,用来监听某些事件的触发
eg:wx.onWindowResize(function callback)监听窗口尺寸变化的事件
同步API
以Sync结尾的API都是同步API
同步API的执行结果,可以通过函数返回值直接获取,如果执行出错会抛出异常
eg:wx.setStorageSync('key','value')向本地存储中写入内容
异步API
类似于jQuery中的$.ajax(options)函数,需要通过success,fail,complete接收调用的结果
eg:wx.request()发起网络数据请求,通过success回调函数接收数据
数据绑定
在data中定义页面的数据
将data中数据绑定到页面中渲染,使用Mustache语法将变量包起来即可
事件绑定
事件是渲染层到逻辑层的通讯方式
常用的事件
事件对象的属性列表
target是触发该事件的源头组件,实际被点击的那个
currentTarget是当前事件所绑定的组件,绑定事件的那个
在事件处理函数中为data中的数据赋值
通过调用this.setData(dataObject)方法,可以给页面中的数据重新赋值
事件传参
不能在绑定事件的同时为事件处理函数传递参数
bindtap
可以为组件提供data-自定义属性传参,其中代表的是参数的名字
info会被解析为参数的名字
数值会被解析为参数的值
在事件处理函数中,通过event.target.dataset.参数名可获取到具体参数的值
bindinput
通过input事件来响应文本框的输入事件
e.detail.value是变化过后文本框最新的值
条件渲染
wx:if
使用wx:if="{{condition}}"来判断是否需要渲染该代码块
也可以用wx:elf和wx:else来添加else判断
结合使用wx:if
一次性控制多个组件的展示和隐藏可以使用一个标签将多个组件包装起来,并在标签上使用wx:if控制属性
并不是一个组件,他只是一个包裹性质的容器,不会再页面中做任何渲染
hidden
直接使用hidden="{{condition}}"也能控制元素的显示与隐藏
两种方式的不同
wx:if以动态创建和移除元素的方式,控制元素的展示与隐藏
hidden以切换样式的方式控制元素的显示与隐藏
频繁切换时,使用hidden
控制条件复杂,使用wx:if
列表渲染
wx:for
通过wx:for可以根据指定的数组,循环渲染重复的组件结构,当前循环项的索引用index,当前循环项用item表示
手动指定索引和当前项的变量名
使用wx:for-index可以指定当前循环项的索引的变量名
使用wx:for-item可以指定当前项的变量名
wx:for
指定唯一key值 提高渲染效率
模板样式
rpx
rpx是小程序独有的用来解决屏适配的尺寸单位,分成750份
样式导入
@import后需要导入的外联样式表的相对路径
全局配置
设置导航栏的标题
app.json ->window->navigationBarTitleText
设置导航栏的背景色
app.json->window->navigationBarBackgroundColor
设置导航栏的标题颜色
app.json->window->navigationBarTextStyle
可选值为black和white
下拉刷新功能
app.json->window->将enablePullDownReflesh的值设置为true
下拉刷新时窗口的背景色
app.json->window->backgroundColor
刷新时loading的样式
app.json->window->backgroundTextStyle
可选值为light和dark
设置上拉触底的距离
app.json->window->onReachBottomDistance
网络数据请求
1.只能请求HTTP类型的接口
2.必须将接口的域名添加到信任列表中
页面导航
1.声明式导航
在页面上声明一个<navigation>导航组件
通过点击<navigation>组件实现页面跳转
navigator组件的url属性用来指定将要跳转到的页面的路径 参数与路径之间使用?分割 参数键与参数值用=相连 不同参数用&分隔
2.编程式导航
调用小程序的导航API,实现页面的跳转
导航到tabBar页面
调用wx.switchTab方法,可以跳转到tabBar页面
导航到非tabBar页面
调用wx.navigateTo方法,可以跳转到非tabBar的页面
后退导航
调用wx.navigationBack方法,可以返回上衣页面或多级页面
导航传参
调用wx.navigateTo方法跳转页面
下拉刷新事件
处理函数为onPullDownRefresh
停止下拉刷新的效果
处理完下拉刷新后,下拉刷新的loading效果会一直显示,不会主动消失。调用wx.stopPullDownRefresh()可以停止当前页面的下拉刷新