微信小程序开发笔记@

二、月份模块

月份模块包含的功能有在当前页面显示当前的日期、标题及标题所包含的图片（6个），最后加上"更多>"此按钮
具体样式如下：

 29 / 11月       			    不食人间烟火                			  更多>

代码为：

1 .wxml

<!-- 月份 --><view class="month_view"><!-- 月份标题 --><view class="month_title"><view class="active">{{month.month_msg}}</view><view>{{month.title}}</view><view class="active">更多></view></view><!-- 月份图片列表 --><view class="month_con"><navigator url="{{'/pages/picture/picture?src='+baseURL+item.thumb}}" class="month_item" wx:for="{{month.list}}" wx:key="_id"><image class="my_img" mode="aspectFill" src="{{baseURL+item.thumb}}"></image></navigator></view></view>

思路：
先使用三个view标签使上图需要的形式先列出来，第一个用.js中的方法得到日期然后表示出来；第二个在.js中取到相应的值直接调用；第三个直接打印。
接着打印月份图片列表，同样采用for循环逐个取资源并打印（不要忘记设置图片mode属性！！！）

2 .js

//定义获取日期数据的方法getMonth(){wx.request({//查找日期信息所在地址url:  'http://119.29.12.250:3000/home/month',success:(res)=>{//找到日期返回时的最近的地址//console.log(res.data.data)//从找到的地址里先处理成时间戳//把时间戳处理成日期对象var month_data = res.data.data    //获取当前日期对象的日期var date = res.data.data.date;//获取的时间戳处理成日期对象var time = new Date(date);//获取当前日期对象的日期var day = time.getDate();//获取当前日期对象的日期，月份从0开始，所以要+1var month = time.getMonth()+1;//拼接成需要的样子var month_msg = day + " / " + month+"月"month_data.month_msg = month_msg//console.log(month_data)this.setData({month:month_data})}})},

思路：
服务器中有当前的时间，直接取用即可。定义并使用变量以取用服务器里的日期数据，最后拼接成自己需要的样子即可。

3 .wxss

/*月份模块*/
.month_title{padding: 20rpx;display: flex;justify-content: space-between;
}
.active{color: hotpink;font-weight: 700;
}
.month_con{display: flex;flex-wrap: wrap;
}
.month_item{width:33.33%;border: 3px solid #fff;
}

三、热门模块

热门模块主要要使用的方法就是在服务器获取图片，对图片设置分页效果，每次加载12张图片，下滑到底部时自动加载。

代码为：

1 .wxml

<!-- 热门模块 --><view class="hot_view"><!-- '热门'标题 --><view class="hot_title">热门</view><!-- 热门图片列表 --><view class="month_con"><navigator url="{{'/pages/picture/picture?src='+baseURL+item.thumb}}" class="month_item" wx:for="{{hot}}" wx:key="_id"><image class="my_img" mode="aspectFill" src="{{baseURL+item.thumb}}"></image></navigator></view></view>

思路：
和之前一样使用wx:for循环拿取图片，设置图片链接、图片mode、wx:key。

2 .js

//定义获取热门图片数据的方法getHot(){wx.request({url: 'http://119.29.12.250:3000/home/hot',data: this.data.params,success:(res)=>{//console.log(res.data.data.list)this.setData({//hot里存储的是每一次从服务器拿到的数据的总和//使用es6展开运算符将每一次获取到的数据，跟之前拿到的进行拼接hot:[...this.data.hot,...res.data.data.list],total:res.data.data.total})}})},scrolltolower(){//判断还有没有更多数据，有的话就继续加载if(this.data.params.skip >= this.data.total){wx.showToast({title: '别拽了',icon:'none'})//终止程序！return}//修改发送请求的skip参数，使其自身每次+12var params = this.data.paramsparams.skip += 12//更新最新的参数到全局中去this.setData({params:params})this.getHot()}

思路：
在方法getHot()里，拿到数据的地址，进行拼接，把拼接后完整的地址存储到之前定义的hot[ ]数组变量里。
在 scrolltolower()方法作用为：判断是否还有更多的数据，有的话就继续加载，没有则提示用户并向服务器停止请求数据。

3 .wxss

/*热门模块*/
.month_con{display: flex;flex-wrap: wrap;
}
.my_img{width: 100%;
}
.hot_title{color: hotpink;padding-left: 16rpx;margin: 10rpx;border-left: 4px solid hotpink;
}
.month_item{width:33.33%;border: 3px solid #fff;
}

思路：
之前定义过的形式因为和之前形式相同，就直接复用不需要重新写。

3.首页——分类页设计

（页面：①category+②categoryDetail）

分类页由多个盒子模型组成，包含具体分类页和分类详情两个页面，每个盒子模型都指向相对应的页面，可以显示这类的图片。调用tabs方法，使分类详情里可以切换最新数据和热门数据。

