基于小程序云开开发(统计学生信息并导出excel)1.0版本

简介: 基于小程序云开开发(统计学生信息并导出excel)1.0版本

前言

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

一、微信小程序是什么?

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

二、什么是微信小程序的云开发?

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

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

三、首先我们要创建一个云环境(用来开云数据库,云储存等)

这里我开了一个名叫xinwen的云环境(至于名字是因为我把前面写新闻共享平台的云数据库和这个程序的云数据库放到一个环境中了,所以懒得起名字,直接拿来用了)

1.jpg

创建好云环境之后我们要创建云数据库

image.png

这里我创建了一个users云数据库来作为接收页面传递的数据并将其保存。

好!接下来可是部署我们的云函数:

这里我部署了一个名字为:stuexcel的云函数,作为操作云数据库以及云储存的方式。

云函数(stuexcel):

注意:env代表你的app的环境变量,在你的程序的app.js的env中!

constcloud=require('wx-server-sdk')
cloud.init({
env:'xxx'//xxx表示你的app.js里的env注册号})
constxlsx=require('node-xlsx')    //导入Excel类库constdb=cloud.database()   //声明数据库对象const_=db.commandexports.main=async (event, context) => {   //主函数入口try {
letschoolBusInfo=awaitdb.collection('users').where({}).get()  //将获取到的数据对象赋值给变量,接下来需要用该对象向Excel表中添加数据// return schoolBusInfo.data[0].banji// let schoolBusInfo = event.clssdata;// console.log(schoolBusInfo);letdataCVS=`schoolBusInfo-${Math.floor(Math.random()*1000000000)}.xlsx`//声明一个Excel表,表的名字用随机数产生letalldata= [];
letrow= ['姓名', '班级','学号','出生年月','联系方式','通信地址','父亲姓名','父亲工作单位','父亲联系方式','母亲姓名','母亲工作单位','母亲联系方式','高考成绩','个人目标','特殊说明']; //表格的属性,也就是表头说明对象alldata.push(row);  //将此行数据添加到一个向表格中存数据的数组中//接下来是通过循环将数据存到向表格中存数据的数组中for (letkey=0; key<schoolBusInfo.data.length; key++) {
letarr= [];
arr.push(schoolBusInfo.data[key].xingming);
arr.push(schoolBusInfo.data[key].banji);
arr.push(schoolBusInfo.data[key].xuehao);
arr.push(schoolBusInfo.data[key].chushengnianyue);
arr.push(schoolBusInfo.data[key].lianxifangshi);
arr.push(schoolBusInfo.data[key].tongxindizhi);
arr.push(schoolBusInfo.data[key].fuqinxingming);
arr.push(schoolBusInfo.data[key].gongzuodanwei_fuqin);
arr.push(schoolBusInfo.data[key].lianxifangshi_fuqin);
arr.push(schoolBusInfo.data[key].muqinxingming);
arr.push(schoolBusInfo.data[key].gongzuodanwei_muqin);
arr.push(schoolBusInfo.data[key].lianxifangshi_muqin);
arr.push(schoolBusInfo.data[key].gaokaochengji);
arr.push(schoolBusInfo.data[key].gerenmubiao);
arr.push(schoolBusInfo.data[key].teshushuoming);
alldata.push(arr)
         }
varbuffer=xlsx.build([{   
name: "mySheetName",
data: alldata            }]); 
// return alldata//将表格存入到存储库中并返回文件IDreturnawaitcloud.uploadFile({
cloudPath: dataCVS,
fileContent: buffer, //excel二进制文件            })
    } catch (error) {
console.error(error)
    }
}

好!云函数创建并部署后,我们开始创建页面:

我们先来构思一下,需要:

1.用户填写页面一个

2.需要用户填写表后提交之后,点击可在excel表中的信息,所以需要查看页面一个

3.需要表明该产品的作者以及出处,并写明联系方式方便测试bug后的运维情况,也需要页面一个

好!构思就需要这些!我们只是简单的做一个学生信息的填入及生成excel表并提供给用户网站查看信息的系统,并不需很复杂的东西,只不过需要借用云函数来控制操作一下云数据库,以及需要暂时用户点击提交时,暂时存在储存的云储存里面的excel网址,即可!

image.png

首先我把三个页面的tabbar按钮命名为:首页(shouye),浏览(liulan),作者(lianxizuozhe)

image.png

liulan.wxml:

