Name	Name	Last commit message	Last commit date
parent directory ..
README.md	README.md

甜甜圈论坛

前言

虽然不会后台开发，但是也想自己做项目，正好云开发出现了。开发者可以使用云开发开发微信小程序、小游戏，无需搭建服务器，即可使用云端能力。社区作为一个交流的平台，可以通过发布自己、别人喜欢的文字、图片的方式进行交流分享。刚学完云开发，正好可以用社区小程序项目练练手~

#【社区小程序】功能实现

首页【广场】

显示用户发布的内容
管理员发布的一些教程

消息【发布】

发布图文
水平图片的滑动显示

个人中心【我的】

显示用户的登录信息
用户的收藏列表
发布历史
邀请好友
产品意见

一、首页【广场】

显示用户发布的内容
管理员发布的一些教程

实现的效果

实现要点

1.WXML 不同类别数据的显示

通过 if-elif-else 实现，在 wxml 文件中通过 <block></block> 渲染，因为它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。也就是说可以通过属性来控制页面是否要渲染这部分的内容，可以减少页面渲染时间。

2.云开发数据的获取

先开通云开发功能，参考官方文档，然后在创建项目的时候勾选上 使用云开发模板（看个人吧，我直接使用后点击项目中的 login ）就可以获取到用户的 oppenid ，之后就可以使用云数据库了。

云开发登录：

云数据的获取

/**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    console.log('onload');
    this.getData(this.data.page);
    },
  /**
   * 获取列表数据
   * 
   */
  getData: function(page) {
    var that = this;
    console.log(="page--->" + page);
    const db = wx.cloud.database();
    // 获取总数
    db.collection('topic').count({
      success: function(res) {
        that.data.totalCount = res.total;
      }
    })
    // 获取前十条
    try {
      db.collection('topic')
        .where({
          _openid: 'oSly***********vU1KwZE', // 填入当前用户 openid
        })
        .limit(that.data.pageSize) // 限制返回数量为 10 条
        .orderBy('date', 'desc')
        .get({
          success: function(res) {
            // res.data 是包含以上定义的两条记录的数组
            // console.log(res.data)
            that.data.topics = res.data;
            that.setData({
              topics: that.data.topics,
            })
            wx.hideNavigationBarLoading();//隐藏加载
            wx.stopPullDownRefresh();

          },
          fail: function(event) {
            wx.hideNavigationBarLoading();//隐藏加载
            wx.stopPullDownRefresh();
          }
        })
    } catch (e) {
      wx.hideNavigationBarLoading();//隐藏加载
      wx.stopPullDownRefresh();
      console.error(e);
    }
  },

云数据的添加：

/**
   * 保存到发布集合中
   */
  saveDataToServer: function(event) {
    var that = this;
    const db = wx.cloud.database();
    const topic = db.collection('topic')
    db.collection('topic').add({
      // data 字段表示需新增的 JSON 数据
      data: {
        content: that.data.content,
        date: new Date(),
        images: that.data.images,
        user: that.data.user,
        isLike: that.data.isLike,
      },
      success: function(res) {
        // res 是一个对象，其中有 _id 字段标记刚创建的记录的 id
        // 清空，然后重定向到首页
        console.log("success---->" + res)
        // 保存到发布历史
        that.saveToHistoryServer();
        // 清空数据
        that.data.content = "";
        that.data.images = [];

        that.setData({
          textContent: '',
          images: [],
        })

        that.showTipAndSwitchTab();

      },
      complete: function(res) {
        console.log("complete---->" + res)
      }
    })
  },

3.数据列表的分页

主要就是定义一个临时数组存放加载上来的数据，然后通过传递给对象，最后传递到布局中去。

