《微信小程序程序设计与开发》课件 第二章 文章列表页面

第二章

主讲人：XX文章列表页面本章目标使用swiper和swiper-items实现文章页面轮播理解.js文件的代码结构与page页面的生命周期掌握微信小程序数据绑定与setData函数(Mustache语法)掌握微信小程序事件与事件冒泡掌握微信小程序路由机制一、用swiper组件实现文章轮播小米商城首页的Banner轮播图不管PC网站还是WebApp首页轮播图功能很常用，微信小程序的API提供已经封装好的组件swiper，使用起来非常方便。

swiper组件是小程序提供的滑动视图容器,它需要放置swiper-item组件配置使用，同时，需要注意的是，swiper组件的直接子元素只可以使swiper-item，如果放置其他组件，则被自动删除。但swiper-item下是可以放置其他组件或者元素的。一、用swiper组件实现文章轮播文章页面轮播最终实现效果实现步骤：第一步：创建文章列表页面。第二步：使用swiper组件和swiper-item组件构建页面内容，并设置页面样式。设置swiper属性。第三步：设置swiper属性。操作步骤一：创建文章列表页面1、在pages目录创建一个名为posts页面，然后通过微信开发工具创建页面所需要4个文件；2、把app.json的pages数组关于posts页面调整到pages数组的第一个元素

"pages":

[

"pages/posts/posts",

"pages/welcome/welcome",

"pages/index/index"

]操作步骤二：构建页面内容，并设置页面样式<view>

<swiper>

<swiper-item>

<image

src="/images/posts/post-1.png"></image>

</swiper-item>

<swiper-item>

<image

src="/images/posts/post-2.png"></image>

</swiper-item>

<swiper-item>

<image

src="/images/posts/post-3.png"></image>

</swiper-item>

</swiper></view>posts页面代码/*设置swiper的样式*/swiper{

width:

100%;

height:460rpx;}/*设置swiper-item中image组件的样式*/swiperimage{

width:

100%;

height:460rpx;}posts样式代码运行效果操作步骤三：设置swiper属性indicator-dotsBoolean类型。用来指定是否显示面板指示点，默认值为false。indicator-colorcolor类型。用来指定显示面板颜色，默认值为rgba(0,0,0,.3)。indicator-active-colorcolor类型。用来指定当前选中的指示点颜色，默认值#000000autoplayBoolean类型。用来指定是否自动播放，默认值为falseIntervalNumber类型。用来设置swiper-item的自动切换时间间隔,默认值为5000毫秒。CircularBoolean类型。用来指定是否循环轮播滚动，默认值为false。<view>

<swiper

indicator-dots="true"indicator-active-color="#fff"indicator

autoplay="true"interval="5000"circular="true">

<swiper-item>

<image

src="/images/posts/post-1@text.jpg"></image>

</swiper-item>

<swiper-item>

<image

src="/images/posts/post-2@text.jpg"></image>

</swiper-item>

<swiper-item>

<image

src="/images/posts/post-3@text.jpg"></image>

</swiper-item>

</swiper></view>运行效果运行效果Boolean值的陷阱小程序组件中Boolean类型的属性并不是Boolean类型，而是一个字符串类型，程序在执行读取这个内容使用JavaScript语言进行读取都会认为这是一个true。所以，设置indicator-dots=”false”属性运行效果跟我们预期效果不一样。在这里我们设置Boolean类型属性false，有以下几种方式：不加入indicator-dots属性

indicator-dots=””indicator-dots=”{{false}}”同样如何设置Boolean类型属性为true，有以下几种方式：加入indicator-dots属性，不设置属性值indicator-dots=”true”indicator-dots=”{{true}}”<view>

<swiper

indicator-dots="{{true}}"indicator-active-color="#fff"indicator

autoplay="true"interval="5000"circular="{{true}}">

<swiper-item>

<image

src="/images/posts/post-1@text.jpg"></image>

</swiper-item>

<swiper-item>

<image

src="/images/posts/post-2@text.jpg"></image>

</swiper-item>

<swiper-item>

<image

src="/images/posts/post-3@text.jpg"></image>

</swiper-item>

