devbox
花生_TL007
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

基于微信小程序云开（统计学生信息并导出excel）3.0版_微信小程序开发:统计人员信息并输出为excel文件

作者：花生_TL007 | 2024-05-15 01:53:44

赞

踩

微信小程序开发:统计人员信息并输出为excel文件

前言
随着移动端的不断发展，人们大部分的办公及生活应用都开始趋向于移动端。然而在2017年“微信之父”张小龙带领团队，开发了一款叫做微信小程序的东西，它的出现打破了人们认识移动端的隔膜，由以前的需要先下载app然后在开始工作的老式模式，逐渐的趋向于小程序app（无需下载）的形式。

一、微信小程序是什么？
微信小程序是一种不需要下载安装即可使用的应用，它实现了应用的随开随用，用户只需要用微信扫一扫或者通过微信搜一下即可打开应用，使用完即可关闭，还可以把小程序添加到桌面，真正的做到了便捷方便，用完就走。

二、什么是微信小程序的云开发
云开发为开发者提供完整的云端支持，弱化了后端和运维概念，无需搭建服务器，使用平台提供的 API 进行核心业务开发，即可实现快速上线和迭代，同时这一能力，同开发者已经使用的云服务相互兼容，并不互斥。

从开发流程来看，以往开发一个微信小程序需要经过产品功能构思、模块划分、原型设计、UI 设计、前端开发、后端开发、接口联调、测试上线等开发阶段。有了「小程序·云开发」后，前端工程师将可以独立实现前端开发、后端开发、接口联调工作，且无需太多后端知识。

首先我讲一下3.0版本的这个系统多了那些变化：

1.首页不在是之前老套的直接显示填表页面，而是由一个首页的登录页面做支撑，添加的一些"授权登录"和"去填表"的功能模块

效果显示：

 2.背景由以前的单调的白色，变为3.0版的渐变色，这样更利于用户在填表时缓解视觉疲劳从而引起填表错误！

3.我们之前的版本的"浏览"页面都是单调的一个点击事件绑定的"表格获取并浏览"的按钮，这样如果经常填表时，用户就会遗忘是否天国此表，用户想查看是否天国此表时，还得点击按钮去浏览器下载excel表并查看自己是否真正的填过此表。

而我们的3.0版本增添了一项非常有用的功能，就是在我们的"浏览"页面增添了一个空间（提交记录显示），这个区域的显示，使得用户在授权登录的情况下，点击此页面，很快就可以明了自己是否真正的跳过此表！！！！

如果要实现下面的功能，我们必须在重新创建一个云数据库，这里我创建的名为：openid

它用来存放（当用户点击授权登录时，存储用户的数据）！！！！

 

效果展示：

 好！我们介绍完之后就上代码！！！

 我还要给大家分享一个网址：Vant Weapp - 轻量、可靠的小程序 UI 组件库

 这个是基于GitHub官方的众多大佬打造的一个类似于第三方框架的东西，网站头部部分有使用说明！希望可以帮到更多的人！！！