/**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function() {
    var that = this;
    var temp = [];
    // 获取后面十条
    if(this.data.topics.length < this.data.totalCount){
      try {
        const db = wx.cloud.database();
        db.collection('topic')
          .skip(5)
          .limit(that.data.pageSize) // 限制返回数量为 5 条
          .orderBy('date', 'desc')    // 排序
          .get({
            success: function (res) {
              // res.data 是包含以上定义的两条记录的数组
              if (res.data.length > 0) {
                for(var i=0; i < res.data.length; i++){
                  var tempTopic = res.data[i];
                  console.log(tempTopic);
                  temp.push(tempTopic);
                }

                var totalTopic = {};
                totalTopic =  that.data.topics.concat(temp);

                console.log(totalTopic);
                that.setData({
                  topics: totalTopic,
                })
              } else {
                wx.showToast({
                  title: '没有更多数据了',
                })
              }

            },
            fail: function (event) {
              console.log("======" + event);
            }
          })      
      } catch (e) {
        console.error(e);
      }
    }else{
      wx.showToast({
        title: '没有更多数据了',
      })
    }

  },

二、消息【发布】

发布图文
水平图片的滑动显示（效果不是很好，可以改为九宫格实现）

发布页面效果如下：

分析如何实现

导航栏的实现很简单就不说了，可参考我之前的文章
重点是中间的 ② 是内容区域
区域三是功能操作区

内容区域的实现

第一个是文本区域
第二个是水平的图片展示区域

在图片的右上角有关闭按钮，这里使用的是 icon 组件。

主要的实现代码如下：

<view class="content">
  <form bindsubmit="formSubmit">
    <view class="text-content">
      <view class='text-area'>
        <textarea name="input-content" type="text" placeholder="说点什么吧~" placeholder-class="holder" value="{{textContent}}" bindblur='getTextAreaContent'></textarea>
      </view>
    </view>
    <scroll-view class="image-group" scroll-x="true">
      <block wx:for='{{images}}' wx:for-index='idx'>
      <view>
        <image src='{{images[idx]}}' mode='aspectFill' bindtap="previewImg"></image>
        <icon type='clear' bindtap='removeImg'  data-index="{{idx}}" ></icon>
      </view>
      </block>
    </scroll-view>
    <view class='btn-func'>
      <button class="btn-img" bindtap='chooseImage'>选择图片</button>
      <button class="btn" formType='submit'  open-type="getUserInfo">发布圈圈</button>
      <!-- <image hidden=''></image> -->
    </view>
  </form>

</view>

布局样式如下：

.content {
  height: 100%;
  width: 100%;
}

textarea {
  width: 700rpx;
  padding: 25rpx 0;
}

.text-content {
  background-color: #f3efef;
  padding: 0 25rpx;
}

.image-group {
  display: flex;
  white-space: nowrap;
  margin-top: 30px;
}

.image-group view{
  display: inline-block;
  flex-direction: row;
  width: 375rpx;
  height: 375rpx;
  margin-right: 20rpx;
  margin-left: 20rpx;
  background-color: #cfcccc;
}

.image-group view image{
  width: 100%;
  height: 100%;
  align-items: center;
}

.image-group view icon{
  display: inline-block;
  vertical-align: top;
  position: absolute
}
.
btn-func {
  display: flex;
  flex-direction: column;
  width: 100%;
  position: absolute;
  bottom: 0;
  margin: 0 auto;
  align-items: center;
}

.btn-img {
  width: 220px;
  height: 45px;
  line-height: 45px;
  margin-top: 20px;
  margin-bottom: 20px;
  background-color: rgb(113, 98, 250);
  color: #fff;
  border-radius: 50px;
}

.btn {
  width: 220px;
  height: 45px;
  line-height: 45px;
  background-color: #d50310;
  color: #fff;
  border-radius: 50px;
  margin-bottom: 20px;
}

页面布局之后就该从 js 中去处理数据了，在 js 中主要实现的功能有：

文本内容的获取
图片的选择
图片的阅览
图片的删除
将结果发布到云数据库中

1.文本内容的获取

/**
   * 获取填写的内容
   */
  getTextAreaContent: function(event) {
    this.data.content = event.detail.value;
  },

2.图片的选择

/**
   * 选择图片
   */
  chooseImage: function(event) {
    var that = this;
    wx.chooseImage({
      count: 6,
      success: function(res) {
        // tempFilePath可以作为img标签的src属性显示图片
        const tempFilePaths = res.tempFilePaths

        for (var i in tempFilePaths) {
          that.data.images = that.data.images.concat(tempFilePaths[i])
        }
        // 设置图片
        that.setData({
          images: that.data.images,
        })
      },
    })
  },

3.图片的预览

// 预览图片
  previewImg: function(e) {
    //获取当前图片的下标
    var index = e.currentTarget.dataset.index;

    wx.previewImage({
      //当前显示图片
      current: this.data.images[index],
      //所有图片
      urls: this.data.images
    })
  },

4.图片的删除

/**
   * 删除图片
   */
  removeImg: function(event) {
    var position = event.currentTarget.dataset.index;
    this.data.images.splice(position, 1);
    // 渲染图片
    this.setData({
      images: this.data.images,
    })
  },

5.发布内容到数据库中

数据发布到数据中，需要先开启云开发，然后在数据库中创建集合也就是表之后就是调用数据库的增删改查API即可。

/**
   * 添加到发布集合中
   */
  saveToHistoryServer: function(event) {
    var that = this;
    const db = wx.cloud.database();
    db.collection('history').add({
      // data 字段表示需新增的 JSON 数据
      data: {
        content: that.data.content,
        date: new Date(),
        images: that.data.images,
        user: that.data.user,
        isLike: that.data.isLike,
      },
      success: function(res) {
        // res 是一个对象，其中有 _id 字段标记刚创建的记录的 id
        console.log(res)
      },
      fail: console.error
    })
  },

三、个人中心【我的】