</swiper></view>推荐属性设置方式微信小程序渲染层和逻辑层渲染层的界面使用了WebView进行渲染；逻辑层采用JsCore线程运行JS脚本。一个小程序存在多个界面，所以渲染层存在多个WebView线程，这两个线程的通信会经由微信客户端（下文中也会采用Native来代指微信客户端）做中转，逻辑层发送网络请求也经由Native转发页面生命周期onLoad监听页面加载，一个页面只会调用一次。onShow监听页面显示，每次打开页面都会调用。onReady监听页面初次渲染完成，一个页面只会调用一次，代表页面已经准备完成，可以和视图层进行交互。onHide监听页面隐藏。onUnload监听页面卸载。页面生命周期-示例Page({

/***页面的初始数据*/data:

{

},

/***生命周期函数--监听页面加载*/

onLoad:

function

(options)

{

console.log("onLoad：Post页面加载。");

},

/***生命周期函数--监听页面初次渲染完成*/

onReady:

function

()

{

console.log("onReady:post初次渲染完成");

},

/***生命周期函数--监听页面显示*/

onShow:

function

()

{

console.log("onShow:post页面显示");

},

/***生命周期函数--监听页面隐藏*/

onHide:

function

()

{

console.log("onHide:post页面隐藏");

},

/***生命周期函数--监听页面卸载*/

onUnload:

function

()

{

console.log("onUnload:post页面卸载");

},})生命周期函数的执行顺序接下点击模拟器Home键微信小程序简单数据绑定WXML中的动态数据均来自对应Page的data。//pages/welcome/welcome.jsPage({

/***页面的初始数据*/data:

{

avatar:"/images/bingdundun.jpg",

motto:"Hello,冰墩墩"

}})<view

class="container"><imageclass="avatar"src="{{avatar}}"></image><textclass="motto">{{motto}}</text>

<view

class="journey-container">

<text

class="journey">开启小程序之旅</text>

</view></view>数据绑定使用Mustache语法（双大括号）将变量包起来，可以作用于数据绑定工具-AppData面板使用welcome页面在AppData面板中的数据绑定情况在AppData中设置motto值微信小程序复杂数据绑定-数据初始化

/***页面的初始数据*/data:

{

date:

"February

9

2023",post:{title:

"2023LPL春季赛第八周最佳阵容",postImg:

"/images/post/post1.jpg",avatar:

"/images/avatar/1.png",content:

"2023LPL春季赛第八周最佳阵容已经出炉，请大家一起围观...",

},readingNum:

23,collectionNum:{array:[108]

},commentNum:

7

}

<!--文章列表-->

<view

class="post-container">

<view

class="post-author-date">

<image

src="{{post.avatar}}"/>

<text>{{date}}</text>

</view>

<text

class="post-title">{{post.title}}</text>

<image

class="post-image"src="{{post.postImg}}"mode="aspectFill"/>

<text

class="post-content">{{post.content}}</text>

<view

class="post-like">

<image

src="/images/icon/wx_app_collect.png"/>

<text>{{collectionNum.array[0]}}</text>

<image

src="/images/icon/wx_app_view.png"></image>

<text>{{readingNum}}</text>

<image

src="/images/icon/wx_app_message.png"></image>

<text>{{commentNum}}</text>

</view>

</view></view>在js文件定义模拟绑定数据使用{{}}语法实现复杂对象绑定微信小程序-图片裁剪<image

class="post-image"src="{{post.postImg}}"mode="aspectFill"/>文章列表中图片图片被压缩变形了修改图片mode之后的运行效果列表渲染wx:for-实现文章轮播数据动态步骤一：在this.data中添加模拟服务器的数据的代码bannerList:['/images/posts/post-1.png',

'/images/posts/post-2.png',

'/images/posts/post-3.png']步骤二：需要在页面通过wx:for进行数据绑定

<!--文章轮播-->

<swiper

indicator-dots="{{true}}"indicator-active-color="#fff"indicator

autoplay="true"interval="5000"circular="{{true}}">

<swiper-item

wx:for="{{bannerList}}"wx:for-item="bannerItem">

<image

src="{{bannerItem}}"></image>

</swiper-item>

</swiper>在这里我们列表渲染的内容是<swiper-item>，所以我们在次标签中使用wx:for，在这里我们通过“wx:for-item”制定每次迭代内容项，在这里可以省略，默认为”item”。列表渲染wx:for-实现文章列表数据动态<!--文章列表-->

<block

wx:for="{{postList}}"wx:for-item="post"

wx:for-index="postId">

<view

class="post-container">

<view

class="post-author-date">

<image

src="{{post.avatar}}"/>

<text>{{post.date}}</text>

</view>

<text

class="post-title">{{post.title}}</text>

<image

class="post-image"src="{{post.postImg}}"mode="aspectFill"/>

<text

class="post-content">{{post.content}}</text>

<view

class="post-like">

<image

