1、欢迎页面
所支持的CSS选择器:虽然CSS1、CSS2和CSS3的选择器种类加起来有几十种,但在小程序中只有6种
注:本地资源在wxss中是无法使用的,可以使用网络图片来代替本地图片
Flex布局:用display:flex。其宗旨是让页面的样式布局更加简单,并且可以很好地支持响应式布局。传统用position和float属性来布局,它有缺陷,比如垂直居中就不是那么容易实现,Flex可以很好地解决这些问题。
使用display:flex将view变成了一个弹性盒子。
接着用flex-direction指定view内元素的排列方向。属性.row和.row-reverse(主轴为水平方向),.column和.column-reverse(主轴为垂直方向)
属性align-items: center,可以让元素水平居中。注:为“交叉轴”方向上的对齐方式。如主轴为垂直,则为水平方向对齐。
自适应单位rpx:可以使组件自适应屏幕的高度和宽度,但px不会。建议以iPhone6的宽度750个物理像素作为标准,来做设计图
全局样式文件app.wxss:如字体
页面的根元素page:container view的外边,还有一个默认的容器元素,page,代表着页面整体,所以只需对page设置背景色。
page {
background-color: #ECC0A8;
}
app.json中的window配置项:可用来设置状态栏、导航栏、标题和窗口的背景色。
2、文章列表页面
轮播图:每隔几秒图片会自动更换一张。swiper组件主要由多个swiper-item组成,在swiper-item中加image组件。
文章列表:<view> <text> <image>
image组件:4种缩放模式和9种裁剪模式
.js文件的代码结构与Page页面的生命周期:onload
数据绑定:在真实的项目中,业务数据通过访问RESTFUL API来获取数据。传统思路:获取DOM,对DOM标签进行赋值,从而实现数据的显示。但在JSCore完全抛弃了DOM,只能使用数据绑定。小程序仅实现了单向数据绑定。data变量作为数据绑定的桥梁。调用setData将引起页面的rerender(重新渲染)
绑定复杂对象:
列表渲染wx:for:尝试把所有的文章都改为数据绑定的形式
<block wx:for= "{{postList}}" wx:for-item="item" wx:for-index="idx"> <block>
<block>没有实质意义,并不是组件。
页面跳转:wx.redirectTo(关闭当前页面),wx.navigateTo(保留),switchTap(tabbar页面跳转)
冒泡事件和非冒泡事件:
3、模块、模板和缓存
template模板
使用storage缓存初始化本地数据库
4、文章详细页面
页面间传递参数的3种方式:全局、缓存、url的query参数传递
动态设置导航栏标题:wx.setNavigationBarTitle(OBJECT)
5、收藏、评论、点赞与计数功能
wx:if和hidden控制
6、背景音乐播放
播放音乐
7、丰富文章页面
分享给朋友