前往小程序，Get更优阅读体验！
立即前往
文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
首页
学习
活动
专区
工具
TVP最新优惠活动
返回腾讯云官网
社区首页 >专栏 >基于微信小程序云开发（校园许愿墙app）2.0稳定版，以发布上线

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

作者头像
lqj_本人
发布于 2022-11-20 13:34:56
3790
发布于 2022-11-20 13:34:56
举报
文章被收录于专栏：云开发小程序1云开发小程序1

 大家好~我是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/%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>
</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',
            })
        }
        
    },
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2022-10-12，如有侵权请联系 cloudcommunity@tencent.com 删除
微信
小程序
网站
编程算法
云开发

本文分享自 作者个人站点/博客 前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ，欢迎热爱写作的你一起参与！

微信
小程序
网站
编程算法
云开发
评论
登录后参与评论
0 条评论
热度
最新
登录 后参与评论
推荐阅读
LV.
文章
0
获赞
0
目录
  • 前言
  • 一、微信小程序是什么？
  • 二、什么是微信小程序的云开发？
  • 2.0版本的优点以及对1.0版本的bug修复：
    • 第一点
      • 第二点
        • 第三点
          • 第四点
            • 第五点
              • shouye.wxml部分优化代码
              • myteam.wxml
              • myteam.js部分优化代码：
              • myteam.wxss
              • add.wxml
              • add.js优化部分代码
          • 效果展示
          •  部分代码实现
          相关产品与服务
          云开发 CloudBase
          云开发（Tencent CloudBase，TCB）是腾讯云提供的云原生一体化开发环境和工具平台，为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务，可用于云端一体化开发多种端应用（小程序、公众号、Web 应用等），避免了应用开发过程中繁琐的服务器搭建及运维，开发者可以专注于业务逻辑的实现，开发门槛更低，效率更高。
          免费体验产品介绍产品文档
          精选特惠 用云无忧
          领券

          腾讯云开发者

          扫码关注腾讯云开发者

          扫码关注腾讯云开发者

          领取腾讯云代金券

          热门产品

          热门推荐

          更多推荐

          Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

          深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

          腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

          问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档

          Copyright © 2013 - 2024 Tencent Cloud.

          All Rights Reserved. 腾讯云 版权所有

          登录 后参与评论