微信小程序实现随机抽签功能

最新推荐文章于 2024-04-28 19:13:54 发布

JaneZJW

最新推荐文章于 2024-04-28 19:13:54 发布

阅读量2.5w

点赞数 2

分类专栏：微信小程序开发文章标签： javascript css html5 css3 小程序

本文链接：https://blog.csdn.net/JaneZJW/article/details/123953690

版权

微信小程序开发专栏收录该内容

9 篇文章 5 订阅

订阅专栏

扫一扫以上小程序【许愿灯池】可以查看具体随机抽签功能

效果图：

具体思路：

①为了让每个用户抽的签都不一样，并且能够进行记录，又为了防止我们的云开发数据库占用过多，因此我们决定使用微信缓存技术

②为了实现每日抽签，我们还对时间进行了缓存，用if语句对时间进行判断，如果是通过一天那么无法关闭，如果时间不相同，则可以继续抽签

③我们还实现了分享的功能，调用了微信的分享接口

④在抽取过程中，采取了数组的形式，将图片的链接保存在数组当中，再利用js的Math.random进行随机数选择，因为这里是12张图片因此我们的随机数首先要取整，其次是0-11，因为数组的下标是从0开始的。

接下来开始我们（关键）的代码分享环节：

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标签中的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}}">今日运势</button>
<!-- 点击即可进行抽签-->

<view class="chuangkou" wx:if="{{isshow}}">
    <image src="{{img}}"></image>
    <view class="iconfont icon-guanbi" bindtap="icon"></view>
</view>
<!-- 制作关闭按钮-->


<button bindtap="share" open-type="share" wx:if="{{isshow}}" class="share">一键分享</button>
<!-- 可对当前页面进行分享-->

<view class="all">

<view wx:if="{{num2=='0'}}">"（这里输入抽签后弹出的文本内容）"</view>
<view wx:if="{{num2=='1'}}">"（这里输入抽签后弹出的文本内容）"</view>
<view wx:if="{{num2=='2'}}">"（这里输入抽签后弹出的文本内容）"</view>
<view wx:if="{{num2=='3'}}">"（这里输入抽签后弹出的文本内容）"</view>
<view wx:if="{{num2=='4'}}">"（这里输入抽签后弹出的文本内容）"</view>
<view wx:if="{{num2=='5'}}">"（这里输入抽签后弹出的文本内容）"</view>
<view wx:if="{{num2=='6'}}">"（这里输入抽签后弹出的文本内容）"</view>
<view wx:if="{{num2=='7'}}">"（这里输入抽签后弹出的文本内容）"</view>
<view wx:if="{{num2=='8'}}">"（这里输入抽签后弹出的文本内容）"</view>
<view wx:if="{{num2=='9'}}" class="best">"（这里输入抽签后弹出的文本内容）"</view>
<view wx:if="{{num2=='10'}}">"（这里输入抽签后弹出的文本内容）"</view>
<view wx:if="{{num2=='11'}}">"（这里输入抽签后弹出的文本内容）"</view>

</view>
<view wx:if="{{num2!=''}}" class="txt">(明天再来占卜哦~~)</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');
}
/* 以上这里是关闭按钮，我们引入了阿里巴巴矢量库 */

.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({

  /**
   * 页面的初始数据
   */
  data: {
    imgarr:['(你的图片连接)'，'(你的图片连接)'，'(你的图片连接)'，'(你的图片连接)'，'(你的图片连接)'，'(你的图片连接)'，'(你的图片连接)'，'(你的图片连接)'，'(你的图片连接)'，'(你的图片连接)'，'(你的图片连接)'，'(你的图片连接)'],

//这里引入你的图片链接，要对应好你的文本内容，否则会出现乱套

    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: '请明天再来哦~',
        icon:'error',
        duration:2000
      })
    }
  },
  
  
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    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'
        })
    }
  }
  },
  /**
   * 生命周期函数--监听页面显示
   */
  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'
        })
    }
  }
  },
  /**
   * 用户点击右上角分享
   */
// 用户点击按钮即可分享
  onShareAppMessage: function () {
    var that = this;
    var img=that.data.img
    if (res.from === 'button') {   
        return {
          title: '今日运势',
          path: '/pages/index/index',
          imageUrl:img
        }
      }   
  }
})

总结：通过以上代码可以搭建出和【许愿灯池】一样的随机抽签小程序，所以如果想知道具体的效果，可以微信搜一搜【许愿灯池】或是二维码扫描：