devbox
知新_RL
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

基于微信小程序云开发（校园许愿墙app）2.0稳定版，以发布上线_微信小程序云许愿墙

作者：知新_RL | 2024-04-22 03:47:33

赞

踩

微信小程序云许愿墙

 大家好~我是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版本有一个判断的条件语句解决了此问题。

if(that.data.title == "请输入许愿标题..." || that.data.content == "请输入许愿内容..." || that.data.name == '' ||that.data.img == '')

 这样如果不限授权登陆的话，就无法发布愿望单，并弹出提示，您还有信息未填！

第四点

在1.0版本时，当用户在textarea中输入完信息后，手机的键盘会自动出现一个完成的按钮，这个按钮是一个bug的存在，发现当输入完数据时，点击完成后提交后，首页中不会有用户textarea中输入的数据。但是我们不点击后点击提交后，则会正常显示。

所以为了，不误导用户，我在textarea标签的属性中添加了一个属性：

show-confirm-bar = "{{false}}"

将原有的输入完后出现完成的按钮进行了删除，这样不会起到误导用户的作用！ 

第五点

添加了一个tabbar页面"团队运营"，只要时加入team中的人都用资格成为管理者，并为以后程序的运营做出贡献，在team空间中可以一起讨论问题，共同进步！

 

 

效果展示

 

 

 

 部分代码实现

shouye.wxml部分优化代码

  1. <scroll-view style="width:100%;height:100%;" scroll-y="true">
  2.             <view class="lay_col_sta pad_20">
  3.                 <navigator  wx:for="{{search_list}}" wx:key="index"url="../detail/detail?detail_id={{item._id}}"hover-class="navigator-hover">
  4.                     <view class="lay_row_spa" style="padding: 15rpx 0 15rx 0; width: 640rpx; height: 113rpx; display: flex; box-sizing: border-box;">
  5.                         <image src="{{item.img}}" class="g_img"></image>
  6.                         <view class="itemname">
  7.                             <text>{{item.name}}</text>
  8.                             <text style="font-size: 20rpx;">{{item.cTime}}</text>
  9.                         </view>
  10.                         <van-divider />
  11.                     </view>
  12.                     <van-divider style="width:100%" custom-style="margin-top:10rpx;margin-bottom:10rpx;"></van-divider>
  13.                 </navigator>
  14.             </view>
  15.         </scroll-view>

myteam.wxml

  1. <view class="felx">
  2.     <text style="font-size: 50rpx;font-weight: bold;color: coral;">管理者入口</text>
  3. </view>
  4.  
  5. <van-popup show="{{ show_login }}" round position="bottom"custom-style="height: 60%" closeable bind:close="close_login_case">
  6.     <view>
  7.         <view style="height:50rpx">
  8.  
  9.         </view>
  10.         <view style="width:80%;margin-top: 20rpx;">
  11.             <van-icon name="friends-o" />
  12.             <input type="text" placeholder="账号" style="margin-left:20rpx" data-name="username" bindinput="input_msg"/>
  13.         </view>
  14.         <van-divider style="width:80%" custom-style="margin-top:10rpx;margin-bottom:10rpx"></van-divider>
  15.  
  16.         <view  style="width:80%;margin-top: 20rpx;">
  17.             <van-icon name="goods-collect-o" />
  18.             <input type="password" placeholder="密码" style="margin-left:20rpx" data-name="password" bindinput="input_msg"/>
  19.         </view>
  20.         <van-divider style="width:80%" custom-style="margin-top:10rpx;margin-bottom:10rpx"></van-divider>
  21.         <button style="background-color:#4fc08d;color:#FFFF;width:70%;margin-top:100rpx"disabled="{{is_login?'true':''}}" bindtap="login_admin">登录</button>
  22.     </view>
  23. </van-popup>
  24. <view class="myteam">
  25.   <text style="color: rgb(0, 0, 0);margin-top: 20rpx;">说明：加入team的人可申请管理者！</text>
  26. <image src="https://7869-xinwen-3g4k2l1y3d8ceb73-1312670923.tcb.qcloud.la/%E6%A0%A1%E5%9B%AD%E8%AE%B8%E6%84%BF%E5%A2%99%E7%9A%84img/myteam.jpg?sign=c9c582d3177cbb9f26e256700ffc71c9&t=1665510841"></image>
  27. </view>
  28.

