1、将页面分享给朋友和微信群
小程序有一个按钮可以作为分享使用
image.png
使用到方法是页面方法：onShareAppMessage(options)
image.png
image.png
如果没设置分享就会如下所示：
image.png
1.1 定义页面分享函数
post-detail.js
onShareAppMessage:function(){
return{
title:this.postData.title,
desc:this.postData.content,
path:"/pages/post/post-detail/post-detail"
}
}
image.png
image.png
需要特别注意的是：
分享图片是不能自定义的，MINA框架会将当前页面从顶部开始、高度为80%屏幕宽度的图像作为分享图片
2、从swiper组件跳转到文章详情页面
2.1 设置swiper-item元素的文章id号
post.wxml
image.png
按照一般的思路，跳转到文章详情页面需要在每个swiper-item组件上都注册一个tap事件，从而保证点击每一张图片都可以响应该事件。这样是可以，但是如果一个swiper组件有十几个元素呢？一个个去绑定太麻烦了。
这里使用之前我们说道的冒泡事件，不在每个swiper-itemd image上注册事件，而只是在swiper上注册一个onSwiperTap事件。无论点击哪个swiper-item的image，点击事件都将通过冒泡机制传递到swiper-item的父节点swiper上。
2.2 编写onSwiper函数
post.js
image.png
image.png
image.png
3、使用小程序动画实现点赞特效
MINA框架提供了一组动画API
学习小程序的动画，首先要明白下面几个概念：
-
动画实例
使用小程序动画之前必须先创建一个动画实例，创建动画实例的方法为：wx.createAnimation(OBJECT)
image.png
image.png
-
动画组
当使用上面的方法创建一个动画实例animation后，可以对这个实例设置多个动画组 -
动画方法
每个动画组中会有若干个动画方法 -
动画队列
组与组之间使用step()方法来分隔，多个组形成一个链式的调用队列，这个链式队列就是我们所说的动画队列
3.1 动画演示代码
//创建一个动画实例
var animation = wx.createAnimation({
timingFunction:'ease-in-out'
})
//设置动画组（以step（）分隔），每个队列
animation.scale(2,2).rotate(45).step().translate(30).step()
需要注意的是：
1）同一组中的动画方法会同时执行，但动画组必须是先后执行的
2）可以在不同的动画组中设置不同的动画效果参数
3.2 step接受动画配置
//创建一个动画实例
var animation = wx.createAnimation({
timingFunction:'ease-in-out'
})
//设置动画组（以step（）分隔），每个队列
animation.scale(2,2).rotate(45).step().translate(30).step({duration:1000})
小程序提供了6类动画方法：
1）样式
2）旋转
3）缩放
4）偏移
5）倾斜
6）矩阵变形
3.3 创建animation实例
post-detail.js
setAniation:function(){
//定义动画
var animationUp = wx.createAnimation({
timingFunction:'ease-in-out'
})
this.animationUp = animationUp;
}
3.4 调用setAnimation方法
post-detail.js
image.png
3.5 设置动画方法并且使用动画
post-detail.js
image.png
注意的是，当调用动画实例animatinUp的export方法后，animationUp上所设置的动画方法将被清空
3.6 绑定动画
post-detail.wxml
image.png
image.png
网友评论