掃一掃以上小程序【許愿燈池】可以查看具體隨機(jī)抽簽功能

效果圖：

具體思路：

①為了讓每個(gè)用戶抽的簽都不一樣，并且能夠進(jìn)行記錄，又為了防止我們的云開(kāi)發(fā)數(shù)據(jù)庫(kù)占用過(guò)多，因此我們決定使用微信緩存技術(shù)

②為了實(shí)現(xiàn)每日抽簽，我們還對(duì)時(shí)間進(jìn)行了緩存，用if語(yǔ)句對(duì)時(shí)間進(jìn)行判斷，如果是通過(guò)一天那么無(wú)法關(guān)閉，如果時(shí)間不相同，則可以繼續(xù)抽簽

③我們還實(shí)現(xiàn)了分享的功能，調(diào)用了微信的分享接口

④在抽取過(guò)程中，采取了數(shù)組的形式，將圖片的鏈接保存在數(shù)組當(dāng)中，再利用js的Math.random進(jìn)行隨機(jī)數(shù)選擇，因?yàn)檫@里是12張圖片因此我們的隨機(jī)數(shù)首先要取整，其次是0-11，因?yàn)閿?shù)組的下標(biāo)是從0開(kāi)始的。

接下來(lái)開(kāi)始我們（關(guān)鍵）的代碼分享環(huán)節(jié)：

index.wxml

<view id="products" style="{{display}}"><image src="（這里放入自己的圖片鏈接）"/><image src="（這里放入自己的圖片鏈接）"/><image src="（這里放入自己的圖片鏈接）"></image><image src="（這里放入自己的圖片鏈接）"></image><image src="（這里放入自己的圖片鏈接）"></image><image src="（這里放入自己的圖片鏈接）"></image><image src="（這里放入自己的圖片鏈接）"></image><image src="（這里放入自己的圖片鏈接）"></image><image src="（這里放入自己的圖片鏈接）"></image><image src="（這里放入自己的圖片鏈接）"></image><image src="（這里放入自己的圖片鏈接）"></image><image src="（這里放入自己的圖片鏈接）"></image> </view> <!-- 以上image標(biāo)簽中的src屬性換上自己的圖片鏈接 --><view class="line1" wx:if="{{!isshow}}"></view> <view class="line2" wx:if="{{!isshow}}"></view> <view class="line3" wx:if="{{!isshow}}"></view> <view class="line4" wx:if="{{!isshow}}"></view><button class="select" bindtap="select" wx:if="{{!isshow}}">今日運(yùn)勢(shì)</button> <!-- 點(diǎn)擊即可進(jìn)行抽簽--><view class="chuangkou" wx:if="{{isshow}}"><image src="{{img}}"></image><view class="iconfont icon-guanbi" bindtap="icon"></view> </view> <!-- 制作關(guān)閉按鈕--><button bindtap="share" open-type="share" wx:if="{{isshow}}" class="share">一鍵分享</button> <!-- 可對(duì)當(dāng)前頁(yè)面進(jìn)行分享--><view class="all"><view wx:if="{{num2=='0'}}">"（這里輸入抽簽后彈出的文本內(nèi)容）"</view> <view wx:if="{{num2=='1'}}">"（這里輸入抽簽后彈出的文本內(nèi)容）"</view> <view wx:if="{{num2=='2'}}">"（這里輸入抽簽后彈出的文本內(nèi)容）"</view> <view wx:if="{{num2=='3'}}">"（這里輸入抽簽后彈出的文本內(nèi)容）"</view> <view wx:if="{{num2=='4'}}">"（這里輸入抽簽后彈出的文本內(nèi)容）"</view> <view wx:if="{{num2=='5'}}">"（這里輸入抽簽后彈出的文本內(nèi)容）"</view> <view wx:if="{{num2=='6'}}">"（這里輸入抽簽后彈出的文本內(nèi)容）"</view> <view wx:if="{{num2=='7'}}">"（這里輸入抽簽后彈出的文本內(nèi)容）"</view> <view wx:if="{{num2=='8'}}">"（這里輸入抽簽后彈出的文本內(nèi)容）"</view> <view wx:if="{{num2=='9'}}" class="best">"（這里輸入抽簽后彈出的文本內(nèi)容）"</view> <view wx:if="{{num2=='10'}}">"（這里輸入抽簽后彈出的文本內(nèi)容）"</view> <view wx:if="{{num2=='11'}}">"（這里輸入抽簽后彈出的文本內(nèi)容）"</view></view> <view wx:if="{{num2!=''}}" class="txt">(明天再來(lái)占卜哦~~)</view>