<!-- 本人基本信息开始 --><viewclass="dabox"><viewclass="xiaobox"><text>1.本人基本信息</text><text>姓名:</text><view><inputclass="input"name="xingming"bindinput ="xingmingInput"></input></view><text>班级:</text><view><inputclass="input"name="banji"bindinput ="banjiInput"></input></view><text>学号:</text><view><inputclass="input"name="xuehao"bindinput ="xuehaoInput"></input></view><text>出生年月:</text><view><inputclass="input"name="chushengnianyue"bindinput ="chushengnianyueInput"></input></view><text>联系方式:</text><view><inputclass="input"name="lianxifangshi"bindinput ="lianxifangshiInput"></input></view><text>通信地址:</text><view><inputclass="input"name="tongxindizhi"bindinput ="tongxindizhiInput"></input></view></view></view><!-- 本人基本信息结束 --><viewclass="jiange"></view><!-- 联系人1开始 --><viewclass="dabox"><viewclass="xiaobox"><text>2.联系人1-父亲信息</text><text>父亲姓名:</text><view><inputclass="input"name="fuqinxingming"bindinput ="fuqinxingmingInput"></input></view><text>工作单位:</text><view><inputclass="input"name="gongzuodanwei_fuqin"bindinput ="gongzuodanwei_fuqinInput"></input></view><text>联系方式:</text><view><inputclass="input"name="lianxifangshi_fuqin"bindinput ="lianxifangshi_fuqinInput"></input></view></view></view><!-- 联系人1结束 --><viewclass="jiange"></view><!-- 联系人2开始 --><viewclass="dabox"><viewclass="xiaobox"><text>3.联系人2-父亲信息</text><text>母亲姓名:</text><view><inputclass="input"name="muqinxingming"bindinput ="muqinxingmingInput"></input></view><text>工作单位:</text><view><inputclass="input"name="gongzuodanwei_muqin"bindinput ="gongzuodanwei_muqinInput"></input></view><text>联系方式:</text><view><inputclass="input"name="lianxifangshi_muqin"bindinput ="lianxifangshi_muqinInput"></input></view></view></view><!-- 联系人2结束 --><viewclass="jiange"></view><!-- 其他信息开始 --><viewclass="dabox"><viewclass="xiaobox"><text>4.其他信息</text><text>高考成绩:</text><view><inputclass="input"name="gongkaochengji"bindinput ="gaokaochengjiInput"></input></view><text>个人目标:</text><view><inputclass="input"name="gerenmubiao"bindinput ="gerenmubiaoInput"></input></view><text>特殊说明:</text><view><inputclass="input"name="teshushuoming"bindinput ="teshushuomingInput"></input></view></view></view><!-- 其他信息结束 --><viewclass="jiange"></view><!-- 提交开始 --><view><buttontype="primary"bindtap="addData">提交</button></view><!-- 提交结束 --><viewclass="jiange"></view><!-- <view><button type="primary" bindtap="getyunhanshu">云函数获取</button></view><view class="jiange"></view> --><!-- <view><button type="primary" bindtap="excel">上传excel</button></view> --><!-- <view class="jiange"></view> -->

shouye.wxss:

text{
padding-top:20rpx;
padding-bottom: 20rpx ;
}
input{
width: 660rpx;
height: 70rpx;
border: 2rpxgraysolid;
}
.dabox{
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-around;  
}
.xiaobox{
width: 660rpx;
display: flex;
flex-direction: column;
}
.jiange{
margin: 30rpx030rpx0;
background-color: rgb(240, 219, 241);
width: 100%;
height: 20rpx;
}

shouye.js:

