#小程序云开发挑战赛#-迷你论坛--darksheep
发布于 4 年前 作者 dongmin 1480 次浏览 来自 分享

迷你论坛–darksheep


利用腾讯提供的免费基础套餐,为社团部门提供免费建立自己部门专属小论坛程序的机会,只需要注册账户,更改代码两处环境与id为自己账户值,无需提交审核上线即可供30人免费使用,且管理员可以审核谁可以查看此论坛内容


面向人群

本小程序是一个简陋的论坛小程序,这是一个网页端社交bbs逐渐被微信替代的时代,但是利用微信群进行交流在讨论多件事情的信息容易混杂,且存在被其他消息刷掉的情况

本微信小程序致力于通过无干扰项的简陋论坛,弥补社团微信群交流的不足

人群:30人以下的社团部门或部门内具体小组:

30人即未上线情况下,小程序的体验者+项目成员人数

部门可以使用云开发提供的免费配额运行代码获得自己部门专属的微信小程序

在避免经过严格的论坛类程序上线审核的同时,保证了数据的独立安全性

主要功能

  • 删帖发帖
  • 发送评论
  • 给喜欢的帖子点赞
  • 根据评论时间排列帖子

介绍视频

云函数代码

await db.collection('comment_collection').add({
      data: {
        postid: event.postid,//评论对应的post
        openid: event.userInfo.openId,
        name: event.name,//评论者名字
        avatarUrl: event.avatarUrl,//评论者头像
        time: timestamp,//评论发生的时间
        content: event.content//评论内容
      }
    })

try {
    const timestamp = Date.now()
    // 更新帖子最后更新时间
    await db.collection('post_collection').where({
      _id: event.postid
    })
    .update({
      data: {
        update_time: timestamp
      }
    })

exports.main = async (event, context) => {
  return {
    comment_list: await db.collection('comment_collection').where({
      postid: event.postid
    }).orderBy('time', 'desc').get(),

  }
}

// 获取帖子列表
    postlist: await db.collection('post_collection').field({
      _id: true,
      content: true,
      watch_count: true,
      update_time: true,
      author_name: true,
      is_anonymous: true,
    }).orderBy('update_time', 'desc').get()//降序排列

  }

主页:帖子列表

<block wx:for="{{postlist}}" wx:key="*this">
    <view class="divLine"></view>
    <!--block不能设置css-->
    <view class='post_list' bindtap='onItemClick' data-postid='{{item._id}}'>
        <!--postId会默认转成lowercase-->
        <view>
            <text class='title'>{{item.content}}</text>
        </view>
        <view class="layout_horizontal">
            <view>
                <text class='extra_info extra_info_start'>{{item.is_anonymous?'匿名':item.author_name}}</text>
            </view>
            <view>
                <text class='extra_info watch_count'>{{item.watch_count}}人浏览</text>
            </view>
        </view>
    </view>
</block>

<image bindtap="chooseimage" class="moment_img new_post" bindtap="newPost" src='../../images/newPost.png'></image>

帖子详情页

<view class='postdetail' wx:if='{{contentLoaded && imagesLoaded && commentLoaded}}'>
    <view class='title_area'>
        <view class='avatar_area'>
            <image class='avatar' src="{{detail.is_anonymous?'../../images/headimg.jpg':detail.author_avatar_url}}"/>
        </view>
        <view class='text_area'>
            <view>
                <text class='author_name'>{{detail.is_anonymous?'匿名':detail.author_name}}</text>
            </view>
            <view class='publish_time'>
                <text class='publish_time'>发表于{{detail.publish_time}}</text>
            </view>
        </view>
    </view>
    <view class='content'>
        <view class='text'>
            <text>{{detail.content}}</text>
        </view>
        <view class='image_area'>
            <view class='image' wx:for='{{imageUrls}}' wx:key='*this'>
                <image src='{{item}}' mode='widthFix'></image>
            </view>
          
        </view>  
          <view class="wow" bindtap="wowtap" >
                   <image src='/images/collected.png' style="height:40px;width:40px" wx:if="{{wow}}"></image>
                   <image src='/images/uncollect.png' style="height:40px;width:40px"wx:else ></image>  
                 </view>
    </view>
    
           
   <view>
    <button wx:if="{{detail.author_id==openid}}" catchtap="delclick">删除</button>
    </view>
    <view style='background: red' wx:if='{{false}}'>数据展示区:浏览数,关注数,评论数等等</view>
    <view class='all_comment' style='background: #EDEDED' wx:if='{{imagesLoaded}}'>
        <text class='all_comment_text'>全部评论</text>
    </view>
    <view class='all_comment_list'>
        <view class='comment_list' wx:for="{{comments}}" wx:key="this">
            <view class='comment_item'>
                <view class='comment_item_head'>
                    <view class='avatar_area'>
                        <image class="userinfo-avatar avatar" src="{{item.avatarUrl}}" background-size="cover"></image>
                    </view>
                    <view class='text_area'>
                        <view>
                            <text class='author_name comment_author_name'>{{item.name}}</text>
                        </view>
                        <view class='publish_time'>
                            <text class='publish_time'>发表于{{item.time}}</text>
                        </view>
                    </view>
                </view>
                <view>
                    <text class='comment_content'>{{item.content}}</text>
                </view>
            </view>
            <view class='divLine' wx:if='{{index < comments.length-1}}'></view>
        </view>
    </view>
    <!-- 评论框 -->
    <view class='send_comment_container'>
        <view class='input-box'>
            <textarea class="textarea" id="inputComment" value='{{comment_value}}' bindinput='input' placeholder="请输入你的看法" fixed="true" maxlength="-1" show-confirm-bar="false" cursor-spacing="15" auto-height="true"/>
            <view class='send' bindtap='sendComment'>发送</view>
        </view>
    </view>
</view>

下载地址:GitHub

2 回复

介绍视频

回到顶部