基于微信小程序云开（统计学生信息并导出excel）3.0版

lqj_本人

发布于 2022-11-20 13:22:34

6340

发布于 2022-11-20 13:22:34

文章被收录于专栏：云开发小程序1云开发小程序1

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

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

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

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

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

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

效果显示：

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

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

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

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

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

效果展示：

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

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

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

渐变背景色的实现：

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

shouye.wxml:

<!-- 显示用户登录开始 -->
<view class="denglu">
    <view class="denglu1">
        <view class="denglu2">
            <image src="{{path}}" style="width: 70rpx;height: 70rpx;margin: 10rpx 0 0 20rpx;"></image>
            <view style="margin: 15rpx 0 0 20rpx;color: cornsilk;">{{name}}</view>
        </view> 
    </view>
</view>
<!-- 显示用户登录结束 -->

<!-- 轮播图开始 -->
<!-- 轮播图开始 -->
<view class="lunbo">
    <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
    <block wx:for="{{imgUrls}}" wx:key="index">
      <swiper-item class="LB_a">
        <image class="LB_b"  src="{{item}}" />
      </swiper-item>
    </block>
  </swiper>
</view>
<!-- 轮播图结束 -->
<!-- 轮播图结束 -->


<!-- 填表button -->
<van-button class="tianbiao" type="primary" size="large" bindtap="tianbiao">去填表</van-button>
<!-- 填表button -->

<!-- button登录开始 -->
<view class="shouquandenglu">
    <van-button type="warning" bindtap="denglu">授权登录</van-button>
</view>
<!-- button登录结束 -->

shouye.wxss:

