前言
随着移动端的不断发展,人们大部分的办公及生活应用都开始趋向于移动端。然而在2017年“微信之父”张小龙带领团队,开发了一款叫做微信小程序的东西,它的出现打破了人们认识移动端的隔膜,由以前的需要先下载app然后在开始工作的老式模式,逐渐的趋向于小程序app(无需下载)的形式。
一、微信小程序是什么?
微信小程序是一种不需要下载安装即可使用的应用,它实现了应用的随开随用,用户只需要用微信扫一扫或者通过微信搜一下即可打开应用,使用完即可关闭,还可以把小程序添加到桌面,真正的做到了便捷方便,用完就走。
二、什么是微信小程序的云开发?
云开发为开发者提供完整的云端支持,弱化了后端和运维概念,无需搭建服务器,使用平台提供的 API 进行核心业务开发,即可实现快速上线和迭代,同时这一能力,同开发者已经使用的云服务相互兼容,并不互斥。
从开发流程来看,以往开发一个微信小程序需要经过产品功能构思、模块划分、原型设计、UI 设计、前端开发、后端开发、接口联调、测试上线等开发阶段。有了「小程序·云开发」后,前端工程师将可以独立实现前端开发、后端开发、接口联调工作,且无需太多后端知识。
三、首先我讲一下3.0版本的这个系统多了那些变化:
1.首页不在是之前老套的直接显示填表页面,而是由一个首页的登录页面做支撑,添加的一些"授权登录"和"去填表"的功能模块
效果显示:
2.背景由以前的单调的白色,变为3.0版的渐变色,这样更利于用户在填表时缓解视觉疲劳从而引起填表错误!
3.我们之前的版本的"浏览"页面都是单调的一个点击事件绑定的"表格获取并浏览"的按钮,这样如果经常填表时,用户就会遗忘是否天国此表,用户想查看是否天国此表时,还得点击按钮去浏览器下载excel表并查看自己是否真正的填过此表。而我们的3.0版本增添了一项非常有用的功能,就是在我们的"浏览"页面增添了一个空间(提交记录显示),这个区域的显示,使得用户在授权登录的情况下,点击此页面,很快就可以明了自己是否真正的跳过此表!!!!
如果要实现下面的功能,我们必须在重新创建一个云数据库,这里我创建的名为:openid
它用来存放(当用户点击授权登录时,存储用户的数据)!!!!
效果展示:
好!我们介绍完之后就上代码!!!
我还要给大家分享一个网址:https://vant-contrib.gitee.io/vant-weapp/#/icon
这个是基于GitHub官方的众多大佬打造的一个类似于第三方框架的东西,网站头部部分有使用说明!希望可以帮到更多的人!!!
渐变背景色的实现:
page{ background: linear-gradient(top,rgb(241, 224, 123),#e294fa,rgb(33, 224, 238)); }
shouye.wxml:
<!-- 显示用户登录开始 --><viewclass="denglu"><viewclass="denglu1"><viewclass="denglu2"><imagesrc="{{path}}"style="width: 70rpx;height: 70rpx;margin: 10rpx 0 0 20rpx;"></image><viewstyle="margin: 15rpx 0 0 20rpx;color: cornsilk;">{{name}}</view></view></view></view><!-- 显示用户登录结束 --><!-- 轮播图开始 --><!-- 轮播图开始 --><viewclass="lunbo"><swiperindicator-dots="{{indicatorDots}}"autoplay="{{autoplay}}"interval="{{interval}}"duration="{{duration}}"><blockwx:for="{{imgUrls}}"wx:key="index"><swiper-itemclass="LB_a"><imageclass="LB_b"src="{{item}}"/></swiper-item></block></swiper></view><!-- 轮播图结束 --><!-- 轮播图结束 --><!-- 填表button --><van-buttonclass="tianbiao"type="primary"size="large"bindtap="tianbiao">去填表</van-button><!-- 填表button --><!-- button登录开始 --><viewclass="shouquandenglu"><van-buttontype="warning"bindtap="denglu">授权登录</van-button></view><!-- button登录结束 -->
shouye.wxss:
/* <!-- 显示用户登录开始 --> */page{ background: 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: 50rpx5%20rpx5%; } .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: 010%010%; 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.jsPage({ /** * 页面的初始数据 */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(){ letthat=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(){ letthat=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:
<buttonbindtap="shuaxin"type="primary">刷新填表记录</button><viewstyle="font-size: 30rpx;">提交记录显示:</view><viewclass="xianshi_tianbiao"><viewclass="xianshi_tianbiao1"><!-- 显示用户头像及昵称 --><viewclass="paihao2"><viewclass="boxR"wx:for="{{openid}}"wx:key="index"><viewclass="yonghuxinxi"><imagestyle="width: 40rpx;height: 40rpx;"src="{{item.path}}"></image><viewstyle="font-size: 25rpx;margin-top:5rpx;">{{item.name}}</view></view></view></view></view><viewclass="xianshi_tianbiao1"><!-- 显示用户琐鲦表中的真实姓名 --><viewwx:for="{{list}}"wx:key="index"><viewstyle="font-size: 25rpx;margin-top:5rpx;">姓名:{{item.xingming}}</view></view></view></view><viewclass="jiange"></view><viewstyle="margin-top: 300rpx;"><buttontype="primary"bindtap="getyunhanshu">表格获取并浏览</button></view><viewclass="shuoming">说明:点击“表格获取并浏览”后系统会自动把表格网页地址赋值到您的设备的粘贴板,直接可以在浏览器粘贴浏览,无需再次手动复制。感谢使用本小程序!</view><viewclass="jiange"></view>
liulan.wxss:
page{ background: linear-gradient(top,rgb(241, 224, 123),#e294fa,rgb(33, 224, 238)); } .shuoming{ padding: 50rpx50rpx050rpx; 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:
constdb=wx.cloud.database() Page({ /** * 页面的初始数据 */data: { list:[], openid:[] }, shuaxin(){ letthat=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 () { } })