マイクロ手紙クラウドアプレットの開発を通じて達成するために、メッセージ機能

index.wxml

<view>
<view><textarea class="zhuti" type="textarea" name="Label" confirm-type="done" bindinput="liuyan"></textarea></view>
  
  <button type="primary" bindtap="addLabel">留言</button>
</view>
<block wx:for="{{logs}}" wx:key="key" name="block">
  <view class="userinfo">
  <view > 
    <image class="userinfo-avatar" src="{{item.pic}}"></image>
  </view>
  <text class="name">{{item.name}}说:</text></view>
  <text class="text">{{item.label}}</text>
  <view>
  <text class="time">{{item.date}}</text>
  </view>
</block>

index.wxss

.zhuti{
  display: flex;
  font-size: 20px;
  height: 80px;
  width: 100%;
  border: 1px solid #d0d0d0;  
  border-radius: 10rpx;  
}
.text{
  font-size:20px;
  border: 1px solid #d0d0d0;  
  border-radius: 10rpx; 
  width: 100%;
  text-overflow:ellipsis;
  display: -webkit-box;
  word-break: break-all;
}
.name{
  font-size:20px;
}
.block{
  display: flex;
  flex-direction:row-reverse;
}
.delet{
  color:greenyellow;
  size:10px;
}
.userinfo{
  margin-top: 40rpx;
  height: 140rpx;
  width: 100%;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-left: none;
  border-right: none;
  display: flex;
  flex-direction: row;
  align-items: center;
  transition: all 300ms ease;
}

.userinfo-avatar {
  width: 100rpx;
  height: 100rpx;
  margin: 20rpx;
  border-radius: 50%;
  background-size: cover;
  background-color: white;
}

.userinfo-avatar:after {
  border: none;
}

.userinfo-nickname {
  font-size: 32rpx;
  color: #007aff;
  background-color: white;
  background-size: cover;
}

.userinfo-nickname::after {
  border: none;
}

index.js

const util = require('../../utils/util')
Page({
  data:{
      Label:null,
      logs:[]
  },
  liuyan:function(e){
    this.data.Label=e.detail.value;
  },
  getlogs:function(){
    const that = this
    const ui = wx.getStorageSync("userinfo")
    if(!ui.openid)
    {
      wx.switchTab({
        url: '/pages/home/home',
      })
    }
    else{
      wx.cloud.callFunction({
        name:"getlogs",
        success:res=>{
          
          that.setData({
            logs:res.result.data.map(log=>{
              var date = util.formatTime(new Date(log.date))
              log.date=date
              return log
            })
          })
        },
        fail:res=>{
          console.log("res",res)
        }
      })
    }
    
  },
  addLabel(){
    
    const that=this
    var a = that.data.Label
    const ui = wx.getStorageSync('userinfo')
    if(!ui.openid){
      wx.switchTab({
        url: '/pages/home/home',//如果没有授权则跳转至授权页面
      })
    }
    else{
      wx.cloud.callFunction({
        name:"creatlog",
        data:{
          label:a,
          date:Date.now(),
          openid:ui.openid,
          name:ui.nickName,
          avatar:ui.avatarUrl
        }
      })
      that.onShow();
    }
    
  }, 
  onLoad:function(){
    
  },
  onShow: function () {
    this.getlogs()
    } 
  })

日付を解析するためのマイクロチャネルアプレットをutil.js

const formatTime = date => {
  const year = date.getFullYear()
  const month = date.getMonth() + 1
  const day = date.getDate()
  const hour = date.getHours()
  const minute = date.getMinutes()
  const second = date.getSeconds()

  return [year, month, day].map(formatNumber).join('-') + ' ' + [hour, minute, second].map(formatNumber).join(':')
}

const formatNumber = n => {
  n = n.toString()
  return n[1] ? n : '0' + n
}

module.exports = {
  formatTime: formatTime
}

認証ページhome.wxml

<view class="container">
<view class="userinfo">
  <view > 
    <image class="userinfo-avatar" src="{{userinfo.avatarUrl}}"></image>
  </view>
  <text>{{userinfo.nickName}}</text>
</view>
</view>
<button wx:if="{{!openid}}" open-type="getUserInfo" bindgetuserinfo="login">授权登录</button>

home.wxss

/* pages/home/home.wxss */
.userinfo {  
  position: relative;  
  width: 750rpx;  
  height: 320rpx;  
  color: black;  
  display: flex;  
  flex-direction: column;  
  align-items: center;  
}  
.userinfo-avatar {  
  overflow:hidden;  
  display: block;  
  width: 160rpx;  
  height: 160rpx;  
  margin: 20rpx;  
  margin-top: 50rpx;  
  border-radius: 50%;  
  border: 2px solid #fff;  
  box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);  
}  

home.js

Page({
  data: {
    userinfo:{},
    openid:null
  },
  onLoad: function() {
    const ui=wx.getStorageSync('userinfo')//获取key为"userinfo"的缓存信息
    this.setData({
      userinfo:ui,
      openid:ui.openid
    })
  },
  onShow:function(){
    
  },
  login:function(e){
    var that=this
    wx.cloud.callFunction({//调用名为“name"的云函数
      name:"login",
      success:res=>{
        
        that.setData({
          openid:res.result.openid,
          userinfo:e.detail.userInfo
        })
        that.data.userinfo.openid=that.data.openid
        console.log(that.data.userinfo)
        wx.setStorageSync('userinfo', that.data.userinfo)//把userinfo放到缓存中，key为userinfo
      },
      fail:res=>{
        console.log("fail")
      }
    })
  } 
})

クラウドクラウド開発ログイン機能index.js

const cloud = require('wx-server-sdk')

cloud.init()

// 云函数入口函数
exports.main = async (event, context) => {
  const wxContext = cloud.getWXContext()

  return {
    openid: wxContext.OPENID
  }
}

クラウド開発GETLOGSは、関数index.jsを曇らせます

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

cloud.init()
const db = cloud.database()
// 云函数入口函数
exports.main = async (event, context) => {
      try{
        return await db.collection('logs').orderBy('date','desc').get()
      }catch(e){
        console.log(e)
      }
}

クラウド開発creatlogクラウド機能index.js

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

cloud.init()
const db = cloud.database()
// 云函数入口函数
exports.main = async (event, context) => {
  try{
    return await db.collection('logs').add({
      data:{
        label:event.label,
        date:event.date,
        openid:event.openid,
        name:event.name,
        pic:event.avatar
      }
    })
  }catch(e){
    console.log(e)
  }
}

コレクションを作成します。

クラウドログのセットを作成するにはデータベース開発

：最終レンダリング

最終書き込み、その上にナビゲーションバーのapp.json
、最終的に4枚の絵UI IMPRESSハッハッハ塗装

クラウド開発で初めて、新たな噴火の指導を求めますQAQ