前言
随着移动端的不断发展，人们大部分的办公及生活应用都开始趋向于移动端。然而在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 = thiswx.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 = thisif (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 = thisdb.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 () {}
})

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

基于微信小程序云开（统计学生信息并导出excel）2.0版
前言随着移动端的不断发展,人们大部分的办公及生活应用都开始趋向于移动端.然而在2017年"微信之父"张小龙带领团队,开发了一款叫做微信小程序的东西,它的出现打破了人们认识移动端的 ...
基于微信小程序云开发（校园许愿墙app）2.0稳定版，以发布上线
大家好~我是c站的一个小博主,我会定期更新博文,本篇是围绕微信小程序基于腾讯云开发展开的一个项目,如果看着还不错,或者对您有帮助的话,可以进我的专栏看看我的小程序的其他作品https://blog.c ...
基于微信小程序云开（统计学生信息并导出excel）
前言随着移动端的不断发展,人们大部分的办公及生活应用都开始趋向于移动端.然而在2017年"微信之父"张小龙带领团队,开发了一款叫做微信小程序的东西,它的出现打破了人们认识移动端的 ...
基于微信小程序云开（统计学生信息并导出excel）4.0版（稳定版）
前言随着移动端的不断发展,人们大部分的办公及生活应用都开始趋向于移动端.然而在2017年"微信之父"张小龙带领团队,开发了一款叫做微信小程序的东西,它的出现打破了人们认识移动端的 ...
基于微信小程序云开发（校园许愿墙app）妄想替代学校的表白墙
大家好~我是c站的一个小博主,我会定期更新博文,本篇是围绕微信小程序基于腾讯云开发展开的一个项目,如果看着还不错,或者对您有帮助的话,可以进我的专栏看看我的小程序的其他作品https://blog.c ...
基于微信小程序云开发的投票小程序源码，图文投票微信小程序源码
功能介绍投票活动十分火,商家,企业,机构偶尔都会来一场投票活动评选,本小程序支持图文投票,简单方便.随时随地完成投票,可以方便设定投票模式(按天按全程,投票数限定). 本代码前后端完整代码包投票列表 ...
校园二手书商城源代码基于微信小程序云开发，可在线支付提现，含详细配置教程
校园二手书商城源代码基于微信小程序云开发,可在线支付提现,含详细配置教程完整代码下载地址:校园二手书商城源代码基于微信小程序云开发欢迎使用,下面是配置教程长话短说,下面直接说配置流程一.小程序 ...
基于微信小程序云开发的职业学校招生报名小程序源码，职业学校招生报名微信小程序源码，职业学校招生报名小程序源码
功能介绍这是一个以报名为核心的职业学校招生小程序,目的是方便想要系统学习技能,入门某项技能或者领域的初高中毕业生,了解该学校的基本情况及各个专业,并提供报名路径,致力于技能型人才培养. 本程序前后端 ...
基于微信小程序云开发的医院体检预约小程序源码，医院体检预约小程序源码，实现体检预约管理、体检预约凭证、预约数据查看导出版权申诉
功能介绍对于医院体检科室和体检机构而言,每天的体检人数分布也不太均衡,若很多人集中在某些天体检,会出现「医生强度大.体检人排队久」的问题.采用体检预约小程序进行体检预约数管理,体检人可预约到更广的 ...

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