渐变背景色的实现：

  1. page{
  2.     background: -webkit-linear-gradient(top,rgb(241, 224, 123),#e294fa,rgb(33, 224, 238));
  3. }

 shouye.wxml:

  1. <!-- 显示用户登录开始 -->
  2. <view class="denglu">
  3.     <view class="denglu1">
  4.         <view class="denglu2">
  5.             <image src="{{path}}" style="width: 70rpx;height: 70rpx;margin: 10rpx 0 0 20rpx;"></image>
  6.             <view style="margin: 15rpx 0 0 20rpx;color: cornsilk;">{{name}}</view>
  7.         </view> 
  8.     </view>
  9. </view>
  10. <!-- 显示用户登录结束 -->
  11.  
  12. <!-- 轮播图开始 -->
  13. <!-- 轮播图开始 -->
  14. <view class="lunbo">
  15.     <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
  16.     <block wx:for="{{imgUrls}}" wx:key="index">
  17.       <swiper-item class="LB_a">
  18.         <image class="LB_b"  src="{{item}}" />
  19.       </swiper-item>
  20.     </block>
  21.   </swiper>
  22. </view>
  23. <!-- 轮播图结束 -->
  24. <!-- 轮播图结束 -->
  25.  
  26.  
  27. <!-- 填表button -->
  28. <van-button class="tianbiao" type="primary" size="large" bindtap="tianbiao">去填表</van-button>
  29. <!-- 填表button -->
  30.  
  31. <!-- button登录开始 -->
  32. <view class="shouquandenglu">
  33.     <van-button type="warning" bindtap="denglu">授权登录</van-button>
  34. </view>
  35. <!-- button登录结束 -->
  36.

shouye.wxss:

  1. /* <!-- 显示用户登录开始 --> */
  2. page{
  3.     background: -webkit-linear-gradient(top,rgb(4, 156, 244),#e294fa,rgb(241, 224, 123));
  4. }
  5. .denglu{
  6.     margin-top: 20rpx;
  7.     display: flex;
  8.     flex-direction: row;
  9.     justify-content: space-around;
  10. }
  11. .denglu1{
  12.     height: 100rpx;
  13.     width: 80%;
  14.     background-color: rgb(186, 28, 235);
  15.     border-radius: 20rpx;
  16. }
  17. .denglu2{
  18.     display: flex;
  19.     flex-direction: row;
  20. }
  21. /* <!-- 显示用户登录结束 --> */
  22. /* 轮播开始 */
  23. .lunbo{
  24.     margin: 50rpx 5% 20rpx 5%;
  25. }
  26. .LB_a{
  27.  
  28.     display: flex;
  29.     flex-direction: row;
  30.     justify-content: space-around;
  31. }
  32. .LB_b{
  33.     width: 96%;
  34.     height: 300rpx; 
  35.     display: inline-block; 
  36.     box-sizing: border-box;
  37.     border-radius:20px;
  38. }
  39. /* 轮播结束 */
  40.  
  41. .tianbiao{
  42.     margin: 0 10% 0 10%;
  43.     margin-top: 100rpx;
  44.     width: 80%;
  45. }
  46.  
  47. /* 登录button开始 */
  48. .shouquandenglu{
  49.     margin-top: 100rpx;
  50.     display: flex;
  51.     flex-direction: row;
  52.     justify-content: space-around;
  53. }
  54. /* 登录button结束 */

 shouye.js:

  1. // pages/shouye/shouye.js
  2. Page({
  3.  
  4.     /**
  5.      * 页面的初始数据
  6.      */
  7.     data: {
  8.         name:"昵称",
  9.         path:"/images/touxiang(moren).png",
  10.         isshow:true,
  11.         show:true,
  12.         // 轮播图开始
  13.         imgUrls: [
  14.             'cloud://xinwen-0gefvi6q76e983c0.7869-xinwen-0gefvi6q76e983c0-1312066094/xinxiluru_img/hz2.png',
  15.             'cloud://xinwen-0gefvi6q76e983c0.7869-xinwen-0gefvi6q76e983c0-1312066094/xinxiluru_img/hz1.png',
  16.             'cloud://xinwen-0gefvi6q76e983c0.7869-xinwen-0gefvi6q76e983c0-1312066094/xinxiluru_img/hz3.png',
  17.             'cloud://xinwen-0gefvi6q76e983c0.7869-xinwen-0gefvi6q76e983c0-1312066094/xinxiluru_img/hz.png' 
  18.           ],
  19.           indicatorDots: true,  //是否显示面板指示点
  20.           autoplay: true,      //是否自动切换
  21.           interval: 2000,       //自动切换时间间隔
  22.           duration: 300,       //滑动动画时长
  23.           inputShowed: false,
  24.           inputVal: "",
  25.           // 轮播图结束
  26.  
  27.     },
  28.     denglu(){
  29.         let that = this
  30.         wx.getUserProfile({
  31.           desc: '正在获取',
  32.           success:function(res){
  33.               console.log('获取成功: ',res)
  34.             //添加用户信息到openid数据库
  35.                 wx.cloud.database().collection('openid').add({
  36.                     data:{
  37.                         name:res.userInfo.nickName,
  38.                         path:res.userInfo.avatarUrl
  39.                     }
  40.                 })
  41.  
  42.                 //显示用户信息到首页
  43.               that.setData({
  44.                   name:res.userInfo.nickName,
  45.                   path:res.userInfo.avatarUrl,
  46.                   show:false
  47.               })
  48.  
  49.             //   
  50.           },
  51.           fail:function(err){
  52.               console.log("获取失败：",err)
  53.           }
  54.         })
  55.         // return that.setData
  56.     },
  57.     tianbiao(){
  58.         let that = this
  59.             if (that.data.name=="昵称") {
  60.                 wx.showToast({
  61.                 title: '您还未登录！',
  62.                 icon:"none"
  63.                 })
  64.             }else{
  65.                 wx.navigateTo({
  66.                   url: '../tianbiao/tianbiao',
  67.                 })
  68.             }
  69.     },
  70.  
  71.     /**
  72.      * 生命周期函数--监听页面加载
  73.      */
  74.     onLoad(options) {
  75.  
  76.     },
  77.  
  78.     /**
  79.      * 生命周期函数--监听页面初次渲染完成
  80.      */
  81.     onReady() {
  82.  
  83.     },
  84.  
  85.     /**
  86.      * 生命周期函数--监听页面显示
  87.      */
  88.     onShow() {
  89.  
  90.     },
  91.  
  92.     /**
  93.      * 生命周期函数--监听页面隐藏
  94.      */
  95.     onHide() {
  96.  
  97.     },
  98.  
  99.     /**
  100.      * 生命周期函数--监听页面卸载
  101.      */
  102.     onUnload() {
  103.  
  104.     },
  105.  
  106.     /**
  107.      * 页面相关事件处理函数--监听用户下拉动作
  108.      */
  109.     onPullDownRefresh() {
  110.  
  111.     },
  112.  
  113.     /**
  114.      * 页面上拉触底事件的处理函数
  115.      */
  116.     onReachBottom() {
  117.  
  118.     },
  119.  
  120.     /**
  121.      * 用户点击右上角分享
  122.      */
  123.     onShareAppMessage() {
  124.  
  125.     }
  126. })

 shouye.json:

  1. {
  2.     "usingComponents": {
  3.         "van-icon": "@vant/weapp/icon/index",
  4.         "van-button": "@vant/weapp/button/index"
  5.       }
  6. }

 

liulan.wxml:

  1. <button bindtap="shuaxin"type="primary">刷新填表记录</button>
  2.  
  3. <view style="font-size: 30rpx;">提交记录显示：</view>
  4.  
  5. <view class="xianshi_tianbiao">
  6.  
  7.     <view class="xianshi_tianbiao1"> 
  8.     <!-- 显示用户头像及昵称 -->
  9.         <view class="paihao2">
  10.             <view class="boxR" wx:for="{{openid}}" wx:key="index">
  11.             <view class="yonghuxinxi">
  12.                 <image style="width: 40rpx;height: 40rpx;" src="{{item.path}}"></image>
  13.                 <view style="font-size: 25rpx;margin-top:5rpx;">{{item.name}}</view>
  14.             </view>
  15.             </view>
  16.         </view>
  17.     </view>
  18.  
  19.     <view class="xianshi_tianbiao1">
  20.         <!-- 显示用户琐鲦表中的真实姓名 -->
  21.         <view wx:for="{{list}}" wx:key="index">
  22.                 <view style="font-size: 25rpx;margin-top:5rpx;">姓名：{{item.xingming}}</view>
  23.         </view>
  24.     </view>
  25. </view>
  26.  
  27. <view class="jiange"></view>
  28. <view style="margin-top: 300rpx;">
  29.     <button type="primary" bindtap="getyunhanshu">表格获取并浏览</button>
  30. </view>
  31. <view class="shuoming">说明:点击“表格获取并浏览”后系统会自动把表格网页地址赋值到您的设备的粘贴板，直接可以在浏览器粘贴浏览，无需再次手动复制。感谢使用本小程序！</view>
  32. <view class="jiange"></view>
  33.

liulan.wxss:

  1. page{
  2.     background: -webkit-linear-gradient(top,rgb(241, 224, 123),#e294fa,rgb(33, 224, 238));
  3. }
  4. .shuoming{
  5.     padding: 50rpx 50rpx 0 50rpx;
  6.     color: red;
  7. }
  8. .yonghuxinxi{
  9.     display: flex;
  10.     flex-direction: row;
  11. }
  12. .xianshi_tianbiao{
  13.     display: flex;
  14.     flex-direction: row;
  15.     justify-content: space-around;
  16. }
  17. .xianshi_tianbiao1{
  18.     display: flex;
  19.     flex-direction: row;
  20. }
  21.

liulan.js:

  1. const db = wx.cloud.database()
  2. Page({
  3.  
  4.   /**
  5.    * 页面的初始数据
  6.    */
  7.   data: {
  8.       list:[],
  9.       openid:[]
  10.     
  11.   },
  12.   shuaxin(){
  13.       let that = this
  14.     db.collection('users').get({
  15.         success(res){
  16.           console.log(res.data)
  17.           that.setData({
  18.               list:res.data
  19.           })
  20.         }
  21.     })
  22.     db.collection('openid').get({
  23.         success:function(res){
  24.             console.log('用户信息获取成功',res.data)
  25.             that.setData({
  26.                 openid:res.data
  27.             })
  28.         },
  29.         fail:function(res){
  30.             console.log('用户信息获取失败',res)
  31.         }
  32.     })
  33.   },
  34.   
  35.   //响应云函数按钮
  36.   getyunhanshu(){
  37.  
  38.     wx.cloud.callFunction({
  39.         name:"stuexcel", // 调用的云函数名
  40.          data:{
  41.             clssdata:'1111'    //根据班级字段，导出班级成员信息 ===对应云函数clssdata
  42.          },
  43.          complete:res=>{
  44.              console.log(res.result)
  45.             //  return
  46.             //获取文件下载地址（24小时内有效）
  47.            wx.cloud.getTempFileURL({      
  48.              fileList:[res.result.fileID],
  49.              success:res=>{
  50.                console.log('文件下载链接：',res.fileList[0].tempFileURL)
  51.                this.setData({  //设置data中定义相应的变量
  52.                  tempFileURL:res.fileList[0].tempFileURL,
  53.                })
  54.                
  55.                //复制刚获取到链接，成功后会自动弹窗提示已复制
  56.                wx.setClipboardData({  
  57.                  data:this.data.tempFileURL,
  58.                  success (res) {
  59.                    wx.getClipboardData({
  60.                      success (res) {
  61.                        console.log('复制成功：',res.data) // data
  62.                      }
  63.                    })
  64.                  }
  65.                })
  66.              }
  67.            })
  68.          }
  69.        })
  70.  
  71.     
  72. },
  73.  
  74.   /**
  75.    * 生命周期函数--监听页面加载
  76.    */
  77.   onLoad: function (options) {
  78.   },
  79.  
  80.   /**
  81.    * 生命周期函数--监听页面初次渲染完成
  82.    */
  83.   onReady: function () {
  84.     
  85.   },
  86.  
  87.   /**
  88.    * 生命周期函数--监听页面显示
  89.    */
  90.   onShow: function () {
  91.     
  92.   },
  93.  
  94.   /**
  95.    * 生命周期函数--监听页面隐藏
  96.    */
  97.   onHide: function () {
  98.     
  99.   },
  100.  
  101.   /**
  102.    * 生命周期函数--监听页面卸载
  103.    */
  104.   onUnload: function () {
  105.     
  106.   },
  107.  
  108.   /**
  109.    * 页面相关事件处理函数--监听用户下拉动作
  110.    */
  111.   onPullDownRefresh: function () {
  112.     
  113.   },
  114.  
  115.   /**
  116.    * 页面上拉触底事件的处理函数
  117.    */
  118.   onReachBottom: function () {
  119.     
  120.   },
  121.  
  122.   /**
  123.    * 用户点击右上角分享
  124.    */
  125.   onShareAppMessage: function () {
  126.     
  127.   }
  128. })

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/花生_TL007/article/detail/571061
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号