微信刷题小程序开发学习笔记

系列文章目录

提示：小白学小程序开发

提示：根据自己所学记录笔记

文章目录

系列文章目录前言一、环境搭建

1. AppID(小程序ID)2. 小程序配置：[看开发文档](https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html)3 app.json全局配置：可以实现两个page之间跳转4. 组件

1，text：编写文本信息，类似于span标签2，view：容器，类似于div标签3，image：图片 5 .使用colorUI组件界面开发

（1）[官方文档](https://www.kancloud.cn/m22543/colorui/1289230)下载源代码复制 "main.wxss"和 "icon.wxss"到所开发页面之下（2）index.wxss文件下导入组件（3）二小程序基本功能搭建1，小程序页面倒计时2.答题小程序基本页面

单选题页面多选题页面单选题单选题错题本总结

前言

提示：本文会记录的大概内容：
随着计算机科学的发展，技术也越来越重要，很多人都开启了微信小程序开发学习，本文就记录了微信小程序开发的基础内容。

提示：以下是本篇文章正文内容，下面案例可供参考

一、环境搭建 1. AppID(小程序ID)

wx1345fd429befea6b

2. 小程序配置：看开发文档 3 app.json全局配置：可以实现两个page之间跳转

{
 "pages": ["pages/index/index", "pages/home/home"],
 "window": {
   "navigationBarBackgroundColor": "#ffdab9",
   "navigationBarTitleText": "微信接口功能演示"
 },
 "tabBar": {
   "list": [
     {
       "pagePath": "pages/index/index",
       "text": "首页"
     },
     {
       "pagePath": "pages/home/home",
       "text": "我的"
     }
   ]
 }
}

4. 组件 1，text：编写文本信息，类似于span标签 2，view：容器，类似于div标签 3，image：图片 5 .使用colorUI组件界面开发（1）官方文档下载源代码复制 "main.wxss"和 "icon.wxss"到所开发页面之下（2）index.wxss文件下导入组件

@import "main.wxss";
@import "icon.wxss";

（3）二小程序基本功能搭建 1，小程序页面倒计时

.wxml配置


    距结束
    {{djs.day}}
    天
    {{djs.hour}}
    时
    {{djs.min}}
    分
    {{djs.sec}}
    秒

.wxss

.djs{
  border-top:1rpx solid #F6F6F6;
  background:#fff;
  margin-top:20rpx;
  padding:10rpx 30rpx;
  box-sizing: border-box;
  display:flex;
  width:100%;
  align-items:center;
  font-size:26rpx;
  flex-direction:row;
  justify-content:center;
}
.djs_title{
  color:#3DCC37;
  padding-right:10rpx;
}
.time{
  color:#fff;
  background:#3DCC37;
  border-radius:4rpx;
  padding:6rpx;
  min-width:40rpx;
  text-align:center;
}
.time_text{
  color:#3DCC37;
  padding:0 6rpx;
}

.js文件配置

// index.js
// 获取应用实例
Page({
  data: {

      jssj:'2022-12-23 23:59:59',  //结束时间
      timer:'', //倒计时定时器名称
      djs:{day:'00',hour:'00',min:'00',sec:'00'}, //倒计时
  },

  onLoad: function (options) {
    let that = this;
    that.timeDown();
  },
  timeDown(){
    let that = this;
    that.setData({
      timer:setInterval(function(){
        var leftTime = parseInt((new Date(that.data.jssj.replace(/-/g,'/')).getTime()-new Date().getTime()));
        if(leftTime<=0){
          that.setData({
            djs:{day:'00',hour:'00',min:'00',sec:'00'}
          });
          // wx.showToast({
          //   title: '活动已结束',
          // });
          clearInterval(that.data.timer);
          return;
        }
        var d = parseInt(leftTime/1000/3600/24);  //天数
        var h = parseInt(leftTime/1000/3600%24);  //小时
        var m = parseInt(leftTime/1000/60%60);    //分钟
        var s = parseInt(leftTime/1000%60);       //秒
        d < 10 ? d = '0' + d : d;
        h < 10 ? h = '0' + h : h;
        m < 10 ? m = '0' + m : m;
        s < 10 ? s = '0' + s : s;
        that.setData({
          djs:{day:d,hour:h,min:m,sec:s}
        })
      },1000)
    })
  },
})

运行界面

2.答题小程序基本页面单选题页面

wxml页面

题目：这门课的老师是谁？

  
    
    A:编程小石头
  
  
    
    B:疯狂小石头
  
  
    
    C:大石头
  
  
    
    D:石头王

.js页面页面

Page({
  data: {
    right: 'A',
    select: ''
  },
  //用户选择了选项
  radioChange(e) {
    let select = e.detail.value
    console.log('用户选择了', select)
    this.setData({
      select: select
    })
  },
  //提交答题
  submit() {
    console.log('正确答案是', this.data.right)
    console.log('用户选择了', this.data.select)


    //当数据为空字符串或者null的时候，我们对这个数据取反
    if (!this.data.select) {
      console.log('执行了if')
      wx.showToast({
        icon: 'none',
        title: '你还没有选择呢',
      })
    } else if (this.data.right == this.data.select) {
      wx.showToast({
        title: '您答对啦',
      })
    } else {
      wx.showToast({
        icon: 'none',
        title: '您答错啦',
      })
    }
  }
})

多选题页面

.wxml页面

题目：这门课的老师是谁？

  
    
    A:编程小石头
  
  
    
    B:疯狂小石头
  
  
    
    C:大石头
  
  
    
    D:邱石

.js文件

Page({

  data: {
    right: ['A', 'D'],
    select: []
  },
  //获取用户选择了哪些选项
  checkboxChange(e) {
    console.log(e.detail.value)
    this.setData({
      select: e.detail.value
    })
  },
  //提交
  submit() {

    //规则一，全部答对才对，打错一个即为错误
    let arr = this.data.right
    let len = arr.length //正确答案的个数

    let arr2 = this.data.select
    let len2 = arr2.length
    console.log('正确答案', arr)
    console.log('用户选择的答案', arr2)
    if (len == len2) { //1，判断个数是否相同
      console.log('用户答题得个数和正确选项得个数相同')
      let rigthNum = 0
      arr2.forEach(item => {
        if (arr.indexOf(item) > -1) {
          rigthNum++
          console.log(item, '是正确选项')
        }
      })
      //2，计算答对的个数
      console.log('答对的个数', rigthNum)
      //3，判断答对的个数是否等于答案的个数
      if (rigthNum == len) {
        console.log('闯关成功，彻底答对啦')
        wx.showToast({
          title: '答对啦',
        })
      } else {
        console.log('答题失败')
        wx.showToast({
          icon: 'none',
          title: '答错啦',
        })
      }
    } else {
      console.log('错误，选项个数不对')
      wx.showToast({
        icon: 'none',
        title: '答错啦',
      })
    }
  },
  
  guize2() {
    let arr = this.data.right
    let len = arr.length //正确答案的个数

    let arr2 = this.data.select
    let len2 = arr2.length
    console.log('正确答案', arr)
    console.log('用户选择的答案', arr2)
    //第一关：答题的个数必须小于等于正确答案的个数
    if (len2 <= len) {
      console.log('答题个数小于等于正确答案，第一关闯过了')
      let rigthNum = 0
      arr2.forEach(item => {
        if (arr.indexOf(item) > -1) {
          rigthNum++
          console.log(item, '是正确选项')
        }
      })
      //第二关：用户选择的选项全部在正确答案里
      if (rigthNum == arr2.length) {
        console.log('第二关闯关成功，用户选择的选项都是对的')

        //第三关：用户答了满分
        if (rigthNum == len) {
          console.log('第三关闯关成功，用户得了满分')
          console.log("用户得分:100分")
        } else if (rigthNum < len) {
          //保留两位小数，并四舍五入    .toFixed(2)
          let defen = rigthNum / len * 100 //33.33333333333333
          defen = defen.toFixed(2)

          console.log("用户得分:", defen)
        }

      } else {
        console.log("用户得分:0分,虽然第一关闯关了，但是第二关没有闯关成功，所以0分")
      }
    } else {
      console.log('答题个数大于了正确答案，判错')
      console.log("用户得分:0分，一关都没有闯成功，你不0分谁0分")
    }

  }

})

单选题

.js文件

const app=getApp()
let titles=[]
Page({
onLoad(){
//取数据
//本地缓存中取数据
// let arr =wx.getStorageSync('key')
 // 从app.js全局变量里面取
console.log("全局变量取错题",app.globalData.globalErrorOptions)
let arr =app.globalData.globalErrorOptions
if (arr && arr.length>0){
  titles=arr
}
console.log('错题页获取的错题集',titles)
this.setData({
  subject:titles[0]
})
}

  
})

wxml文件


第{{current}}题/共{{total}}题
  


题目：{{subject.title}}
       
       
            
            {{item.code}}:{{item.option}}
          
      
      


用户得分: {{totalScore}}

您答错了{{totalError}}道题
点击查看错题集

单选题错题本

js文件

data = pd.read_csv(
    'https://labfile.oss.aliyuncs.com/courses/1283/adult.data.csv')
print(data.head())

js文件

data = pd.read_csv(
    'https://labfile.oss.aliyuncs.com/courses/1283/adult.data.csv')
print(data.head())

总结

提示：这里对文章进行总结：
例如：以上就是今天要讲的内容，本文仅仅简单介绍了pandas的使用，而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。

微信刷题小程序开发学习笔记

Python相关栏目本月热门文章