原生微信小程序砸金蛋奖程序代码分析
我们在做微信小程序开发的时候,经常会遇到开发营销工具。这次我们来看下 常用的营销工具--砸金蛋的开发逻辑。
效果如下:
核心代码如下:
// 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() { } })
仅原生微信小程序的前端代码下载地址如下:
作者:沐雪
文章均系作者原创或翻译,如有错误不妥之处,欢迎各位批评指正。本文版权归作者和博客园共有,如需转载恳请注明。
如果您觉得阅读这篇博客让你有所收获,请点击右下方【推荐】
为之网-热爱软件编程 http://www.weizhi.cc/