// pages/timu/timu.jsconstdb=wx.cloud.database()
varxingming=""varbanji=""varxuehao=""varchushengnianyue=""varlianxifangshi=""vartongxindizhi=""varfuqinxingming=""vargongzuodanwei_fuqin=""varlianxifangshi_fuqin=""varmuqinxingming=""vargongzuodanwei_muqin=""varlianxifangshi_muqin=""vargaokaochengji=""vargerenmubiao=""varteshushuoming=""Page({
data: {
xingming: '',
banji:'',
xuehao:'',
chushengnianyue:'',
lianxifangshi:'',
tongxindizhi:'',
fuqinxingming:'',
gongzuodanwei_fuqin:'',
lianxifangshi_fuqin:'',
muqinxingming:'',
gongzuodanwei_muqin:'',
lianxifangshi_muqin:'',
gaokaochengji:'',
gerenmubiao:'',
teshushuoming:'',
tempFileURL:'',//保存要导出的cvs文件云端路径    },
//获取用户输入的姓名xingmingInput:function(e){
xingming=e.detail.value    },
// 获取用户输入的班级banjiInput:function(e){
banji=e.detail.value    },
// 获取用户输入的学号xuehaoInput:function(e){
xuehao=e.detail.value    },
// 获取用户输入的出生年月chushengnianyueInput:function(e){
chushengnianyue=e.detail.value    },
// 获取用户输入的联系方式lianxifangshiInput:function(e){
lianxifangshi=e.detail.value    },
// 获取用户输入的通信地址tongxindizhiInput:function(e){
tongxindizhi=e.detail.value    },
// 获取用户输入的父亲姓名fuqinxingmingInput:function(e){
fuqinxingming=e.detail.value    },
// 获取用户输入的父亲工作单位gongzuodanwei_fuqinInput:function(e){
gongzuodanwei_fuqin=e.detail.value    },
// 获取用户输入的父亲联系方式lianxifangshi_fuqinInput:function(e){
lianxifangshi_fuqin=e.detail.value    },
// 获取用户输入的母亲姓名muqinxingmingInput:function(e){
muqinxingming=e.detail.value    },
// 获取用户输入的母亲工作单位gongzuodanwei_muqinInput:function(e){
gongzuodanwei_muqin=e.detail.value    },
// 获取用户输入的母亲联系方式lianxifangshi_muqinInput:function(e){
lianxifangshi_muqin=e.detail.value    },
// 获取用户输入的高考成绩gaokaochengjiInput:function(e){
gaokaochengji=e.detail.value    },
// 获取用户输入的个人目标gerenmubiaoInput:function(e){
gerenmubiao=e.detail.value    },
// 获取用户的特殊说明teshushuomingInput:function(e){
teshushuoming=e.detail.value    },
//添加数据addData(){
wx.showLoading({
title: '数据提交中...',
mask:true        })
db.collection("users").add({
data:{
xingming:xingming,
banji:banji,
xuehao:xuehao,
chushengnianyue:chushengnianyue,
lianxifangshi:lianxifangshi,
tongxindizhi:tongxindizhi,
fuqinxingming:fuqinxingming,
gongzuodanwei_fuqin:gongzuodanwei_fuqin,
lianxifangshi_fuqin:lianxifangshi_fuqin,
muqinxingming:muqinxingming,
gongzuodanwei_muqin:gongzuodanwei_muqin,
lianxifangshi_muqin:lianxifangshi_muqin,
gaokaochengji:gaokaochengji,
gerenmubiao:gerenmubiao,
teshushuoming:teshushuoming,
            }
        }).then(res=>{
console.log(res)
wx.hideLoading()
                })
    },
//响应云函数按钮// 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//                      }//                    })//                  }//                })//              }//            })//          }//        })// },})

shouye.json:

{
"component": true,
"usingComponents": {}
}

image.png

liulan.wxml:(代码内有详细注释)

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

liulan.wxss:

.shuoming{
padding: 50rpx50rpx050rpx;
color: red;
}


liulan.js:

Page({
/**   * 页面的初始数据   */data: {
  },
//响应云函数按钮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 () {
  }
})

liulan.json:

{
"component": true,
"usingComponents": {}
}

image.png

lianxizuozhe.wxml:

<viewclass="lianxi">    如果有什么需要联系作者:
</view><viewclass="qianduan"><view>前端:</view><view>VX:anran8024</view><view>QQ:1650696279</view><view>CSDN:lqj_本人</view></view><viewclass="qianduan"><view>后端:</view><view>VX:anran8024</view><view>QQ:3110689397</view><view>QQ:1650696279</view><view>CSDN:lqj_本人</view></view><buttonopen-type="contact"bindcontact="handleContact"type="primary"><text>在线客服</text></button>

lianxizuozhe.wxss:

.lianxi{
color: red;
padding: 50rpx;
}
.qianduan{
padding: 50rpx;
color: red;
}

lianxizuozhe.js:

lianxizuozhe.json:

{
"component": true,
"usingComponents": {}
}

app.wxss:

app.wxss为一个程序的公共样式,可以在app.wxss中写入class类名,可以在每一个页面的wxml的标签中调用此类样式所谓(app.wxss公共样式)

/**app.wxss**/.container {
display: flex;
flex-direction: column;
align-items: center;
box-sizing: border-box;
} 
button {
background: initial;
}
button:focus{
outline: 0;
}
button::after{
border: none;
}
page {
background: #f6f6f6;
display: flex;
flex-direction: column;
justify-content: flex-start;
}

app.js:

// app.jsApp({
onLaunch() {
wx.cloud.init({
env:"xxx",//填写你的env      })
// 展示本地存储能力constlqjs=wx.getStorageSync('lqjs') || []
lqjs.unshift(Date.now())
wx.setStorageSync('lqjs', lqjs)
// 登录wx.login({
success: res=> {
// 发送 res.code 到后台换取 openId, sessionKey, unionId      }
    })
  },
globalData: {
userInfo: null  }
})