index.wxss

@font-face {font-family: "iconfont"; src: url('http://at.alicdn.com/t/font_3280929_gn8or8nznke.woff2?t=1648823754446') format('woff2'),url('http://at.alicdn.com/t/font_3280929_gn8or8nznke.woff?t=1648823754446') format('woff'),url('htpp://at.alicdn.com/t/font_3280929_gn8or8nznke.ttf?t=1648823754446') format('truetype'); } /* 以上這里是關(guān)閉按鈕，我們引入了阿里巴巴矢量庫(kù) */.iconfont {font-family: "iconfont" !important;font-size: 35px;font-style: normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale; }.icon-guanbi:before {content: "\e600"; }.icon-shouhuodizhi:before {content: "\e64e"; }.icon-2lianxikefu:before {content: "\e603"; }.icon-qiandao:before {content: "\e641"; }.icon-wodebiaoqian:before {content: "\e759"; }.icon-youjiantou:before {content: "\e642"; }.icon-tongzhizhongxin:before {content: "\eb43"; }.icon-zhuxiaodenglu:before {content: "\e617"; }.icon-wodeyuanwang:before {content: "\e609"; }.icon-essential-information:before {content: "\e612"; } .icon-guanbi{position: relative;left: 45%;top: 48%; } .icon-guanbi{position: relative;left: 35%;top: 13%;color: white; }#products image:nth-child(1){position: relative;left: 6%;margin-top: 40rpx;width: 185rpx;height: 231rpx;border-radius: 20px 20px 20px 20px; } #products image:nth-child(2){position: relative;left: 10%;margin-top: 40rpx;width: 185rpx;height: 231rpx;border-radius: 20px 20px 20px 20px; } #products image:nth-child(3){position: relative;left: 16%;margin-top: 40rpx;width: 185rpx;height: 231rpx;border-radius: 20px 20px 20px 20px; } #products image:nth-child(4){position: relative;left: -68%;margin-top: 40rpx;width: 185rpx;height: 231rpx;top: 280rpx;border-radius: 20px 20px 20px 20px; } #products image:nth-child(5){position: relative;left: 35%;margin-top: 22rpx;width: 185rpx;height: 231rpx;top: 28rpx;border-radius: 20px 20px 20px 20px; } #products image:nth-child(6){position: relative;left: 41%;margin-top: 22rpx;width: 185rpx;height: 231rpx;top: 28rpx;border-radius: 20px 20px 20px 20px; } #products image:nth-child(7){position: relative;left: -43%;margin-top: 22rpx;width: 185rpx;height: 231rpx;top: 295rpx;border-radius: 20px 20px 20px 20px; } #products image:nth-child(8){position: relative;left: -39%;margin-top: 22rpx;width: 185rpx;height: 231rpx;top: 295rpx;border-radius: 20px 20px 20px 20px; } #products image:nth-child(9){position: relative;left: 66%;margin-top: 22rpx;width: 185rpx;height: 231rpx;top: 37rpx;border-radius: 20px 20px 20px 20px; } #products image:nth-child(10){position: relative;left: -19%;margin-top: 22rpx;width: 185rpx;height: 231rpx;top: 310rpx;border-radius: 20px 20px 20px 20px; } #products image:nth-child(11){position: relative;left: 17%;margin-top: 22rpx;width: 185rpx;height: 231rpx;top: 310rpx;border-radius: 20px 20px 20px 20px; } #products image:nth-child(12){position: relative;left: -39%;margin-top: 22rpx;width: 185rpx;height: 231rpx;top: 310rpx;border-radius: 20px 20px 20px 20px; }.line1{position: relative;width: 92%;height: 20rpx;border-radius: 20px 20px 20px 20px;background-color: white;left: 4%;margin-top: -68%; } .line2{position: relative;width: 92%;height: 20rpx;border-radius: 20px 20px 20px 20px;background-color: white;left: 4%;margin-top: 34%; } .line3{position: relative;width: 92%;height: 20rpx;border-radius: 20px 20px 20px 20px;background-color: white;left: 4%;margin-top: 34%; } .line4{position: relative;width: 92%;height: 20rpx;border-radius: 20px 20px 20px 20px;background-color: white;left: 4%;margin-top: 36%; } .select{position: absolute;top: 90%;left: 28%;border-radius: 20px 20px 20px 20px;color: white;background-color: #FF7F00;font-size: 40rpx; } .chuangkou{position: absolute;width: 255rpx;height: 290rpx;top: 32%;left: 34%;background-color: rgba(243, 235, 235,.7);border-radius: 20px 20px 20px 20px; } .chuangkou image{position: relative;left: -30%;top: -30%;width: 385rpx;height: 500rpx;border-radius: 20px 20px 20px 20px;box-shadow: 10px 10px 25px #FF7F00; } .share{position: absolute;top: 90%;left: 28%;border-radius: 20px 20px 20px 20px;color: white;background-color: #FF7F00;font-size: 40rpx; }.all view:not(:nth-child(10)){position: relative;margin-top: 25%;left: 14%;font-size: 40rpx;font-weight: 1000;color: rgb(250, 34, 34); } .best{position: relative;margin-top: 25%;left: 1%;font-size: 40rpx;font-weight: 1000;color: rgb(250, 34, 34); } .txt{position: relative;left: 31%;top: 4%;color: red; }