/* <!-- 显示用户登录开始 --> */
page{
    background: -webkit-linear-gradient(top,rgb(4, 156, 244),#e294fa,rgb(241, 224, 123));
}
.denglu{
    margin-top: 20rpx;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}
.denglu1{
    height: 100rpx;
    width: 80%;
    background-color: rgb(186, 28, 235);
    border-radius: 20rpx;
}
.denglu2{
    display: flex;
    flex-direction: row;
}
/* <!-- 显示用户登录结束 --> */
/* 轮播开始 */
.lunbo{
    margin: 50rpx 5% 20rpx 5%;
}
.LB_a{

    display: flex;
    flex-direction: row;
    justify-content: space-around;
}
.LB_b{
    width: 96%;
    height: 300rpx; 
    display: inline-block; 
    box-sizing: border-box;
    border-radius:20px;
}
/* 轮播结束 */

.tianbiao{
    margin: 0 10% 0 10%;
    margin-top: 100rpx;
    width: 80%;
}

/* 登录button开始 */
.shouquandenglu{
    margin-top: 100rpx;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}
/* 登录button结束 */

shouye.js:

// pages/shouye/shouye.js
Page({

    /**
     * 页面的初始数据
     */
    data: {
        name:"昵称",
        path:"/images/touxiang(moren).png",
        isshow:true,
        show:true,
        // 轮播图开始
        imgUrls: [
            'cloud://xinwen-0gefvi6q76e983c0.7869-xinwen-0gefvi6q76e983c0-1312066094/xinxiluru_img/hz2.png',
            'cloud://xinwen-0gefvi6q76e983c0.7869-xinwen-0gefvi6q76e983c0-1312066094/xinxiluru_img/hz1.png',
            'cloud://xinwen-0gefvi6q76e983c0.7869-xinwen-0gefvi6q76e983c0-1312066094/xinxiluru_img/hz3.png',
            'cloud://xinwen-0gefvi6q76e983c0.7869-xinwen-0gefvi6q76e983c0-1312066094/xinxiluru_img/hz.png' 
          ],
          indicatorDots: true,  //是否显示面板指示点
          autoplay: true,      //是否自动切换
          interval: 2000,       //自动切换时间间隔
          duration: 300,       //滑动动画时长
          inputShowed: false,
          inputVal: "",
          // 轮播图结束

    },
    denglu(){
        let that = this
        wx.getUserProfile({
          desc: '正在获取',
          success:function(res){
              console.log('获取成功: ',res)
            //添加用户信息到openid数据库
                wx.cloud.database().collection('openid').add({
                    data:{
                        name:res.userInfo.nickName,
                        path:res.userInfo.avatarUrl
                    }
                })

                //显示用户信息到首页
              that.setData({
                  name:res.userInfo.nickName,
                  path:res.userInfo.avatarUrl,
                  show:false
              })

            //   
          },
          fail:function(err){
              console.log("获取失败：",err)
          }
        })
        // return that.setData
    },
    tianbiao(){
        let that = this
            if (that.data.name=="昵称") {
                wx.showToast({
                title: '您还未登录！',
                icon:"none"
                })
            }else{
                wx.navigateTo({
                  url: '../tianbiao/tianbiao',
                })
            }
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {

    },

    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {

    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {

    },

    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {

    },

    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {

    },

    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {

    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {

    },

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {

    }
})

shouye.json:

{
    "usingComponents": {
        "van-icon": "@vant/weapp/icon/index",
        "van-button": "@vant/weapp/button/index"
      }
}

liulan.wxml:

<button bindtap="shuaxin"type="primary">刷新填表记录</button>

<view style="font-size: 30rpx;">提交记录显示：</view>

<view class="xianshi_tianbiao">

    <view class="xianshi_tianbiao1"> 
    <!-- 显示用户头像及昵称 -->
        <view class="paihao2">
            <view class="boxR" wx:for="{{openid}}" wx:key="index">
            <view class="yonghuxinxi">
                <image style="width: 40rpx;height: 40rpx;" src="{{item.path}}"></image>
                <view style="font-size: 25rpx;margin-top:5rpx;">{{item.name}}</view>
            </view>
            </view>
        </view>
    </view>

    <view class="xianshi_tianbiao1">
        <!-- 显示用户琐鲦表中的真实姓名 -->
        <view wx:for="{{list}}" wx:key="index">
                <view style="font-size: 25rpx;margin-top:5rpx;">姓名：{{item.xingming}}</view>
        </view>
    </view>
</view>

<view class="jiange"></view>
<view style="margin-top: 300rpx;">
    <button type="primary" bindtap="getyunhanshu">表格获取并浏览</button>
</view>
<view class="shuoming">说明:点击“表格获取并浏览”后系统会自动把表格网页地址赋值到您的设备的粘贴板，直接可以在浏览器粘贴浏览，无需再次手动复制。感谢使用本小程序！</view>
<view class="jiange"></view>

liulan.wxss:

page{
    background: -webkit-linear-gradient(top,rgb(241, 224, 123),#e294fa,rgb(33, 224, 238));
}
.shuoming{
    padding: 50rpx 50rpx 0 50rpx;
    color: red;
}
.yonghuxinxi{
    display: flex;
    flex-direction: row;
}
.xianshi_tianbiao{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}
.xianshi_tianbiao1{
    display: flex;
    flex-direction: row;
}

liulan.js:

const db = wx.cloud.database()
Page({

  /**
   * 页面的初始数据
   */
  data: {
      list:[],
      openid:[]
    
  },
  shuaxin(){
      let that = this
    db.collection('users').get({
        success(res){
          console.log(res.data)
          that.setData({
              list:res.data
          })
        }
    })
    db.collection('openid').get({
        success:function(res){
            console.log('用户信息获取成功',res.data)
            that.setData({
                openid:res.data
            })
        },
        fail:function(res){
            console.log('用户信息获取失败',res)
        }
    })
  },
  
  //响应云函数按钮
  getyunhanshu(){

    wx.cloud.callFunction({
        name:"stuexcel", // 调用的云函数名
         data:{
            clssdata:'1111'    //根据班级字段，导出班级成员信息 ===对应云函数clssdata
         },
         complete:res=>{
             console.log(res.result)
            //  return
            //获取文件下载地址（24小时内有效）
           wx.cloud.getTempFileURL({      
             fileList:[res.result.fileID],
             success:res=>{
               console.log('文件下载链接：',res.fileList[0].tempFileURL)
               this.setData({  //设置data中定义相应的变量
                 tempFileURL:res.fileList[0].tempFileURL,
               })
               
               //复制刚获取到链接，成功后会自动弹窗提示已复制
               wx.setClipboardData({  
                 data:this.data.tempFileURL,
                 success (res) {
                   wx.getClipboardData({
                     success (res) {
                       console.log('复制成功：',res.data) // data
                     }
                   })
                 }
               })
             }
           })
         }
       })

    
},

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    
  }
})

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2022-10-03，如有侵权请联系 cloudcommunity@tencent.com 删除

微信