Message function to achieve through the development of micro-letter cloud applet
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 micro-channel applet for parsing the date
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
}
Authorization page 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")
}
})
}
})
Cloud cloud development login function index.js
const cloud = require('wx-server-sdk')
cloud.init()
// 云函数入口函数
exports.main = async (event, context) => {
const wxContext = cloud.getWXContext()
return {
openid: wxContext.OPENID
}
}
Cloud development getlogs cloud function 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)
}
}
Cloud development creatlog cloud function 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)
}
}
Create Collection
Database development in the cloud to create a set of logs
final renderings:
Last write a navigation bar app.json on it
and finally painted four pictures ui impress Ha ha ha
the first time with a cloud development, seek the guidance of a new eruption QAQ