1.8 丰富文章页面

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