大家好~我是c站的一个小博主，我会定期更新博文，本篇是围绕微信小程序基于腾讯云开发展开的一个项目，如果看着还不错，或者对您有帮助的话，可以进我的专栏看看我的小程序的其他作品https://blog.csdn.net/lbcyllqj/category_12024537.html 比如：基于微信云开发的学生录入信息功能的1.0到4.0版本，我觉得那是一个很实用的程序哦~喜欢的话就订阅叭~ 这是本程序的1.0版本（youbug）大家可以参考之后自己尝试一下修改，我觉得可以增加一下大家的学习的机会！ (1条消息) 基于微信小程序云开发（校园许愿墙app）妄想替代学校的表白墙_lqj_本人的博客-CSDN博客 这里是我的另一个程序（还未发布）：大家感兴趣的话可以参考一下 基于微信小程序云开（统计学生信息并导出excel）_lqj_本人的博客-CSDN博客 基于微信小程序云开（统计学生信息并导出excel）2.0版_lqj_本人的博客-CSDN博客 基于微信小程序云开（统计学生信息并导出excel）3.0版_lqj_本人的博客-CSDN博客 基于微信小程序云开（统计学生信息并导出excel）4.0版（稳定版）_lqj_本人的博客-CSDN博客
目录
前言
一、微信小程序是什么？
二、什么是微信小程序的云开发？
2.0版本的优点以及对1.0版本的bug修复：
第一点
第二点
第三点
第四点
第五点
效果展示
部分代码实现
shouye.wxml部分优化代码
myteam.wxml
myteam.js部分优化代码：
myteam.wxss
add.wxml
add.js优化部分代码
前言
随着移动端的不断发展，人们大部分的办公及生活应用都开始趋向于移动端。然而在2017年“微信之父”张小龙带领团队，开发了一款叫做微信小程序的东西，它的出现打破了人们认识移动端的隔膜，由以前的需要先下载app然后在开始工作的老式模式，逐渐的趋向于小程序app（无需下载）的形式。
一、微信小程序是什么？
微信小程序是一种不需要下载安装即可使用的应用，它实现了应用的随开随用，用户只需要用微信扫一扫或者通过微信搜一下即可打开应用，使用完即可关闭，还可以把小程序添加到桌面，真正的做到了便捷方便，用完就走。
二、什么是微信小程序的云开发？
云开发为开发者提供完整的云端支持，弱化了后端和运维概念，无需搭建服务器，使用平台提供的 API 进行核心业务开发，即可实现快速上线和迭代，同时这一能力，同开发者已经使用的云服务相互兼容，并不互斥。
从开发流程来看，以往开发一个微信小程序需要经过产品功能构思、模块划分、原型设计、UI 设计、前端开发、后端开发、接口联调、测试上线等开发阶段。有了「小程序·云开发」后，前端工程师将可以独立实现前端开发、后端开发、接口联调工作，且无需太多后端知识。
2.0版本的优点以及对1.0版本的bug修复：
第一点
首先我先修改了首页的路径，我又创建了一个进入（真正）首页之前与用户扫码之后的一个用户点击过渡的一个页面，这也没有1.0版本的那样突兀的感觉！
第二点
修复了1.0首页显示用户的许愿单时的显示问题，1.0版本中最明显的一个用户许愿单信息就是，随着许愿单的增多用户的信息会溢出原本的空间，从而将背景溢出！2.0版本中修复了此bug，通过scroll-view的方式，wx:for写进scroll-view标签中，将所有用户填写的数据从数据库中调用到scroll-view标签中，将用户的数据形成一个可滑动区域的形式。（右侧时滑动条）
第三点
在1.0版本也有一个突出的bug就是，当用户没有授权登录时，也可以发布愿望单，2.0版本有一个判断的条件语句解决了此问题。
代码语言：javascript复制if(that.data.title == "请输入许愿标题..." || that.data.content == "请输入许愿内容..." || that.data.name == '' ||that.data.img == '')这样如果不限授权登陆的话，就无法发布愿望单，并弹出提示，您还有信息未填！
第四点
在1.0版本时，当用户在textarea中输入完信息后，手机的键盘会自动出现一个完成的按钮，这个按钮是一个bug的存在，发现当输入完数据时，点击完成后提交后，首页中不会有用户textarea中输入的数据。但是我们不点击后点击提交后，则会正常显示。
所以为了，不误导用户，我在textarea标签的属性中添加了一个属性：
代码语言：javascript复制show-confirm-bar = "{{false}}"将原有的输入完后出现完成的按钮进行了删除，这样不会起到误导用户的作用！
第五点
添加了一个tabbar页面"团队运营"，只要时加入team中的人都用资格成为管理者，并为以后程序的运营做出贡献，在team空间中可以一起讨论问题，共同进步！
效果展示
部分代码实现
shouye.wxml部分优化代码
代码语言：javascript复制<scroll-view style="width:100%;height:100%;" scroll-y="true">
<view class="lay_col_sta pad_20">
<navigator wx:for="{{search_list}}" wx:key="index"url="../detail/detail?detail_id={{item._id}}"hover-class="navigator-hover">
<view class="lay_row_spa" style="padding: 15rpx 0 15rx 0; width: 640rpx; height: 113rpx; display: flex; box-sizing: border-box;">
<image src="{{item.img}}" class="g_img"></image>
<view class="itemname">
<text>{{item.name}}</text>
<text style="font-size: 20rpx;">{{item.cTime}}</text>
</view>
<van-divider />
</view>
<van-divider style="width:100%" custom-style="margin-top:10rpx;margin-bottom:10rpx;"></van-divider>
</navigator>
</view>
</scroll-view>myteam.wxml
代码语言：javascript复制<view class="felx">
<text style="font-size: 50rpx;font-weight: bold;color: coral;">管理者入口</text>
</view>
<van-popup show="{{ show_login }}" round position="bottom"custom-style="height: 60%" closeable bind:close="close_login_case">
<view>
<view style="height:50rpx">
</view>
<view style="width:80%;margin-top: 20rpx;">
<van-icon name="friends-o" />
<input type="text" placeholder="账号" style="margin-left:20rpx" data-name="username" bindinput="input_msg"/>
</view>
<van-divider style="width:80%" custom-style="margin-top:10rpx;margin-bottom:10rpx"></van-divider>
<view style="width:80%;margin-top: 20rpx;">
<van-icon name="goods-collect-o" />
<input type="password" placeholder="密码" style="margin-left:20rpx" data-name="password" bindinput="input_msg"/>
</view>
<van-divider style="width:80%" custom-style="margin-top:10rpx;margin-bottom:10rpx"></van-divider>
<button style="background-color:#4fc08d;color:#FFFF;width:70%;margin-top:100rpx"disabled="{{is_login?'true':''}}" bindtap="login_admin">登录</button>
</view>
</van-popup>
<view class="myteam">
<text style="color: rgb(0, 0, 0);margin-top: 20rpx;">说明：加入team的人可申请管理者！</text>
<image src="https://7869-xinwen-3g4k2l1y3d8ceb73-1312670923.tcb.qcloud.la/校园许愿墙的img/myteam.jpg?sign=c9c582d3177cbb9f26e256700ffc71c9&t=1665510841"></image>
</view>myteam.js部分优化代码：
代码语言：javascript复制login_admin(){
let that = this
wx.showLoading({
title: '登陆中',
})
if(that.data.username == '' || that.data.password == ''){
wx.showToast({
title: '请输入账号密码',
icon:"none"
})
}else{
that.setData({
is_login:true
})
db.collection('team').where({
username:that.data.username,
password:that.data.password,
}).get().then(res=>{
console.log('登录',res)
that.setData({
is_login:false
})
wx.hideLoading()
if(res.data.length == 0){
wx.showToast({
title: '账号或密码错误',
})
}else{
app.globalData.admin = res.data[0]
wx.navigateTo({
url: '../admin_index/admin_index',
})
}
})
}
},myteam.wxss
代码语言：javascript复制page{
background: -webkit-linear-gradient(top,rgb(221, 236, 245),#bf20f0,rgb(241, 224, 123));
}
.felx{
display: flex;
flex-direction: row;
justify-content: space-around;
margin-top: 30rpx;
}
.myteam{
display: flex;
flex-direction: column;
align-items: center;
}
image{
height: 700rpx;
}add.wxml
代码语言：javascript复制<view class="">
<!-- <template is="head" data="{{title:'editor'}}"></template> -->
<view class="page-body">
<view class='wrapper'>
<view class="contentinfo"style="color:red;font-size:40rpx;font-weight:bold">
请输入许愿标题
</view>
<view class='in'><input bindinput='title1'placeholder="{{title}}"focus="{{focus}}"/></view>
<view class="contentinfo" style="color:red;font-size:40rpx;font-weight:bold">
请输入许愿内容
</view>
<view class='in'><textarea
show-confirm-bar = "{{false}}"bindinput="content1"placeholder="{{content}}" maxlength="300"></textarea></view>
<view class="contentinfo" style="color:red;font-size:40rpx;font-weight:bold">
请选择所属书院
</view>
<view class='in'>
<radio-group class="radio-group"bindchange="radioChange">
<label class="radio" wx:for="{{items}}" wx:key="index">
<radio value="{{item.name}}" checked="{{item.checked}}"/>{{item.value}}
</label>
</radio-group></view>
<view class="pic">
<view class="contentinfo" style="color:red;font-size:40rpx;font-weight:bold">
请上传图片
</view>
<view bindtap='picfunction'><image class="plus" style="width: 80rpx;height: 80rpx;" src='/images/tianjia.png'></image></view>
</view>
<image mode="aspectFit" src="{{img}}" style="width: 200rpx; height: 200rpx; display: inline-block; box-sizing: border-box"></image>
<view>
<text style="color:red;font-size:40rpx;font-weight:bold">许愿者：</text>
</view>
<view class="zuozhe">
<image src="{{path}}" style="width: 30px;height: 30px;"></image>
<text style="padding:6rpx 0 0 22rpx ;color: white;">昵称：{{name}}</text>
</view>
<button bindtap="denglu" type="primary" style="font-size: 30rpx;width: 33%;margin-top: 20rpx;background: -webkit-linear-gradient(top left,rgb(4, 208, 244),rgb(241, 224, 123))" >授权登录</button>
</view>
<button style="background: -webkit-linear-gradient(top left,rgb(4, 208, 244),rgb(241, 224, 123));box-shadow: 5rpx 5rpx 10rpx rgb(95, 93, 93);margin-top: 30rpx;" type="primary"bindtap='submit'>上传</button>
</view>
</view>add.js优化部分代码
代码语言：javascript复制submit:function(e){
var that = this
var myDate = new Date();
if(that.data.title == "请输入许愿标题..." || that.data.content == "请输入许愿内容..." || that.data.name == '' ||that.data.img == ''){
wx.showToast({
title: '您还有信息未填',
icon:"none"
})
}else{
that.setData({
cTime:myDate.toLocaleDateString()//获取当前日期
})
const db = wx.cloud.database()
wx.showLoading({
title: '上传中',
})
db.collection('xuyuanqiang').add({
data:{
title:that.data.title,
content:that.data.content,
newsid:that.data.newsid,
img:that.data.img,
cTime:that.data.cTime,
name:"许愿者：" that.data.name
},
success:function(res){
console.log("插入成功" res)
wx.hideLoading()
},
fail:console.error
})
wx.redirectTo({
url: '../shouye/shouye',
})
}
},
