【微信小程序-初级实战】弹出海报/广告效果实现_微信小程序弹出海报广告

• 标题又名：animation的简单应用

• 使用原生开发工具实现。

• 效果：如下图，大同小异。

• 分解：透明灰色背景+内容图片+操作的按钮（&动作）
  

• 实现：
  1.先明确弹窗出现的条件（比如，是在用户首次登录时出现，还是在用户未登录时出现）通过控制display的值来控制弹窗的出现与否。
  2.弹窗的信息主体与弹窗效果确认（一般来说，信息主体的图片由美工提供，弹窗效果由产品经理确认，自己开发就无所谓了~）信息主体的位置通过css里的position固定，动画效果使用animation实现。
  3.点击效果（如关闭或跳转）在相应的图标上操作实现。也可以使用定时器制作停留x秒后自动关闭的效果。

• 简单的例子：

<!--wxml-->
<view class="postpic_box" style="display: {{showpostpic}};" animation="{{move_postpic}}">
<image src="主体图片地址" class="postpic"  bindtap="gotoxxx"></image>
<image src="关闭图标地址" class="postpic_cancel" bindtap="cancel"></image>
</view>
1
2
3
4
5

  data: {
    move_postpic: {},
  },
onLoad(options) { 
   this.setData({
   showpostpic: 'block'
   })
   this.move_postpic()
},
// 海报效果
  move_postpic() {
    this.move_postpic = wx.createAnimation({
      duration: 1000,
    })
    this.move_postpic.scale(1.1).step()
    this.setData({
      move_postpic: this.move_postpic.export()
    })
  },
  //点击+关闭海报
  gotoxxx() {
    wx.navigateTo({
      url: '../xxx/xxx',
    })
    setTimeout(() => {
      this.setData({
        showpostpic: 'none'
      })
    }, 300);
  },
  //关闭海报
  cancel() {
    this.setData({
      showpostpic: 'none'
    })
  },

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

参考：
微信小程序动画的使用-基础原理，创建动画与使用