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

系列文章目录

提示：小白学小程序开发

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

---

前言

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

---

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

一、环境搭建

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配置

<view class="djs">
    <text class="djs_title" >距结束</text>
    <text class="time" space="nbsp">{{djs.day}}</text>
    <text class="time_text">天</text>
    <text class="time" space="nbsp">{{djs.hour}}</text>
    <text class="time_text">时</text>
    <text class="time" space="nbsp">{{djs.min}}</text>
    <text class="time_text">分</text>
    <text class="time" space="nbsp">{{djs.sec}}</text>
    <text class="time_text">秒</text>
</view>

.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页面

<view>题目：这门课的老师是谁？</view>
<radio-group bindchange="radioChange">
  <view>
    <radio value="A" />
    <text>A:编程小石头</text>
  </view>
  <view>
    <radio value="B" />
    <text>B:疯狂小石头</text>
  </view>
  <view>
    <radio value="C" />
    <text>C:大石头</text>
  </view>
  <view>
    <radio value="D" />
    <text>D:石头王</text>
  </view>
</radio-group>

<button type="primary" bindtap="submit">提交答题</button>

.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页面

<view>题目：这门课的老师是谁？</view>
<checkbox-group bindchange="checkboxChange">
  <view>
    <checkbox value="A" />
    <text>A:编程小石头</text>
  </view>
  <view>
    <checkbox value="B" />
    <text>B:疯狂小石头</text>
  </view>
  <view>
    <checkbox value="C" />
    <text>C:大石头</text>
  </view>
  <view>
    <checkbox value="D" />
    <text>D:邱石</text>
  </view>
</checkbox-group>
<button bindtap="submit" type="primary">提交答题</button>

.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: '答错啦',
      })
    }
  },
  /**
   * 规则二，按答对的个数给分，比如3个答案答对一个给1分，答对3个给满分
   * 1,判断答题个数是否小于答案个数 答1，2，3才给分
   * 2，只答一个。要判断这一个是否在答案里，在的话就给1分
   * 3，答二的时候：两个都在正确答案里，给2分
   * 4，答三个的时候：三个全都在正确答案里，给3分
   */
  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文件

<!--pages/index3/index3.wxml-->
<view class="tip">第{{current}}题/共{{total}}题</view>
  <progress class="pro" percent="{{percent}}" show-info stroke-width="7"/>


<view>题目：{{subject.title}}</view>
       <radio-group bindchange="radioChange">
       <view wx:for="{{subject.options}}">
            <radio value="{{item.code}}" checked="{{isSlect}}" />
            <text>{{item.code}}:{{item.option}}</text>
          </view>
      </radio-group>
      <button type="primary" bindtap="submit">提交答题</button>

<view wx:if="{{totalScore>-1}}">
<view>用户得分: {{totalScore}}</view>
<view bindtap="seeError"  wx:if="{{totalError>0}}">
您答错了{{totalError}}道题
<text>点击查看错题集</text>
</view>
</view>

单选题错题本

js文件

const app=getApp()
let titles=[]
Page({
  data:{
    total:0,
    current:1,
  },
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],
  total:titles.length,

})
},
//上一个错题
pre(){
  //current:0,1,2
  if(this.data.current-1<0){
    wx.showToast({
      icon:'error',
      title: '已经是第一个啦',
    })
  }
  else {
  let currentNum=this.data.current 
  console.log("上一个是第"+currentNum+"个错题")
  this.setData({
    current:currentNum-1,
    subject:titles[currentNum-1],
})
  }


},
//下一个错题
  next(){
    if(this.data.current+1>titles.length){
      wx.showToast({
        icon:'error',
        title: '已经最后一个啦',
      })
    }
    else {
    let currentNum=this.data.current +1
    console.log("下一个错题是第"+currentNum+"个错题")
    this.setData({
      current:currentNum,
      subject:titles[currentNum-1],
})
    }


  }
})

wxml文件

<view class="tip">第{{current}}题/共{{total}}题</view>
<view>题目：{{subject.title}}</view>
       <view wx:for="{{subject.options}}">
                    <text class="{{subject.userSelect==item.code? 'red':''}}">{{item.code}}:{{item.option}}</text> 
      </view>

      <view>您的选择：
<text>{{subject.userSelect}}</text>
</view>
<view>正确答案：
<text  wx:for="{{subject.answer}}">{{item}}</text>
</view>

<view class="btn_root">
      <button type="primary" bindtap="pre"  size="mini">上一题</button>
      <button type="primary" bindtap="next" size="mini">下一题</button>
</view>

wxss文件

/* pages/errorOptions/errorOptions.wxss */
.red{
  color: red;

}
.tip{
  text-align: center;
  color: red;
  margin: 15rpx;
  font-size: 42rpx;
  }
  
  .item{
    margin: 20rpx;
  }
.btn_root{
  margin: 19rpx;
  display: flex;
  justify-content: space-between;
color: rgb(236, 229, 229);
}  

三、小程序云开发

（1）使用get方法

1、初始化小程序

删除无关紧要文件，app.json文件里面小程序注册页面

2、增加数据

3、page{}外面创建数据库

 var   db=wx.cloud.database()//变量用var可以覆盖
const  db=wx.cloud.database()//常量用const不可以覆盖

4、page 里面data下面连接数据库

getData(){
  db.collection("demolist").get(//数据库查询
    {
      success:res=>{//回调函数
        console.log(res )
      }
    }
  )

},

