0.前言

本着做一个万能墙去开发一个小程序，
基本逻辑，前端完成了，删除、回复消息功能还没做。。

然后发现社交功能不对个人主体开放，上线不了只能体验。
到此记，2020.10.24

1.基础

学习过程：

学堂在线相关课程的学习
微信官方文档的查看
动手实践，百度

相关网站：

微信开发管理平台：https://mp.weixin.qq.com
微信官方文档：https://developers.weixin.qq.com/miniprogram/dev/framework/

基本每个界面都有以下4个文件：wxml , wxss , js , json

部分代码：

// 发送消息到云端数据库的代码

const app=getApp()
const db=wx.cloud.database()
//省略其它
  send: function(e) {
    var that=this
    console.log(that.data.detail)
    console.log(app.globalData.openid)
    if (that.data.detail==""){
      wx.showModal({
        title: '提示',
        content: '提交内容不能为空',
        showCancel: false
      })
    }else{
    db.collection('info').add({
      data:{
        content: that.data.detail,
        total_likes: 0,
        face_url: app.globalData.userInfo.avatarUrl,
        send_time: new Date().toString(),
        username: app.globalData.userInfo.nickName
      },
      success:function(res){
        wx.showModal({
          title: '提示',
          content: '恭喜提交成功',
          showCancel: false
        })
      }
    })}
  },

// 从云端数据库获取消息的代码

const db=wx.cloud.database()
Page({
  data: {
    list: []
  },
  onLoad: function(options) {
    var that =this
    db.collection('info').get({
      success: function(res) {
        that.setData({ list: res.data})
      }
    })
  },
})

<!--将消息便于查看的html-->

<scroll-view class='scbg' scroll-y='true'>
<block wx:for="{{list}}" wx:for-item="itemName" wx:for-index="id">
  <view class='box'>
    <view class='firstblock'>
      <image class='touxiang' src='{{itemName.face_url}}'></image>
      <view class='person'>
        <view class='name'>
          <text class='showname'>{{itemName.username}}</text>
        </view>
        <view class='tel'>
          <text class='showtime'>{{itemName.send_time}}</text>
        </view>
      </view>
    </view>
    <view class='secondblock'>
      <text class='content'>{{itemName.content}}</text>
    </view>
    <view class='thirdblock'>
      <image class='like' src='/images/like.png'></image>
      <text class='num'>{{itemName.total_likes}}</text>
    </view>
  </view>
</block>
</scroll-view>