myteam.js部分优化代码：

  1. login_admin(){
  2.         let that = this
  3.         wx.showLoading({
  4.           title: '登陆中',
  5.         })
  6.         if(that.data.username == '' || that.data.password == ''){
  7.             wx.showToast({
  8.               title: '请输入账号密码',
  9.               icon:"none"
  10.             })
  11.         }else{
  12.             that.setData({
  13.                 is_login:true
  14.             })
  15.             db.collection('team').where({
  16.                 username:that.data.username,
  17.                 password:that.data.password,
  18.             }).get().then(res=>{
  19.                 console.log('登录',res)
  20.                 that.setData({      
  21.                     is_login:false
  22.                 })
  23.                 wx.hideLoading()
  24.                 if(res.data.length == 0){
  25.                     wx.showToast({
  26.                       title: '账号或密码错误',
  27.                     })
  28.                 }else{
  29.                     app.globalData.admin = res.data[0]
  30.                     wx.navigateTo({
  31.                       url: '../admin_index/admin_index',
  32.                     })
  33.                 }
  34.             })
  35.         }
  36.     },

myteam.wxss

  1. page{
  2.   background: -webkit-linear-gradient(top,rgb(221, 236, 245),#bf20f0,rgb(241, 224, 123));
  3. }
  4. .felx{
  5.   display: flex;
  6.   flex-direction: row;
  7.   justify-content: space-around;
  8.   margin-top: 30rpx;
  9. }
  10. .myteam{
  11.   display: flex;
  12.   flex-direction: column;
  13.   align-items: center;
  14. }
  15. image{
  16.   height: 700rpx;
  17. }

add.wxml

  1.  
  2. <view class="">
  3.     <!-- <template is="head" data="{{title:'editor'}}"></template> -->
  4.     <view class="page-body">
  5.         <view class='wrapper'>
  6.             <view class="contentinfo"style="color:red;font-size:40rpx;font-weight:bold">
  7.                 请输入许愿标题
  8.             </view>
  9.             <view class='in'><input bindinput='title1'placeholder="{{title}}"focus="{{focus}}"/></view>
  10.             <view class="contentinfo" style="color:red;font-size:40rpx;font-weight:bold">
  11.                 请输入许愿内容
  12.             </view>
  13.             <view class='in'><textarea 
  14.             	show-confirm-bar = "{{false}}"bindinput="content1"placeholder="{{content}}" maxlength="300"></textarea></view>
  15.             <view class="contentinfo" style="color:red;font-size:40rpx;font-weight:bold">
  16.                 请选择所属书院
  17.             </view>
  18.             <view class='in'>
  19.                 <radio-group class="radio-group"bindchange="radioChange">
  20.                 <label class="radio" wx:for="{{items}}" wx:key="index">
  21.                     <radio value="{{item.name}}" checked="{{item.checked}}"/>{{item.value}}
  22.                 </label>
  23.             </radio-group></view>
  24.             <view class="pic">
  25.                 <view class="contentinfo" style="color:red;font-size:40rpx;font-weight:bold">
  26.                     请上传图片
  27.                 </view>
  28.                 <view bindtap='picfunction'><image class="plus" style="width: 80rpx;height: 80rpx;" src='/images/tianjia.png'></image></view>
  29.             </view>
  30.             <image mode="aspectFit" src="{{img}}" style="width: 200rpx; height: 200rpx; display: inline-block; box-sizing: border-box"></image>
  31.             <view>
  32.                 <text style="color:red;font-size:40rpx;font-weight:bold">许愿者：</text>
  33.             </view>
  34.             <view class="zuozhe">
  35.                 <image src="{{path}}" style="width: 30px;height: 30px;"></image>
  36.                 <text style="padding:6rpx  0 0 22rpx ;color: white;">昵称：{{name}}</text>
  37.             </view>
  38.             <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>
  39.             
  40.         </view>
  41.         <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>
  42.     </view>
  43. </view>

add.js优化部分代码

  1. submit:function(e){
  2.         var that = this
  3.         var myDate = new Date();
  4.         if(that.data.title == "请输入许愿标题..." || that.data.content == "请输入许愿内容..." || that.data.name == '' ||that.data.img == ''){
  5.             wx.showToast({
  6.                 title: '您还有信息未填',
  7.                 icon:"none"
  8.               })
  9.         }else{
  10.             that.setData({
  11.                 cTime:myDate.toLocaleDateString()//获取当前日期
  12.             })
  13.             const db = wx.cloud.database()
  14.             wx.showLoading({
  15.                 title: '上传中',
  16.               })
  17.             db.collection('xuyuanqiang').add({
  18.                 data:{
  19.                     title:that.data.title,
  20.                     content:that.data.content,
  21.                     newsid:that.data.newsid,
  22.                     img:that.data.img,
  23.                     cTime:that.data.cTime,
  24.                     name:"许愿者：" + that.data.name
  25.                 },
  26.                 success:function(res){
  27.                     console.log("插入成功"+res)
  28.                     wx.hideLoading()
  29.                 },
  30.                 fail:console.error
  31.             })
  32.             wx.redirectTo({
  33.               url: '../shouye/shouye',
  34.             })
  35.         }
  36.         
  37.     },

 

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/知新_RL/article/detail/466634
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号