一、具体分类页（①）
具体分类页由若干个盒子模型组成，从服务器中获取需要的图片数据，设置图片格式并在图片上显示类名，点击则进入详情页

①代码为：

1 .wxml

<!--分类页面-->
<view class="category_view"><navigator url="{{'/pages/categoryDetail/categoryDetail?id='+item.id}}" class="category_item" wx:for="{{ list }}" wx:key="_id"><!--分类封面图片--><image class="my_img" mode="aspectFill" src="{{ baseURL+item.cover}}"></image><!--分类名称--><view class="title">{{ item.name }}</view></navigator>
</view>

思路：
在具体分类页上排列分类封面图片，使用wx:for循环逐次获取图片；并设置view获取分类名称，在图片底部重合半透明显示

2 .js

data: {//接收服务器传递回来的分类数据list:[],//定义根路径baseURL:"http://122.114.27.185:3000/"},methods: {// 定义获取分类数据的方法getCategory(){wx.request({url: 'http://122.114.27.185:3000/category',success:(res)=>{//console.log(res.data.data)// 把服务器拿到的数据更新到data里this.setData({list:res.data.data})}})}},lifetimes: {// 组件创建完毕去服务器拿数据attached: function() {// 调用获取分类数据的方法this.getCategory()}}

思路：
定义获取分类数据的方法并调用。定义全局变量list[ ]和baseURL来存储数据。

3 .wxss

.category_view {display: flex;flex-wrap: wrap;
}
.category_item {/* 在375的设计稿下，屏幕的三分之一是125px；当前图片是正方形，所以高度也是125px --- 125px=250rpx*/width:33.33%;height: 250rpx;border: 3px solid #fff;position: relative;
}
.my_img {width: 100%;height: 250rpx;
}/* 子绝父相 */
.title {width: 100%;height: 46rpx;line-height: 46rpx;/* 背景半透明 */background-color:rgba(0,0,0,.4);position: absolute;left: 0;bottom: 0;color: #fff;padding-left: 8rpx;
}

思路：
category_view、category_item、my_img 设置图片格式；
title 设置分类名称格式。

二、分类详情（②）
分类详情由组件方法categoryDetail构成，定义点击具体分类页的图片来调用categoryDetail方法，进入详情页。

②代码为：

1 .wxml

<!--
引入tabs子组件；定义tabs属性向子组件传递标题属性列表；绑定子组件自定义事件bindtransIndex获取点击项的索引；
点击tabs选项卡要做的事情：
1.首先根据子组件传递过来的index索引找到对应的order属性；
2.将order属性更新到data的params参数集合里；
3.将params参数集合全体初始化—— skip归0；
4.将data里存储数据的list清空 --- 之前存放的上个接口的数据全部不要；
5.可以重新发起数据请求了！
-->
<tabs tabs="{{ titles }}" bindtransIndex="changeIndex"></tabs>
<!--
scroll-view：
1.如果要使用的话，需要给盒子添加一个固定高度；使用css的计算属性；
2.给盒子设置scroll-y属性，开启垂直方向的滚动；
3.使用enable-flex 属性，开启弹性盒子布局；
4.添加触底事件；
-->
<scroll-view scroll-y enable-flex class="detail_view" bindscrolltolower="scrolltolower">
<navigator url="{{'/pages/picture/picture?src='+baseURL+item.thumb}}" class="detail_item" wx:for="{{ list }}" wx:key="_id"><image mode="aspectFill" src="{{baseURL+item.thumb}}" class="my_img"></image>
</navigator>
</scroll-view>

思路：
引动 tabs 组件，加入点击跳转的方法，设置盒子的样式，获取图片链接，设置图片格式。

2 .js

data: {//定义向子组件传递的标题列表数据titles:[{id:0,text:"最新",order:"new"},{id:1,text:"热门",order:"hot"}],//接收分类页面传递过来的idid:'',//定义跟路径baseURL:'http://122.114.27.185:3000/',//定义数据请求的参数集合params:{skip:0,limit:12,order:"new"},//接收服务器返回的list数据list:[],//定义总条数total:0},
/*** 生命周期函数--监听页面加载*/onLoad: function (options) {//通过打印生命周期函数的参数找到id；//console.log(options.id)//把上个页面传递过来的分类id存储到全局data里去this.setData({id:options.id})//调用接收分类详情数据的方法this.getCategoryDetail()},//定义接收分类详情数据的方法getCategoryDetail(){//显示加载提示框wx.showLoading({title: '数据在赶来的路上'})wx.request({//在请求路径上拼接上个页面传递过来的分类idurl: 'http://122.114.27.185:3000/category/'+this.data.id,//拼接请求参数集合data:this.data.params,success:(res)=>{//console.log(res.data.data.list)this.setData({//使用展开运算符把每次拿到的数据拼接在一起list:[...this.data.list,...res.data.data.list],total:res.data.data.total})//隐藏加载提示框wx.hideLoading({})}})},//完成分页功能scrolltolower(){if( this.data.params.skip >= this.data.total ){//提醒用户没有更多数据了wx.showToast({title: '我是有底限的'})//终止程序return}//获取全局data里的参数集合，并且修改skip参数var params = this.data.params;params.skip += 12;//把修改后的参数集合更新到data全局去this.setData({params:params})//调用接收分类详情数据的方法this.getCategoryDetail()},//点击tabs切换对应加载热门最新数据changeIndex(e){//获取当前点击项的索引//console.log(e.detail)var index  = e.detail//获取data里的属性列表var titles = this.data.titles//使用数组访问方式+对象访问方式 找到对应索引项下的order属性var order = titles[index].order//console.log(order)var params = this.data.params;//修改data里的params参数集合的order属性params.order = order//可以把它看称一次全新的页面加载，把所有请求参数初始化params.skip = 0this.setData({params :params,list:[]})//console.log(this.data.params)//调用接收分类详情数据的方法this.getCategoryDetail()}

思路：
定义接收分类详情数据的方法并调用，使用数据拼接方法实现自动加载。定义分页功能。

3 .wxss

.detail_view {height: calc(100vh - 30px);display: flex;flex-wrap: wrap;
}
.detail_item {width: 33.33%;border: 3px solid #fff;
}
.my_img {width: 100%;
}

思路：
设置图片格式，并设置flex方法使其自动换行，设置边界线。

3.首页——专辑页设计

（页面：①album+②albumDetail）

专辑页由多个盒子模型组成，包括分类页和详情页两个页面，分类的盒子模型指向相对应的专辑的图片，点击即可获取这类专辑中的图片数据。

一、分类页（①）
分类页由 album 构成，定义点击图片即可进入该专辑详情页的方法，同时调用三张小图片放到主图下方增加美感。

①代码为：

1 .html

<scroll-view scroll-y enable-flex class="album_view" bindscrolltolower="scrolltolower">
<!--1.给当前循环的每一项都绑定点击事件；2.通过循环项的索引拿到当前项的这条数据；---- index3.把这条数据存储到小程序数据共享里4.使用js方法实现页面跳转
--><view bindtap="goAlbumDetail" class="album_item" wx:for="{{ list }}" wx:key="_id" data-index="{{index}}"><!--cover封面图片--><view class="cover"><image mode="aspectFill" src="{{baseURL+item.cover}}"></image></view><!--文本--><view class="txt"><view>{{item.name}}</view><view>共{{item.count}}张</view></view><!--三张小图片--><view class="imgs"><!--1.要循环的是当前每一项（每一个list）里面的imgs数组！2. wx:for-item="item1" 来修改当前循环项的代号！起什么名字就用什么名字；3.imgs是一个简单的数组形式，所以使用wx:key="*this"来指定我们的循环key值；4.循环的每一项自身就是图片路径；--><image wx:for="{{item.imgs}}" wx:key="*this" wx:for-item="item1" mode="aspectFill" src="{{baseURL+item1}}"></image></view></view>
</scroll-view>

思路：
对每一张图绑定点击事件，通过 wx:for 循环来获取需要的图片，并获取文本等信息。

2 .js

data: {//定义数据请求时候的参数集合params:{skip:0,limit:12},//接收专辑列表数据list:[],//定义根路径baseURL:"http://122.114.27.185:3000/",//定义总条数total:0},
methods: {//定义获取专辑数据的方法getAlbum(){//显示加载中wx.showLoading({title: '数据正在赶来的路上'})wx.request({url: 'http://122.114.27.185:3000/album',//拼接请求路径的参数data:this.data.params,success:(res)=>{//打印获取到的数据//console.log(res.data.data.list)//更新数据到全局的data里去this.setData({list:[...this.data.list,...res.data.data.list],total:res.data.data.total})//隐藏加载中的弹窗wx.hideLoading({})}})},//绑定触底事件完成分页功能scrolltolower(){if( this.data.params.skip >= this.data.total){wx.showToast({title: '我是有底线的！'})return}var params = this.data.params;params.skip += 12;this.setData({params:params})// 调用获取专辑数据的方法this.getAlbum()},//点击跳转到详情页面goAlbumDetail(e){//2.通过循环项的索引拿到当前项的这条数据；---- index//console.log(e.currentTarget.dataset.index)//根据事件对象拿到存储进来的index索引值var index = e.currentTarget.dataset.index//根据索引值，找到全局list里面的那条数据var item = this.data.list[index]//3.把这条数据存储到小程序数据共享里var app = getApp()app.item = item//4.使用js方法实现页面跳转wx.navigateTo({url:"/pages/albumDetail/albumDetail"})}},lifetimes: {// 组件创建完毕去服务器拿数据attached: function() {// 调用获取专辑数据的方法this.getAlbum()}}

思路：
通过 getAlbum( )定义获取专辑数据的方法
scrolltolower( )绑定触底事件完成分页功能

3 .wxss

/* 最外层的大盒子，需要使用弹性布局，并且换行*/
.album_view {display: flex;flex-wrap: wrap;height: calc(100vh - 30px);
}
.album_item {width: 50%;border: 3px solid #fff;/* 子绝父相*/position: relative;
}
.cover image{width:100%;height: 470rpx;
}
.txt {width: 100%;position: absolute;left: 0;top: 0;background-color:rgba(0,0,0,.4);color: #fff;padding: 6rpx;
}
.imgs {display: flex;
}
.imgs image {/* 按照iphone6的尺寸，屏幕总宽度是375px，50%是187.5px；一排需要放3个，每个占三分之一，就是62.5px----》 换算成rpx ----》125rpx*/width: 125rpx;height: 125rpx;border:1px solid #fff;
}

思路：
定义大图的样式，再使用子绝父相的方法把文本嵌入到图片中，将三个小图片排列在大图下方，更改尺寸使其适应屏幕。

二、详情页（②）
详情页由 albumDetail 构成，页面通过点击分类页的图片进入，页面上方是一个轮播图，轮播图下是作者的头像、名称，再往下就是具体图片的位置。
②代码为：

1 .html

<!--页面优化：使用wx:if="{{album.user}}" --- 解决网络层渲染报错
-->
<view class="album_detail" wx:if="{{album.user}}"><!--banner轮播图部分--><view class="banner"><swiper autoplay indicator-dots circular><swiper-item wx:for="{{album.imgs}}" wx:key="*this"><image class="my_img" mode="aspectFill" src="{{ baseURL+ item }}"></image></swiper-item></swiper><view class="title">{{ album.name }}</view></view><!--用户名称+头像--><view class="user"><image class="author_i" src="{{ baseURL+album.user.avatar}}"></image><view>{{ album.user.name }}</view></view><!--列表结构--><view class="album_list"><navigator url="{{'/pages/picture/picture?src='+baseURL+ item.thumb}}" class="album_item" wx:for="{{ list }}" wx:key="_id"><image mode="aspectFill" src="{{ baseURL+ item.thumb }}"></image></navigator></view>
</view>

思路：
设置页面布局：使用swiper 调用轮播图方法，设置自动播放，悬浮按键等属性；定义盒子模型显示用户名称+头像；通过列表来循环获取图片数据。

2 .js

data: {//接收专辑列表页面传递过来的数据album:[],//接收专辑详情页面列表数据list:[],//定义根路径baseURL:"http://122.114.27.185:3000/",//定义数据请求的参数集合params:{skip:0,limit:12},//数据的总条数total:0},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {//通过小程序全局数据共享拿到上个页面存进去的数据var app = getApp()//console.log(app.item)//更新到全局的data里this.setData({album: app.item})//console.log(this.data.album)//调用获取列表数据的方法this.getAlbumList()},//定义获取列表数据的方法getAlbumList(){wx.showLoading({title:'数据在路上'})wx.request({url: 'http://112.114.27.185:3000/album/'+this.data.album.id,data:this.data.params,success:(res)=>{//console.log(res.data.data)this.setData({list:[...this.data.list,...res.data.data.list],total:res.data.data.total})wx.hideLoading()}})},//使用页面自带的触底事件实现分页功能onReachBottom(){if(this.data.params.skip >= this.data.total){wx.showToast({title: '我是有底线的'})return}var params = this.data.paramsparams.skip += 12this.setData({params:params})//调用获取列表数据的方法this.getAlbumList()}

思路：
getAlbumList( ) 获取列表数据的方法
获取数据并储存起来以调用
onReachBottom( ) 页面自带的触底事件
使用页面自带的触底事件实现分页功能

3 .wxss

.banner {width: 100%;height: 400rpx;position: relative;
}
.banner swiper {height: 400rpx;
}
.my_img {width: 100%;height: 400rpx;
}
.title {width: 100%;height: 60rpx;line-height: 60rpx;padding-left: 10rpx;color: #fff;background-color: rgba(0,0,0,.4);position: absolute;left: 0;bottom: 0;
}
.user {display: flex;padding: 20rpx 10rpx;/* flex布局里设置垂直居中的方式 */align-items: center;
}
.author_i {width: 60rpx;height: 60rpx;margin-right: 16rpx;
}
.album_list {display: flex;flex-wrap: wrap;
}
.album_item {width: 33.33%;border: 3px solid #fff;height: 480rpx;
}
.album_item image {width: 100%;
}

思路：
设置图片、盒子模型、轮播图的格式，使用flex 以及子绝父相的方法来控制页面布局。

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！