view
类似div 块状元素 可设置 宽高!
fix-direction:row 横向布局
fix-direction:column 纵向布局
横向滑动
标签组件: swiper和swiper-item(单个页面)
一般都是照片! 视屏和音频都可不行,上传代码包大小有限制!
swiper组件常用属性:
indicator-dots boolean false 是否显示面板指示点! indicator-color="#ccc" color 只能用十六进制 指示点颜色! indicator-active-color="blue" 当前选中的指示点颜色! autoplay boolean false 是否自动切换! interval number 5000(毫秒) 自动切换的时间! circular boolean false 是否采用衔接滑动!
<swiper class="swiper-container" indicator-dots indicator-color="#ccc" indicator-active-color="blue" circular><!-- 第一项轮播图 --><swiper-item><view class="item"><image src="/img/001.jpg"></image></view></swiper-item> <!-- 第二项轮播图 --><swiper-item><view class="item"><image src="/img/002.jpg"></image></view></swiper-item><!-- 第三项轮播图 --><swiper-item><view class="item"><image src="/img/003.jpg"></image></view></swiper-item> </swiper>
竖向滑动
组件: scroll-view 滚动的视图容器 必须给个固定高度!
<!-- scroll-y 属性 允许竖向滚动 --> <!-- 注意，使用竖向滚动时，必须给个固定高度 --> <!-- scroll-x 属性 允许横向滚动 --> <scroll-view scroll-y> • <view></view> • <view></view> • <view></view> </scroll-view>
text标签
类似HTML中span标签 是个行内标签!
该标签只有一个作用 selectable(要加,不加效果不显示)!
<text selectable>15876345671</text>
在实际页面 长按可以复制!!
rich-text
渲染HTML标签-用于小程序书写
要知道,HTML标签与小程序标签不是一个概念,不能直接用!
<rich-text nodes="<h1 style='color:red;'>苏苏少年</h1>"></rich-text>
button组件
<button>默认按钮</button> 白背景黑色字 <button type="primary">主色调按钮</button> 绿背景白字 <button type="warn">警告按钮</button> 白背景红字 size="mini" 缩小版的 <button size="mini">默认按钮</button> plain 镂空按钮 就是白色背景-字体颜色不一样! <button plain>默认按钮</button>
在全局样式配置 app.json
"style" : "v2" 新版样式!
删掉此代码,button按钮将使用老版样式!
image组件
小程序中只有image标签, 没有img标签
<image src=""></image> /(斜杠) 表示根目录!
image组件中的mode属性!
API
简单了解!!
① 事件监听API
特点: 以on开头
②同步API
特点: 以Sync结尾
③异步API
数据绑定
在页面对应的.js文件中,把数据定义到data对象中
page({data: {info: 'hello world',imgSrc: 'images/...'}
})
页面结构如下:
<view>{{info}}</view>
<image src="{{imgSrc}}" mode="widthFix"></image>
三元运算
页面数据如下:
page({data: {randomNum: Math.random()*10// 随机生成10以内的数!}
})
页面结构如下:
<view>{{randomNum >=5 ? '数字大于或等于5' : '数字小于5'}}</view>
算数运算
页面数据如下:
page({data: {randomNum: Math.random().toFixed(2)// 生成一个带两位小数的随机数 0.34}
})
页面结构如下
<view>生成100以内的随机数:{{randomNum * 100}}</view>
常用的事件
事件对象
条件渲染
......(这里不在深究!)
列表渲染
......(这里不在深究!)
WXSS
WXSS(WeiXin Style Sheets)是一套样式语言,用于美化WXSS的组件样式,类似于网页开发中的CSS!
WXSS具有CSS大部分特性 同时,WXSS还对CSS进行了扩充以及修改,以适用微信小程序的开发.
WXSS扩展特性有:
① rpx尺寸单位
rpx(responsive pixel) 是微信小程序独有的,用来解决屏适配的尺寸单位! (了解)
② @import样式导入
@import后跟需要导入的外联样式表的相对路径 用 ; 表示语句结束!
示例: @import "common.wxss";
首先,建立一个公共样式common.css 写一个样式 导入 以及导入的路径 就可以在wxml直接使用!
全局配置
小程序根目录下的app.json文件是小程序的全局配置文件.
常用的配置如下:
① pages
-
记录当前小程序所有页面的存放路径!
② window (!!)
-
全局设置小程序窗口的外观!
③ tabBar (!!)
-
设置小程序底部的tabBar效果!
④ style
-
是否用新版的组件样式!
window节点
导航栏颜色仅支持十六进制 (#2b4b6b)!
下拉刷新效果
概念: 下拉刷新是移动端的专有名词,指的是通过手指在屏幕上的下拉滑动操作,重新加载页面数据的行为!
在全局配置/单个页面配置(app.json / .js)
"enablePullDownRefresh": true
定义下拉刷新的背景色
"backgroundColor": (十六进制) #efefef(浅灰色)
设置下拉刷新时loading的样式!
"backgroundTestStyle": dark或light
上拉触底
概念: 上拉触底是移动端的专有名词, 通过手指在屏幕上的上拉滑动操作, 从而加载更多数据的行为!
"onReachBottomDistance":50px 默认距离为50px
tabBar
tabBar 是移动端应用常见的页面效果, 用于实现多页面的快速切换.
小程序中通常将其分为:
-
底部tabBar
-
顶部tabBar
注意:
-
tabBar中只能配置最少两个 最多五个tab页签!
-
当渲染顶部tabBa时, 不显示icon(图标) 只显示文本!
backgrundColor: tabBar的背景色! borderStyle: tabBar上边框的颜色! selectedIconPath: 选中时的图片路径! iconPath: 未选中时的图片路径! selectedColor: tabBar上的文字选中时的颜色! color: tabBar上文字的默认(未选中)颜色!
tabBar配置
每个tab项的配置选项
配置tabBar选项!
"tabBar":{"list":[{"pagePath": "pages/index/index","text": "首页","iconPath":"/images/houme.png","selectedIconPath": "/images/home.png"},{"pagePath": "pages/demo/demo","text": "消息","iconPath":"/images/houme.png","selectedIconPath": "/images/home-active.png"}]
}
页面配置
在小程序中, 每个页面都有自己的.json配置文件, 用来对当前页面的窗口外观 页面效果等进行配置!
页面配置与全局配置的关系:
在小程序中 app.json中的winow节点 可以全局配置小程序中每一个页面的窗口表现.
如果某些小程序页面想要拥有特殊的窗口表现 此时 "页面级别的.json配置文件" 就可以实现这种需求!
注意: 当页面配置与全局配置冲突时 根据就近原则 最终结果以页面配置为准!
数据请求
出于对安全性方面的考虑 小程序官方对数据接口的请求做出了如下两个限制:
-
只能请求HTTPS类型的接口!
-
必须将接口的域名添加到信任列表中!
关闭黄条警示
"checkSiteMap":false
声明式导航
-
在页面上声明一个<navigator>导航组件
-
通过点击<navigator>组件实现页面导航
导航到tabBar页面
tabBar页面指的是被配置为tabBar的页面
在使用<navigator>组件跳转指定的tabBar页面时,需要指定url属性和open-type属性:
其中
url表示要跳转的页面的地址, 必须以 / 开头 (不加斜杠 不起作用)
open-type表示跳转的方式 必须为 switchTab
<navigator url="/pages/message/message" open-type="switchTab">导航到消息页面</navigator>
导航到非tabBar页面
url表示要跳转的页面的地址, 必须以 / 开头 (不加斜杠 不起作用)
open-type表示跳转的方式 必须为 navigate (可省略)
<navigator url="/pages/info/info">导航到info页面</navigator>
后退导航
如果要退到上一页面或多级页面, 则需要指定open-type属性和delta属性
其中:
-
open-type的值必须是navigateBack, 表示进行后退导航
-
delta得知必须是数字 表示要后退的层级
<navigator open-type="navigateBack" delta="1"></navigator>
注意:
为了简单, 如果只是后退到上一页,则可以省略delta属性 因为其默认值就是1!
编程式导航
调用小程序的导航API, 实现页面的跳转!
跳转到tabBar页面
页面结构:
<button bindtap="gotoMessage">跳转到message页面</button>
跳转到非tabBar页面
<button bindtap="gotoInfo">跳转到info页面</button>
后退导航
声明式导航传参
navigator组件的url属性用来指定将要跳转到的页面的路径. 同时,路径也可以携带参数!
-
参数与路径之间使用 ? 分隔
-
参数键与参数值用 = 相连
-
不同参数用 & 分隔
........
