本文主要是小程序基础知识学习,这次主要是学习了网络请求数据,以及基础样式类似九宫格的滑动列表实现.
1. 顶部导航栏搜索框的实现
顶部导航栏底色为绿色,有一个白色的搜索框以及搜索图片,搜索文字等.
搜索
.main .header {
display: flex;
align-items: center;
background-color: #66B961;
height: 80rpx;
width: 100%;
}
.header .searchwrapper{
background-color: #ffffff;
width: 93%;
height: 70%;
margin: auto;
border-radius: 10rpx;
display: flex;
justify-content: center;
align-items: center;
}
.searchwrapper .searchImage{
width: 30rpx;
height: 30rpx;
margin-right: 5rpx;
}
.searchwrapper .title{
font-size: 25rpx;
color: #B2B2B2;
}
2. 影片九宫格列表搭建
九宫格列表的搭建思路是先将单个的item搭建出来,单个item的主要元素有电影图片,以及电影名,评分图片,评分等内容:
实现单个的item后配合scroll-view使用scroll-view官方文档,关于scroll-viewde的使用,有以下注意点:
-
设置scroll-view滚动方向:
image.png
2.单个的item在布局的时候如果使用flex布局,则默认是块级元素(独占整行),需要设置item的布局为inline-flex(行内元素),并设置scroll-view允许换行:
.items{
/* display: flex;
overflow-x: auto; 不使用scroll-view的时候可以设置overflow-x为auto,也可以实现横向滑动 */
white-space: nowrap; /*设置scroll-view允许换行*/
height: 328rpx;
}
.items .item{
display: inline-flex; /*设置item为行内元素*/
padding-left: 30rpx;
flex-direction: column;
width: 180rpx;
}
wxml中的实现代码:
{{movie.title}}
{{movie.rating.average}}
暂无评分
2.1 if条件渲染的使用
在判断某种条件成立的时候,使用到wx:if条件来实现渲染不同的元素;wx:if的使用方式主要有两种,一种是通过添加到view标签中使用,一种是使用block标签: 条件渲染小程序官方文档
- view wx:if
在框架中，使用 wx:if="" 来判断是否需要渲染该代码块：
True
也可以用 wx:elif 和 wx:else 来添加一个 else 块：
1
2
3
- block wx:if
因为 wx:if 是一个控制属性，需要将它添加到一个标签上。如果要一次性判断多个组件标签，可以使用一个标签将多个组件包装起来，并在上边使用 wx:if 控制属性。
view1
view2
注意：block标签并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性
3 网络请求数据及处理
在获取某些接口的时候可能需要先获取位置信息,通过微信官方wx.getLocation可以获取到用户当前的经纬度信息,同时使用百度地图通过经纬度可以获取到城市名,邮编,附近酒店,影院等信息;获取位置信息可以参考另一篇文章:获取位置信息链接
在.js文件中,datas直接用于存放请求回来的数据,在发送网络请求以后,请求成功给当前的datas赋值,并刷新当前页面:
/**
* 页面的初始数据
*/
data: {
allMovies:[
{
title:'影院热映',
url:'v2/movie/in_theaters',
movies:[]
},
{
title:'新片榜',
url:'v2/movie/new_movies',
movies:[]
},
{
title:'口碑榜',
url:'v2/movie/weekly',
movies:[]
},
{
title:'北美票房榜',
url:'v2/movie/us_box',
movies:[]
},
{
title:'Top250',
url:'v2/movie/top250',
movies:[]
}
]
},
我当前仿写的页面需要发送5次请求,其中第一次请求需要先获取城市信息,其它4次请求不需要城市信息作为参数,
在实际开发中,每次请求回来的数据,movies对应的movie路径,并不一样,这时候可以使用||语法,前面条件成立,则返回前面的作为movie,前面的不存在,则返回后面条件对应的路径下的movie;
onLoad: function (options) {
this.getCity((city)=>{
this.loadData(0,{city:city});
});
this.loadData(1);
this.loadData(2);
this.loadData(3);
this.loadData(4);
},
loadData:function(idx,param){
let obj = this.data.allMovies[idx];
wx.request({
url: wx.db.url(obj.url),
data: param,
header: {'content-type':'json'},
success: (result) => {
let items = result.data.subjects;
obj.movies = [];
for (let i = 0; i {},
complete: () => {}
});
},
如上图代码请求成功后数据打印示例:
刷新当前页面,使用:
this.setData(this.data);
调用此方法会自动通过datas里面的数据刷新当前页面.
3.1 九宫格的实现
前面在实现了单行的items的布局,以及横向滑动的操作,要实现多个items,可以在items的标签上添加一个for循环来实现,for循环的次数为datas中allMovies的length,具体的示例代码如下:
{{row.title}}
查看更多
{{movie.title}}
{{movie.rating.average}}
暂无评分
注意的小细节:
- 电影名过长显示省略号处理:固定item的宽度,并设置overflow和text-overflow:
.items .item{
display: inline-flex;
padding-left: 30rpx;
flex-direction: column;
width: 180rpx;
}
.items .title{
font-size: 30rpx;
width: 100%;
font-weight: bold;
overflow: hidden; /*超出部分直接剪切*/
text-overflow: ellipsis;/*超出部分显示省略号*/
}
- 在电影信息还未加载出来的时候先添加占位高度,实现较为简单,将row的高度直接写死;
- 星级stas需要先处理数据,实现的方式较多,然后根据自己的计算逻辑,在image标签中直接使用wx:for就可以实现星级的显示.
实现效果如下:
3.2 本地数据的缓存及读取
在获取网络氢气的数据以后,可以通过微信的wx.setStoreage和wx.getStorage来实现,用一个key值对应存储的数据: 数据缓存用法官方文档
将数据存储在本地缓存中指定的 key 中。会覆盖掉原来该 key 对应的内容。除非用户主动删除或因存储空间原因被系统清理，否则数据都一直可用。单个 key 允许存储的最大数据长度为 1MB，所有数据存储上限为 10MB。
// 将movies数组缓存到本地
wx.setStorage({
key: obj.title,
data: obj.movies
});
//读取
loadLocalData: function() {
for (let index = 0; index < this.data.allMovies.length; index++) {
let obj = this.data.allMovies[index];
obj.movies = wx.getStorageSync(obj.title);
}
this.setData(this.data);
},
数据的存储分为两种类型,同步和异步:
- wx.setStorage:异步存储数据,数据存储完了执行后续操作;
- wx.setStorageSync: 同步存储数据,数据存储同时执行后续操作;
wx.setStorage({
key:"key",
data:"value"
})
try {
wx.setStorageSync('key', 'value')
} catch (e) { }
- wx.getStorage:异步读取储数据,数据存储完了执行后续操作;
- wx.getStorageSync: 同步读取数据,数据存储同时执行后续操作;
wx.getStorage({
key: 'key',
success (res) {
console.log(res.data)
}
})
try {
var value = wx.getStorageSync('key')
if (value) {
// Do something with return value
}
} catch (e) {
// Do something when catch error
}
总结
本文主要实现了通过wx:for循环,和scroll-view的组合使用,实现了九宫格的逻辑,数据处理及存储等,实践出真知,在很多想起来实现很简单的东西,在写代码的时候会发现原来是这样,所以,不要放过任意一个细节,细水长流.