小程序云开发实现微信发说说

设计

  • 期末作业

界面设计以及功能介绍

  • 这是一个基于小程序云开发的日记记录小程序，可以记录用户的基本信息，发表日记，并且展示给其他用户观看，用户可以自己选择自己感兴趣的话题进行分享。

首页

image-20200712142615752

  • 首页有一个轮播图和一个自定义组件构成，轮播图数据由云函数获取云数据数据，点击热门话题即可跳转到话题详情页。正在努力让热门话题变成可以从数据库获取每个话题的日记总数进行对比，然后将总是大的话题渲染展示。

发现

日记

image-20200712142632252

  • 发现页面选择日记，可以展示云数据库里所有日记数据，用户可以点击右下角的+号进入发表页面，点击评论可以跳转到日记详情页面。当前已实现日记页面的基本展示，但是还欠缺对点赞，评论，分享人数的动态统计。

关注用户

image-20200712142659828

  • 发现页面选择用户，可以在这里查看到其他用户，点击用户头像和姓名可以得到用户的详情，用户发送过的日记以及性别头像信息。

话题

image-20200712142646703

  • 发现页面选择话题，可以在这里查看到所有话题的信息，点击话题的去看看可以去得到这个话题分类下的所有日记信息。

消息

image-20200712142715384

  • 消息页面是打算设计聊天室群聊以及一对一聊天，目前正在开发中。

个人中心

image-20200712142736735

  • 个人中心用户可以进行登录，这里我的日记可以点击跳转页面，查看以前发送的日记，我的关注，可以查看我关注的用户和话题，我的点赞可以查看我点赞的日记，我的收藏可以查看我收藏的日记

我的日记

image-20200712142758361

  • 我的日记页面按照时间线对自己所发送的日记进行查看，最上面用户信息为设置固定样式。

编辑个人信息

image-20200712142817759

  • 标签详情

标签详情

image-20200712142835407

  • 标签详情固定标签的基本信息，下面放置标签为该标签的所有日记信息，按照时间先后在页面上渲染。

发表日记

  • 发表页面，对输入的文字进行保存若为空则不能发表，点击图片上传按钮，可以对图片上传并进行云存储，继而保存到云数据库中，标签信息完全渲染，点击发表将文字，图片，标签信息都存到云数据库中。

日记详情

image-20200712142915496

  • 日记详情用轮播图对图片显示，可以点击滑动预览图片，点击去看看可以查看话题所对应的日记信息。

数据库设计

biaoqianinfo

image-20200712154518796

shouyelunbo

image-20200712154530029

userinfo

image-20200712154605763

userriji

image-20200712154630860

userpinglun

image-20200712154702791

usersearch

image-20200712154717425

部分代码展示

云函数获取用户日记信息

// 云函数入口文件
const cloud = require('wx-server-sdk')

cloud.init()

const db = cloud.database();
let $ = cloud.database().command.aggregate;
// 云函数入口函数
exports.main = async (event, context) => {
    return cloud.database().collection("userriji").aggregate()
        .sort({
            rijiid: -1
        })
        .lookup({
            from: "userinfo", //把userinfo表关联上
            localField: '_openid', //userriji表的关联字段
            foreignField: '_openid', //userinfo表的关联字段
            as: 'userrijiinfo' //匹配的结果作为uapproval相当于起个别名
        })
        .lookup({
            from: "biaoqianinfo",
            localField: 'biaoqianname',
            foreignField: 'biaoqianname',
            as: 'userrijibiaoqian'
        })
        .replaceRoot({

            //replaceRoot指定一个已有字段作为输出的根节点，也可以指定一个计算出的新字段作为根节点。
            //newRoot  代表新的根节点
            // newRoot: $.mergeObjects([$.arrayElemAt(['$uapproval', 0]), $.arrayElemAt(['$lapproval', 0]), '$$ROOT'])
            newRoot: $.mergeObjects([$.arrayElemAt(['$userrijiinfo', 0]), $.arrayElemAt(['$userrijibiaoqian', 0]), '$$ROOT'], )

            //mergeObjects 累计器操作符
            //$.mergeObjects([params1,params2...]) 可以合并多个元素
            //$.arrayElemAt(['$uapproval', 0]), '$$ROOT']
            //就是取uapproval数组的第一个元素，与原始的根融合在一起

        })
        .project({
            //project把指定的字段传递给下一个流水线，指定的字段可以是某个已经存在的字段，也可以是计算出来的新字段
            userrijiinfo: 0,
            userrijibiaoqian: 0
        }).end({
            success: function (res) {
                return res;
            },
            fail(error) {
                return error;
            }
        })
}

