论过年如何正确的要红包^_^

“ PK创意闹新春，我正在参加「春节创意投稿大赛」，详情请看：春节创意投稿大赛”

值此新春佳节之际，给大家拜年是必不可少的，当然红包也是不能少的啦哈哈，闲来无事准备搞一个拜年的小程序顺便收一下新年红包哈哈哈。

1.准备工作

• 微信公众平台注册小程序
• 下载微信开发者工具
• 熟悉一下小程序开发文档 以上准备好之后我们就可以开始着手开发我们的拜年小程序啦。

2.创建项目

我们的实现思路是，有一张新年祝福的背景图片，然后加一段新年祝福的背景音乐，最后再加一点小技巧来讨要红包，废话不多说上代码~

// index.wxml

<view class="content" style="{{'background-image:'+('url('+imageURL+')')+';height:100vh;'}}">
    <text class="title">恭喜发财，红包拿来~</text>
    <view class="operate">
        <button class="btn" type="primary" bindtap="sayYes">
            好呀
        </button>
        <button class="btn" type="warn"  bindtap="sayNo">
            不好
        </button>
    </view>
</view>

// index.js

Page({
    data: {
      imageURL: "../../static/22.jpg",
    },
    onLoad: function(options) {
      // 页面创建时执行
      const innerAudioContext = wx.createInnerAudioContext();

      innerAudioContext.autoplay = true;
      innerAudioContext.src = 'http://music.163.com/song/media/outer/url?id=504624714.mp3';
      innerAudioContext.loop = true;
      innerAudioContext.play();
    },
    onShow: function() {
      // 页面出现在前台时执行
    },
    onReady: function() {
      // 页面首次渲染完毕时执行
    },
    onHide: function() {
      // 页面从前台变为后台时执行
    },
    onUnload: function() {
      // 页面销毁时执行
    },
    onPullDownRefresh: function() {
      // 触发下拉刷新时执行
    },
    onReachBottom: function() {
      // 页面触底时执行
    },
    onShareAppMessage: function () {
      // 页面被用户分享时执行
    },
    onPageScroll: function() {
      // 页面滚动时执行
    },
    onResize: function() {
      // 页面尺寸变化时执行
    },
    sayYes() {
      wx.showToast({
        title: '说好了哦~',
        icon: 'none',
        duration: 2000
      })
    },
    sayNo() {
      const vm = this;
      wx.showModal({
        title: '是不是手滑了呀！',
        content: '这里不能点击，快换个位置:)',
        cancelText:"拒绝",
        confirmText:"同意",
        success(res) {
          if (res.confirm) {
            wx.showToast({
              title: '说好了哦~',
              icon: 'none',
              duration: 2000
            })
          } else if (res.cancel) {
            vm.sayNo();
          }
        }
      })
    },
    // 事件响应函数
    viewTap: function() {
      this.setData({
        text: 'Set some data for updating view.'
      }, function() {
        // this is setData callback
      })
    },
    // 自由数据
    customData: {
      hi: 'MINA'
    }
  })

// index.wxss

.content {
  padding: 0 40rpx;
  background-size:100% 100%;
    -moz-background-size:100% 100%;
}
.content image {
  width: 100%;
}
.content .title {
  display: block;
  text-align: center;
  font-weight: bold;
  font-size: 50rpx;
  color: red;
  padding-top: 37vh;
}
.content .operate {
  text-align: center;
  margin-top: 30rpx;
  margin-bottom: 30rpx;
}
.content .operate .btn {
  width: 200rpx;
  height: 100rpx;
  display: inline-block;
}
.content .operate .btn:first-of-type {
  margin-right: 40rpx;
}
.content .bottomContent {
  position: relative;
  top: 100rpx;
}
.content .message {
  font-size: 34rpx;
  margin: 15rpx 0rpx;
  color: orchid;
  margin-top: 35rpx;
  text-align: center;
}

以上就是整体实现的大致代码了。

3.项目预览

在点拒绝的时候弹窗是永远都不会关闭的，只有点击了同意之后弹窗才会关闭，并且提示我们说好了哦，新年红包这不就要到了嘛~