原生微信小程序砸金蛋奖程序代码分析

我们在做微信小程序开发的时候，经常会遇到开发营销工具。这次我们来看下 常用的营销工具--砸金蛋的开发逻辑。

效果如下：

 

核心代码如下：

// page/egg.js
const util = require('../../utils/util.js');
var WxParse = require('../../wxParse/wxParse.js');
var app = getApp()
Page({

  /**
   * 页面的初始数据
   */
  data: {
    eggtwo: false,
    urlPre: '../../images',

    setvertical: true,
    setautoplay: true,
    setcircular: true,
    setinterval: 1500,
    duration: 500,
    setdisplaymultipleitems: 4,
    previousMargin: 0,
    nextMargin: 0,

    maskshow: 'not',
    przie: {
      Draw_Num: 3
    },
    eggclickYes: true
  },
  eggclick: function(e){
    if (this.data.eggclickYes == true) {
      this.eggData()
      this.eggResult()
    }
  },
  clickMaskHide: function () {
    this.setData({
      eggtwo: false,
      maskshow: 'not'
    })
  },
  eggData: function () {
    var that = this;
    var data = {
      Api_Type: app.globalData.api_active_eggMsg,
      Member_Id: wx.getStorageSync('MemberId'),
      Member_Token: wx.getStorageSync('token'),
      Activity_Id: 1
    };
    that.setData({
      
      przie: {
        Draw_Num: 3,
        Draw_Log:[
        {Member_Name:'孙悟空',Prize_Title:'金箍棒',Receive_Time:'2019-11-2'},
        {Member_Name:'猪八戒',Prize_Title:'钉耙',Receive_Time:'2019-11-2'},
        {Member_Name:'唐玄宗',Prize_Title:'500积分',Receive_Time:'2019-11-2'},
        {Member_Name:'通天教主',Prize_Title:'八卦',Receive_Time:'2019-11-2'},
        {Member_Name:'牛魔王',Prize_Title:'避水金晶兽',Receive_Time:'2019-11-2'},
        {Member_Name:'铁扇公主',Prize_Title:'芭蕉扇',Receive_Time:'2019-11-2'},
        {Member_Name:'红孩',Prize_Title:'三昧真火',Receive_Time:'2019-11-2'},
        {Member_Name:'蹦波霸',Prize_Title:'金刚钻',Receive_Time:'2019-11-2'},
        {Member_Name:'金蝉子',Prize_Title:'袈裟',Receive_Time:'2019-11-2'},
        {Member_Name:'老乌龟',Prize_Title:'500积分',Receive_Time:'2019-11-2'},
        ]}


    });
  
  },
  eggResult: function () {
    var _this = this
    var data = {
      Api_Type: app.globalData.api_active_eggResult,
      Member_Id: wx.getStorageSync('MemberId'),
      Member_Token: wx.getStorageSync('token'),
      Activity_Id: 1
    };
    
    this.setData({
      eggclickYes: false
    })
    //网络请求
    //util.request('https://xxxx.com/api/xxx', 'POST', data).then((res) => {
if(true)
      _this.setData({
        eggclickYes: true
      })
      if (false) {
        _this.setData({
          eggtwo: false,
        })
        app.showModal(res.Message_Is_Show, "提示", res.Message, false);
      } else {
        _this.setData({
          eggtwo: true,
          maskData:{Prize_Txt:'您中了500积分',Prize_Pic:'../../images/dzp/icon_jifen2@3x.png',Is_Show_Link:false} 
        })
        
        setTimeout(function () {
          _this.setData({
            maskshow: 'yes'
          })
        }, 300)
      }
    //})
  },
  tohome: function (e) {
    wx.reLaunch({
      url: "/pages/index/index"
    })
  },
  initPlateData() {
    var that = this;
    var data = {
      Api_Type: app.globalData.api_dzp_info,
      Activity_Id: 1,
      Member_Id: wx.getStorageSync('MemberId'),
      Member_Token: wx.getStorageSync('token')
    };
    util.request(app.globalData.api_site, 'POST', data).then((res) => {
      if (res.Status != 0) {
        app.showModal(res.Message_Is_Show, "提示", res.Message, false);
      } else {
        that.setData({
          xhjf: res.Data.xhjf,
        });
      }
    });
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) { 
    this.eggData()
     
    // this.initPlateData()
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function() {
    this.onLoad()
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function() {

  }
})

仅原生微信小程序的前端代码下载地址如下：

https://www.huzhan.com/code/goods372934.html