原生微信小程序砸金蛋獎程序代碼分析

我們在做微信小程序開發的時候，經常會遇到開發營銷工具。這次我們來看下 常用的營銷工具--砸金蛋的開發邏輯。

效果如下：

 

核心代碼如下：

// 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/[e-mail]',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