最终效果展示:

image.png

当我们点击提交时,后台的控制台:

image.png

这时我们再看我们的数据库:

image.png

发现已经有我们提交的信息了

image.png

我们点击"表格获取并浏览"这时会自动复制到我们的复制板上,我们只需要在浏览器中打开即可:

image.png

当然后期我们还可以借助云函数的控制来进行对数据库的增删改查,来实现更多花样的操作。

你的每一次失败,都是老天在考验你是否真的热爱,所以别放弃!!!

键盘敲出我们的梦想,我们都能为未来的自己痴狂!!!

当你的天赋不够支撑起你的野心时,你要告诉自己:呵!游戏继续,只不过我要认真了!










目录
相关文章
|
22天前
|
存储 编解码 小程序
抖音小程序开发中遇见的坑点
在抖音小程序开发中,需注意10大坑点:遵守小程序限制与规范;解决兼容性问题;优化数据加载速度;适应分享功能限制;处理视频播放挑战;优化图片加载显示;管理资源文件;提升用户体验;考虑安全性;及时更新维护。通过测试、优化和遵循官方文档,可克服这些问题,打造优质小程序。
|
1月前
|
小程序 前端开发 API
小程序全栈开发中的多端适配与响应式布局
【4月更文挑战第12天】本文探讨了小程序全栈开发中的多端适配与响应式布局。多端适配涉及平台和设备适应,确保统一用户体验;响应式布局利用媒体查询和弹性布局维持不同设备的布局一致性。实践中,开发者可借助跨平台框架实现多平台开发,运用响应式布局技术适应不同设备。同时,注意兼容性、性能优化和用户体验,以提升小程序质量和用户体验。通过这些方法,开发者能更好地掌握小程序全栈开发。
|
1月前
|
小程序 前端开发 API
微信小程序全栈开发中的异常处理与日志记录
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中的异常处理和日志记录,强调其对确保应用稳定性和用户体验的重要性。异常处理涵盖前端(网络、页面跳转、用户输入、逻辑异常)和后端(数据库、API、业务逻辑)方面;日志记录则关注关键操作和异常情况的追踪。实践中,前端可利用try-catch处理异常,后端借助日志框架记录异常,同时采用集中式日志管理工具提升分析效率。开发者应注意安全性、性能和团队协作,以优化异常处理与日志记录流程。
|
1月前
|
小程序 安全 数据安全/隐私保护
微信小程序全栈开发中的身份认证与授权机制
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中的身份认证与授权机制。身份认证包括手机号验证、微信登录和第三方登录,而授权机制涉及角色权限控制、ACL和OAuth 2.0。实践中,开发者可利用微信登录获取用户信息,集成第三方登录,以及实施角色和ACL进行权限控制。注意点包括安全性、用户体验和合规性,以保障小程序的安全运行和良好体验。通过这些方法,开发者能有效掌握小程序全栈开发技术。
|
1月前
|
小程序 前端开发 安全
小程序全栈开发中的跨域问题及其解决方案
【4月更文挑战第12天】本文探讨了小程序全栈开发中的跨域问题及其解决方案。跨域问题源于浏览器安全策略,主要体现在前后端分离、第三方服务集成和数据共享上。为解决此问题,开发者可采用CORS、JSONP、代理服务器、数据交换格式和域名策略等方法。实践中需注意安全性、兼容性和性能。通过掌握这些解决方案,开发者能更好地处理小程序的跨域问题,提升用户体验。
|
1月前
|
小程序 前端开发 JavaScript
微信小程序全栈开发中的PWA技术应用
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中PWA技术的应用,PWA结合Web的开放性和原生应用的性能,提供离线访问、后台运行、桌面图标和原生体验。开发者可利用Service Worker实现离线访问,Worker处理后台运行,Web App Manifest添加桌面图标,CSS和JavaScript提升原生体验。实践中需注意兼容性、性能优化和用户体验。PWA技术能提升小程序的性能和用户体验,助力开发者打造优质小程序。
|
19天前
|
Python
pythonSpider_urllib获取豆瓣电影top250信息写入excel
pythonSpider_urllib获取豆瓣电影top250信息写入excel
17 0
|
4天前
|
小程序
开发小程序只要几百块?
开发小程序只要几百块?
19 0
|
4天前
|
Web App开发 数据采集 移动开发
开发uniapp过程中对app、微信小程序与h5的webview调试
开发uniapp过程中对app、微信小程序与h5的webview调试
10 1
|
15天前
|
小程序 前端开发 JavaScript
轻松学会微信小程序开发(一)
轻松学会微信小程序开发(一)