【显示用户的登录信息】主要就是调用小程序接口，获取用户的微信公开信息进行展示
【用户的收藏列表】获取数据库中的收藏列表进行展示
【发布历史】在发布页面，当发布成功将数据存到发布历史表中，需要的时候获取该表的数据进行展示
【邀请好友】调用小程序的分享接口，直接分享给微信群，或者个人
【产品意见】一个类似于发布页的页面，实现思路和发布页实现是一样的。

实现的效果

实现分析

1.要实现的效果

在用户进入个人中心，直接弹出获取用户信息弹窗
显示圆形的用户头像

2.授权弹窗

官方获取用户信息文档调整为优化用户体验，使用 wx.getUserInfo 接口直接弹出授权框的开发方式将逐步不再支持。从2018年4月30日开始，小程序与小游戏的体验版、开发版调用 wx.getUserInfo 接口，将无法弹出授权询问框，默认调用失败。正式版暂不受影响。

也就是以前的 wx.getUserInfo 不直接弹出授权窗口了，而且在新版中调用会直接返回 fail ，现在的做法呢就是通过点击一个 button 去实现用户授权功能。

文档中说明了有两种方式能够获取用户信息。

一个是利用 <open-data> 获取公开的用户信息：

<open-data type="userNickName" lang="zh_CN"></open-data>
<open-data type="userAvatarUrl"></open-data>
<open-data type="userGender" lang="zh_CN"></open-data>

另一个是利用 button 组件将 open-type 指定为 getUserInfo 类型：

<!-- 需要使用 button 来授权登录 -->
  <button wx:if="{{canIUse}}" open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo">授权登录</button>
  <view wx:else>请升级微信版本</view>
Page({
  data: {
    canIUse: wx.canIUse('button.open-type.getUserInfo')
  },
  onLoad: function() {
    // 查看是否授权
    wx.getSetting({
      success (res){
        if (res.authSetting['scope.userInfo']) {
          // 已经授权，可以直接调用 getUserInfo 获取头像昵称
          wx.getUserInfo({
            success: function(res) {
              console.log(res.userInfo)
            }
          })
        }
      }
    })
  },
  bindGetUserInfo (e) {
  // 获取到用户信息
    console.log(e.detail.userInfo)
  }
})

3.中实现圆形头像

<view class='amountBg'>
  <view class='img'>
    <open-data type="userAvatarUrl"></open-data>
  </view>
  <view class='account'>
    <view class='nick-name'>
      <open-data type="userNickName" lang="zh_CN"></open-data>
    </view>
    <view class='address'>
      <open-data type="userCountry" lang="zh_CN"></open-data>·
      <open-data type="userProvince" lang="zh_CN"></open-data>·
      <open-data type="userCity" lang="zh_CN"></open-data>
    </view>
  </view>
</view>

css 样式如下：

.amountBg {  
  display: flex;
  flex-direction: row;
  height: 100px;
  background-color: #5495e6;
  align-items: center;
}

.img {  
  overflow: hidden;
  display: block;
  margin-left: 20px;
  width: 49px;
  height: 49px;
  border-radius: 50%;
}

.account {
  width: 70%;
  color: #fff;
  margin-left: 10px;
  align-items: center;
}

.nick-name{
  font-family: 'Mcrosoft Yahei';
  font-size: 16px;
}

.address{
  font-size: 13px;
}
.nav {
  width: 15px;
  color: #fff;
}

可能存在的一些问题

其他用户发布的内容，有时候显示不出来？将数据库的权限设置为全部人可见。

发布内容之后返回首页没有自动刷新？在广场首页 onShow 的时候获取数据库的数据进行展示。

clone 源码后运行不起来？需要在自己的云数据库中创建对应的表。

源码链接

https://github.com/dongxi346/doughnut

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

doughnut（甜甜圈论坛）

doughnut（甜甜圈论坛）

README.md

甜甜圈论坛

前言

一、首页【广场】

实现的效果

实现要点

1.WXML 不同类别数据的显示

2.云开发数据的获取

3.数据列表的分页

二、消息【发布】

发布页面效果如下：

分析如何实现

内容区域的实现

1.文本内容的获取

2.图片的选择

3.图片的预览

4.图片的删除

5.发布内容到数据库中

三、个人中心【我的】

实现的效果

实现分析

1.要实现的效果

2.授权弹窗

3.中实现圆形头像

可能存在的一些问题

源码链接

Files

doughnut（甜甜圈论坛）

Directory actions

More options

Directory actions

More options

Latest commit

History

doughnut（甜甜圈论坛）

Folders and files

parent directory

README.md

甜甜圈论坛

前言

一、首页【广场】

实现的效果

实现要点

1.WXML 不同类别数据的显示

2.云开发数据的获取

3.数据列表的分页

二、消息【发布】

发布页面效果如下：

分析如何实现

内容区域的实现

1.文本内容的获取

2.图片的选择

3.图片的预览

4.图片的删除

5.发布内容到数据库中

三、个人中心【我的】

实现的效果

实现分析

1.要实现的效果

2.授权弹窗

3.中实现圆形头像

可能存在的一些问题

源码链接