筛选条件：.doc(数据库数据id)
data{}里面定义一个对象dataobj
this.data编写回调函数返回值
运行成功后APPData里面可以直接显示数据

完整片段代码

const  db=wx.cloud.database()
Page({
  /**
   * 页面的初始数据
   */
  data: {
    dataobj:""//增加一个对象（我理解为中间变量）
     },
getData(){
  db.collection("demolist").doc("82afc00a623d0f3c013aa0563672e0e5").get(
    {
      success:res=>{//回调函数
        console.log(res )
        this.data({//返回数据
          dataobj:res.data
        })
      }
    }
  )

},

5、前端获取数据

显示测试数据

<!-- 触发事件 -->
<button type="primary" bindtap="getData">点击获取数据</button>
<!-- 显示事件 -->
<view>{{dataObj.title}}</view>

显示全部数据：

后端js文件下面删除getData文件下面的.doc()筛选则可获取全部数据
前端使用for循环显示所有数据，更改所有数据条件为item

getData(){
  db.collection("demolist").get({
      success:res=>{//回调函数；回调地域
        console.log(res )
        this.setData({//返回数据
          dataObj:res.data
        })
      }
    })

},

<!-- 触发事件 -->
<button type="primary" bindtap="getData">点击获取数据</button>
<!-- 显示事件 -->
<view wx:for="{{dataObj}}">{{item.title}} - {{item.author}}</view>

（2）用 Promise 风格调用：

1、

7、

8、

四、 于大佬的课程学习

网页来源

shell命令行
npm init
npm i @vant/weapp -S --production
构建npm

引入按钮

// 通过 npm 安装
// app.json
"usingComponents": {
  "van-button": "@vant/weapp/button/index"
}

在app.json或index.json中引入组件

// 通过 npm 安装
// app.json
"usingComponents": {
  "van-button": "@vant/weapp/button/index"
}

index.wxml显示按钮
按钮类型
支持default、primary、info、warning、danger五种类型，默认为default。

<van-button type="default">默认按钮</van-button>
<van-button type="primary">主要按钮</van-button>
<van-button type="info">信息按钮</van-button>
<van-button type="warning">警告按钮</van-button>
<van-button type="danger">危险按钮</van-button>

显示按钮样式更改
引入
在app.json或index.json中引入组件

"usingComponents": {
  "van-grid": "@vant/weapp/grid/index",
  "van-grid-item": "@vant/weapp/grid-item/index"
}

显示按钮样式更改
使用
index.wxml中引入组件

"usingComponents": {
  "van-grid": "@vant/weapp/grid/index",
  "van-grid-item": "@vant/weapp/grid-item/index"
}

五、小程序下载文件

wx.downloadFile({
        url: 'https://*******',//文件路径
        success: function (res) {
          const filePath = res.tempFilePath
          wx.openDocument({
            filePath: filePath,
            showMenu: true,
            success: function (res) {
              console.log('打开文档成功')
            }
          })
        }
      })

六、接入云开发

第一层questionPoolindex.js代码

// 云函数入口文件
const cloud = require('wx-server-sdk');
const selectRecord = require('./selectRecord/index')
const addStar = require('./addStar/index')
const checkStar = require('./checkStar/index')
const removeStar = require('./removeStar/index')
const collect = require('./collect/index')
const getCollection = require('./getCollection/index')
const removeCollection = require('./removeCollection/index')
const getStar = require('./getStar/index')
const querySubjectList = require('./querySubjectList/index')
cloud.init()

// 云函数入口函数
exports.main = async (event, context) => {
  const wxContext = cloud.getWXContext()
  switch (event.type) {
    case 'selectRecord':
      return await selectRecord.main(event, context);
    case 'addStar':
      return await addStar.main(event, context);
    case 'checkStar':
      return await checkStar.main(event, context);
      case 'removeStar':
      return await removeStar.main(event, context);
      case 'collect':
      return await collect.main(event, context);
      case 'getCollection':
      return await getCollection.main(event, context);
      case 'removeCollection':
      return await removeCollection.main(event, context);
      case 'getStar':
      return await getStar.main(event, context);
      case 'querySubjectList':
      return await querySubjectList.main(event, context);
  }

  return {
    event,
    openid: wxContext.OPENID,
    appid: wxContext.APPID,
    unionid: wxContext.UNIONID,
  }
}

第二层selectRecord里面的index.js代码

const cloud = require('wx-server-sdk');

cloud.init({
  env: cloud.DYNAMIC_CURRENT_ENV
});
const db = cloud.database();

// 查询数据库集合云函数入口函数
exports.main = async (event, context) => {
  // 返回数据库查询结果
  return await db.collection('question').where({
    chapterId: event.chapterId
  })
    // .skip((event.page - 1) * event.size)
    // .limit(event.size)
    .get();
};

显示页面里面的index.js代码

  onLoad: function (options) {
    wx.cloud.callFunction({
     name:"questionPool",
      })
      .then(res=>{
    console.log(res)
  })
  },

};

五 、 读取的云函数值传到html页面

html代码

<text>{{openid}}</text>

.js代码

onLoad: function (options) {
     wx.cloud.callFunction({
     name:"questionPool"
      })
      .then(res=>{
      console.log('成功',res)  
      this.setData({
        openid:res.result.openid
      })
      })
      .catch(res=>{
        console.log('失败',res)
      })
    },

六 、

代码

<text>{{openid}}</text>