日记详情wxml

<view class="yonghujieshao">
    <view class="yonghutouxiang">
        <image src="{{detailriji.userInfo.avatarUrl}}"></image>
        <block wx:if="{{detailriji.userInfo.gender==1}}">
            <view class="iconfont icon-nan"></view>
        </block>
        <block wx:else="{{detailriji.userInfo.gender==1}}">
            <view class="iconfont icon-nv"></view>
        </block>
    </view>
    <view class="yonghujieshao2">
        <view class="yonghuname">{{detailriji.userInfo.nickName}}</view>
        <view class="shijian_liulanjilu">{{detailriji.time}}</view>
    </view>
    <button class="yonghuguanzhu">关注</button>
</view>
<!-- 然后是轮播图展示图片 -->
<view class="huatixinxi">
    <block wx:if="{{detailriji.tupian[0]}}">
        <view class="huatitupian">
            <swiper class="swiper" circular="true" autoplay="true" interval="6000" duration="300" indicator-dots="true" indicator-active-color="#1296db">
                <block wx:for="{{detailriji.tupian}}">
                    <swiper-item>
                        <image src="{{item}}" data-src="{{item}}" data-list="{{detailriji.tupian}}" bindtap="previewImg" class="slide-image"></image>
                    </swiper-item>
                </block>
            </swiper>
        </view>
    </block>
    <view class="huatiwenzi">
        <text>{{detailriji.wenzi}}</text>
    </view>


    <!-- 已经有的话题进行轮播展示 -->
    <view class="biaoqianquduan1">
        <view class="biaoqianquanbu1">
            <image class="biaoqiantupian1" src="{{detailriji.biaoqianimg}}"></image>
            <view class="biaoqianwenzi1">{{detailriji.biaoqianname}}</view>
            <navigator class="biaoqiantiaozhuan1" url="/pages/biaoqiandetail/biaoqiandetail?biaoqianname={{detailriji.biaoqianname}}">去看看>
            </navigator>
        </view>
    </view>



    <view class="xiaoxiicon">
        <!-- 点赞 -->
        <view class="xiaoxifenge">
            <view class="iconfont icon-aixin"></view>
            <view>点赞</view>
        </view>
        <!-- 评论 -->
        <view class="xiaoxifenge">
            <view class="iconfont icon-pinglun"></view>
            <view>评论</view>
        </view>
        <!-- 分享 -->
        <view class="xiaoxifenge">
            <view class="iconfont icon-share"></view>
            <view>转发</view>
        </view>
    </view>
</view>

<view class="yonghupinglun">
    <view class="pinglun1">全部评论(2)</view>
    <view class="pinglunxiangqing">
        <view class="yonghutouxiang1">
            <image src=""></image>
        </view>
        <input class="input" placeholder="    你的评论是对他人最好的鼓励!"></input>
    </view>
</view>

<!-- 文字内容展示 -->

日记详情js

Page({

    /**
     * 页面的初始数据
     */
    data: {
        // huatidetail: {},
        // huatidetailtime: ""
        detailriji: {}
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function(options) {
        let that = this;
        console.log("界面传递options", options);
        // let huatidetails = JSON.parse(options.huatidetail);
        wx.cloud.callFunction({
            name: "getUserrijis",
            success(res) {
                console.log("界面传递options", options.useropenid);
                console.log("界面传递options", options.huatidetailtime);
                //获得数据库里的数据
                console.log("请求云函数getUserrijis数据成功", res.result.list);
                let list = res.result.list;
                console.log("两重筛选之前的数据", list);
                list = list.filter((item) => {
                    if ((item._openid == options.useropenid) && (item.rijiId == options.huatidetailtime)) {
                        return true;
                    } else {
                        return false;
                    }
                });
                console.log("两重筛选之后的数据", list);
                that.setData({
                    detailriji: list[0]
                })
            },
            fail(err) {
                console.log("请求云函数getUserrijis失败", err);
            }
        })
    },
    previewImg: function(event) {
        var src = event.currentTarget.dataset.src; //获取data-src
        var imgList = event.currentTarget.dataset.list; //获取data-list
        //图片预览
        wx.previewImage({
            current: src, // 当前显示图片的http链接
            urls: imgList // 需要预览的图片http链接列表
        })
    }
})
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/dongxuelove/p/14155109.html