src="/images/icon/wx_app_collect.png"/>

<text>{{post.collectionNum}}</text>

<image

src="/images/icon/wx_app_view.png"></image>

<text>{{post.readingNum}}</text>

<image

src="/images/icon/wx_app_message.png"></image>

<text>{{post.commentNum}}</text>

</view>

</view>

</block>运行效果微信小程序事件的使用微信小程序中事件的定义：事件是视图层到逻辑层的通讯方式。事件可以将用户的行为反馈到逻辑层进行处理。事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。事件对象可以携带额外信息，如id,dataset,touches。事件的使用<view

class="container">

<image

class="avatar"src="{{avatar}}"></image>

<text

class="motto">{{motto}}</text>

<view

catchtap="hanldTap"class="journey-container">

<text

class="journey">开启小程序之旅</text>

</view></view>

hanldTap:function(event){

console.log("clickme!");

}事件对象当组件触发事件时，逻辑层绑定该事件的处理函数会收到一个事件对象，可以通过事件对象获得事件相关数据

hanldTap:function(event){

console.log("clickme!");

console.log(event);

}事件对象-传输数据很多场景需要在事件处理需要进行数据传输，例如在页面处理页面跳转时，我们需要传递一个对象ID或者更加复杂的信息，这个时候我们就可以使用id与dataset这两个参数。Id一般我们传递一个简单数据可以使用Id进行传值。dataset一般我们传递一个复杂的对象信息我们可以使用dataset。

<view

catchtap="hanldTap"id="postId"data-info1="Weixin"data-info2="java"

class="journey-container">

<text

class="journey">开启小程序之旅</text>

</view>事件分类-冒泡事件和非冒泡事件事件分为冒泡事件和非冒泡事件：冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。事件分类-冒泡事件示例<view

class="container">

<image

class="avatar"src="{{avatar}}"></image>

<text

class="motto">{{motto}}</text>

<view

bindtap="hanldTap"

id="postId"data-info1="Weixin"data-info2="java"class="journey-container">

<text

class="journey"bindtap="hanldTapInner">开启小程序之旅</text>

</view></view>

hanldTap:function(event){

//console.log("clickme!");

//console.log(event);

console.log("父节点被点击了");

},

hanldTapInner:function(){

console.log("子节点被点击了");

},页面代码绑定事件事件处理函数运行效果注意：在使用冒泡方式，点击子节点，子节点target和currentTarget都接收事件对象都是子节点，而被冒泡的父节点target接收事件对象是子节点,currentTarget是父节点事件分类-阻止冒泡事件示例

hanldTap:function(event){

//console.log("clickme!");

//console.log(event);

console.log("父节点被点击了");

},

hanldTapInner:function(){

console.log("子节点被点击了");

},页面代码绑定事件(使用catchtap方式绑定事件)事件处理函数运行效果<view

class="container">

<image

class="avatar"src="{{avatar}}"></image>

<text

class="motto">{{motto}}</text>

<view

catchtap="hanldTap"

id="postId"data-info1="Weixin"data-info2="java"class="journey-container">

<text

class="journey"catchtap="hanldTapInner">开启小程序之旅</text>

</view></view>注意：在使用非冒泡方式，点击子节点，子节点收到事件对象target和currentTarget都是子节点微信小程序路由-基本概念在小程序中在小程序中所有页面的路由全部由框架进行管理。框架以栈的形式维护了当前的所有页面，在微信小程序中API如下：wx.navigateTo(Objectobject)保留当前页面，跳转到应用内的某个页面。但是不能跳到tabbar页面。使用

wx.navigateBack

可以返回到原页面。小程序中页面栈最多十层。wx.navigateBack(Objectobject)关闭当前页面，返回上一页面或多级页面。可通过

getCurrentPages

获取当前的页面栈，决定需要返回几层。wx.redirectTo(Objectobject)关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到tabbar页面。wx.switchTab(Objectobject)跳转到tabBar页面，并关闭其他所有非tabBar页面。wx.reLaunch(Objectobject)关闭所有页面，打开到应用内的某个页面。微信小程序路由-wx.navigateTo使用示例<view

class="container">

<image

class="avatar"src="{{avatar}}"></image>

<text

class="motto">{{motto}}</text>

<view

catchtap="goToPostPage"

class="journey-container">

<text

class="journey">开启小程序之旅</text>

</view>

</view>页面绑定页面跳转函数

//处理页面跳转函数

goToPostPage:function(event){

wx.navigateTo({url:

'../posts/posts',

success:function(){

console.log("gotoPostSuccess