index.js

var now = new Date().getDate() var num = Math.ceil(Math.random()*11) var m = wx.getStorageSync('today')Page({/*** 頁(yè)面的初始數(shù)據(jù)*/data: {imgarr:['(你的圖片連接)'，'(你的圖片連接)'，'(你的圖片連接)'，'(你的圖片連接)'，'(你的圖片連接)'，'(你的圖片連接)'，'(你的圖片連接)'，'(你的圖片連接)'，'(你的圖片連接)'，'(你的圖片連接)'，'(你的圖片連接)'，'(你的圖片連接)'],//這里引入你的圖片鏈接，要對(duì)應(yīng)好你的文本內(nèi)容，否則會(huì)出現(xiàn)亂套img:'',isshow:0,shareimg:'',all:['0','1','2','3','4','5','6','7','8','9','10','11'],num2:''},select(){ var m = wx.getStorageSync('today')var now = new Date().getDate()if(now!=m || m == ''){ this.setData({img:this.data.imgarr[num],isshow:1,shareimg:this.data.imgarr[num],num2:this.data.all[num]})if(this.data.isshow){this.setData({display:'display:none'})wx.setStorageSync('img', this.data.imgarr[num])wx.setStorageSync('text', this.data.all[num])wx.setStorageSync('today', new Date().getDate()) } }},icon(){ var m = wx.getStorageSync('today')var now = new Date().getDate()if(now!=m){this.setData({isshow:0,display:'display:block',num2:''})}if(now===m){wx.showToast({title: '請(qǐng)明天再來(lái)哦~',icon:'error',duration:2000})}},/*** 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載*/onLoad: function (options) {var m = wx.getStorageSync('today')var now = new Date().getDate()var img = wx.getStorageSync('img')var text = wx.getStorageSync('text') // 利用緩存將此時(shí)的時(shí)間進(jìn)行記錄// 對(duì)時(shí)間進(jìn)行判斷，如果時(shí)間不同才可以繼續(xù)抽簽if(now===m){this.setData({img:img,isshow:1,shareimg:img,num2:this.data.all[text]})if(this.data.isshow){this.setData({display:'display:none'})}}},/*** 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面顯示*/onShow: function () {var m = wx.getStorageSync('today')var now = new Date().getDate()var img = wx.getStorageSync('img')var text = wx.getStorageSync('text')if(now===m){this.setData({img:img,isshow:1,shareimg:img,num2:this.data.all[text]})if(this.data.isshow){this.setData({display:'display:none'})}}},/*** 用戶點(diǎn)擊右上角分享*/ // 用戶點(diǎn)擊按鈕即可分享onShareAppMessage: function () {var that = this;var img=that.data.imgif (res.from === 'button') { return {title: '今日運(yùn)勢(shì)',path: '/pages/index/index',imageUrl:img}} } })

總結(jié)：通過(guò)以上代碼可以搭建出和【許愿燈池】一樣的隨機(jī)抽簽小程序，所以如果想知道具體的效果，可以微信搜一搜【許愿燈池】或是二維碼掃描：

?

總結(jié)

以上是生活随笔為你收集整理的微信小程序实现随机抽签功能的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。