Seventh Week Meeting Minutes
Preface
This week we held our second discussion, in which we focused on the overall task and individual division of work for the seventh week. We've divided this week's work into five sections, which are detailed below.
1. Photos of division of work among members and regular meetings
1. Membership Division
Based on the feature description document for the sixth week, we decided to divide this week into the following five parts:
(1) User login (Han Yuhao)
(2) Rights Management (Wang Zhixin)
(3) Publish search/lost/retrieve information (Hu Wenfei)
(4) Comment Publishing (Feng Chenyang)
(5) Search queries (Li Xianwu)
Everyone knows about the WeChat developer tools and is familiar with the language to be used in the development. (The relevant data has been sent to the group) Five functions, each person completes one, and completes the implementation of the corresponding page above. If we encounter problems, we will always communicate in the QQ group, and everyone will work together to solve problems.
2. Regular meeting photos (photographer: Li Xianwu)
2. Everyone's code,
1. User login, rights management
(1) User login (Han Yuhao) 2021.11.8
Personal interface
WXML file
<!--pages/userMsg/userMsg.wxml-->
<!-- Avatar username -->
<view class='avatar-backgrond'>
<view class='userInfo'>
<image src="{{userInfo.avatarUrl}}" class='userinfo-avatar'> </image>
</view>
<view class='username'>
<text >{{userInfo.nickName}}</text>
</view>
</view>
<button wx:if="{{!userInfo}}" bindtap="login">Click Login</button>
<button wx:if="{{userInfo}}" bindtap="logout">Log out</button>
<view class='function' catchtap='toMySend'>
<text>My Release</text>
</view>
<!--Split Line -->
<view class='divLine'></view>
<!-- Navigation bar-->
<view class='tabs'>
<w-tabs bind:onChange="handleChange" currentIndex="3" options="{{ tabs1 }}" line="{{ false }}"/>
</view>
JS file
Logon Operation
onLoad(){
wx.getStorageSync('user')
this.setData({
userInfo:user
})
},
login(){
wx.getUserProfile({
desc: 'Perfect Membership Data',
success:res=>{
let user=res.userInfo
console.log('Authorization succeeded',res)
//Cache information locally
wx.setStorageSync('user', user)
this.setData({
userInfo:user
})
},
fail:res=>{
console.log('privilege grant failed',res)
}
})
},
logout(){
this.setData({
userInfo:''
})
wx.setStorageSync('user', null)
},
(2) Rights Management (Wang Zhixin)
2. Post, comment, search
(1) Release (Hu Wenfei) 2021.11.8
1.send.js File, add data and methods
// pages/send/send.js
Page({
/**
* Initial data for page
*/
data: {
tabs1: [
{
text: 'home page',
},
{
text: 'Release',
},
{
text: 'query',
},
{
text: 'My',
},
],
items: [
{ name: '1', value: 'Certificates' },
{ name: '2', value: 'book' },
{ name: '3', value: 'Clothes & Accessories' },
{ name: '4', value: 'food' },
{ name: '5', value: 'Other' }
],
images: [],
category:"",
content:""
},
//Radio box selection event
radioChange: function (e) {
console.log('radio Happen change Events, carry value Values are:', e.detail.value);
this.setData({
category: e.detail.value
})
},
//Upload pictures
chooseImage() {
var that = this;
if (this.data.images.length < 3) {
wx.chooseImage({
sizeType: ['original', 'compressed'],
success: function (res) {
that.setData({
images: that.data.images.concat(res.tempFilePaths)
})
}
})
} else {
wx.showToast({
title: 'Upload up to three pictures',
icon: 'loading',
duration: 3000
});
}
},
// Delete Picture
deleteImg: function (e) {
var imgs = this.data.images;
var index = e.currentTarget.dataset.index;
imgs.splice(index, 1);
this.setData({
images: imgs
});
},
//Get input box contents when you lose focus
bindTextAreaBlur: function (e) {
console.log(e.detail.value)
this.setData({
content: e.detail.value,
})
},
//Submission of lost and found form
lostandfoundMsgFormSubmit(e){
var category = this.data.category;
var content=this.data.content;
//test
console.log("category:"+category);
console.log("content:"+content);
var images=this.data.images;
for(var i=0;i<images.length;i++){
console.log("Picture address:"+images[i]);
}
this.setData({
images:[]
});
wx.showToast({
title: 'Publish Successful',
duration:2000
})
},
//Menu Navigation Bar Jump
handleChange(e) {
const index = e.detail.value;
console.log(e);
console.log("value: " + e.detail.value);
switch (index) {
case 0:
wx.redirectTo({
url: '/pages/lostandfound/lostandfound',
})
break;
case 1:
// wx.navigateTo({
// url: '/pages/send/send',
// })
break;
case 2:
wx.redirectTo({
url: '/pages/find/find',
})
break;
case 3:
wx.redirectTo({
url: '/pages/userMsg/userMsg',
})
break;
}
},
handleSelected() {
this.setData({
index: 2,
});
},
handleClick(e) {
const { index, title } = e.detail;
console.log('Clicked tab:' + index, title);
},
/**
* Lifecycle Functions--Listen for Page Loading
*/
onLoad: function (options) {
},
/**
* Lifecycle Function -- Listen for page initial rendering complete
*/
onReady: function () {
},
/**
* Lifecycle Functions--Monitor Page Display
*/
onShow: function () {
},
/**
* Lifecycle Functions--Listening Page Hide
*/
onHide: function () {
},
/**
* Lifecycle Functions--Listen for Page Uninstall
*/
onUnload: function () {
},
/**
* Page Related Event Handler--Listens for user dropdown actions
*/
onPullDownRefresh: function () {
},
/**
* Handler for bottom-touch events on pages
*/
onReachBottom: function () {
},
/**
* Users click on the top right corner to share
*/
onShareAppMessage: function () {
}
})
2.send.json Introduce the appropriate UI assembly
{
"usingComponents": {
"w-button": "/dist/w-button/index",
"w-tabs": "/dist/w-tabs/index",
"w-cell": "/dist/w-cell/index",
"w-cell-group": "/dist/w-cell-group/index",
"w-input": "/dist/w-input/index"
}
}
3.send.wxss file
/* pages/send/send.wxss */
.tabs{
position: fixed;
width: 100%;
bottom: 0;
}
.big-logos {
float: left;
margin-top: 10rpx;
margin-bottom: 10rpx;
width: 100%;
height: 200rpx;
border: 1px solid #ccc;
}
.big-logos .big-logos_img {
float: left;
width: 100%;
height: 200rpx;
}
.big-logos .big-logos_img image {
float: left;
width: 250rpx;
height: 200rpx;
}
.big-logos .logoinfo {
float: left;
width: 250rpx;
height: 200rpx;
margin-top: -196rpx;
}
.big-logos .logoinfo image {
float: left;
width: 250rpx;
height: 200rpx;
}
.delete-btn{
width: 10%;
height: 50rpx;
}
.submit-btn-view{
margin-top: 50rpx;
}
.submit-btn{
background-color: green;
color: white;
}
.space{
width: 100%;
height: 80rpx;
}
4.send.wxml file
<!--pages/send/send.wxml-->
<view>
<form bindreset="lostandfoundMsgFormSubmit">
<label>1.Select Category</label>
<radio-group class="radio-group" bindchange="radioChange">
<label class="radio" wx:for="{{items}}">
<radio value="{{item.name}}" checked="{{item.checked}}"/>{{item.value}}
</label>
</radio-group>
<!-- Leave a distance-->
<view class='space'></view>
<label>2.Input Content</label>
<w-cell-group>
<!-- <w-input clear count="200" type="textarea" placeholder="input" bindblur='bindTextAreaBlur'/> -->
<textarea placeholder="Please enter less than 200 words" bindblur='bindTextAreaBlur' maxlength='200'></textarea>
</w-cell-group>
<!-- Leave a distance-->
<view class='space'></view>
<label>3.Upload pictures</label>
<!-- Picture Upload-->
<view class="big-logos">
<view class='big-logos_img'>
<image bindtap="chooseImage" src='/images/wx_app_add.jpg'></image>
<image bindtap="chooseImage" src='/images/wx_app_add.jpg'></image>
<image bindtap="chooseImage" src='/images/wx_app_add.jpg'></image>
</view>
<block wx:for="{{images}}" wx:key="{{index}}">
<view class='logoinfo'>
<image src='{{item}}' catchtap='deleteImg'></image>
</view>
</block>
</view>
<!-- Picture Upload-->
<!-- Leave a distance-->
<view class='space'></view>
<view class='submit-btn-view'>
<button formType="reset" class='submit-btn' >Release</button>
</view>
</form>
</view>
<view class='tabs'>
<w-tabs bind:onChange="handleChange" currentIndex="1" options="{{ tabs1 }}" />
</view>
(2) Comment (Feng Chenyang) 2021.11.8
1. stay lostandfound.js Add click comment icon to jump to comment page in file
/**
* Jump to article review page
*/
onTapToComment(event) {
//Get postId
var postId = event.currentTarget.dataset.postId;
console.log(postId);
wx.navigateTo({
url: 'comment/comment?id=' + postId,
})
2. stay comment.js Of onload Method Receive lostandfound Page passed postId
/**
* Lifecycle Functions--Listen for Page Loading
*/
onLoad: function (options) {
var postId = options.id;//Get article id from previous page
//test
console.log("comment.js ..." + postId);
},
3. comment.js Files, add data as needed, and methods
// pages/lostandfound/comment/comment.js
Page({
/**
* Initial data for page
*/
data: {
comments:[
{
authorImg:"/images/photo_1.jpg",
author:"James",
date:"11-17",
content:"Local people gathered in anticipation and cheer"
},
{
authorImg: "/images/photo_1.jpg",
author: "James",
date: "11-17",
content: "Local people gathered in anticipation and cheer"
},
{
authorImg: "/images/photo_1.jpg",
author: "James",
date: "11-17",
content: "Local people gathered in anticipation and cheer"
},
{
authorImg: "/images/photo_1.jpg",
author: "James",
date: "11-17",
content: "Local people gathered in anticipation and cheer"
},
],
content:"",
},
//Get inside comments when you lose focus
bindTextAreaBlur: function (e) {
console.log(e.detail.value)
this.setData({
content: e.detail.value,
})
},
//Button click trigger event to submit comments
formSubmit(e){
// this.bindTextAreaBlur();
//test
var content=this.data.content;
if(content!=""){
console.log("Comment:" + content);
//Show success
wx.showToast({
title: 'Published Successfully',
duration: 1000
});
//Empty Input Box
this.setData({
content: ""
})
}
},
/**
* Lifecycle Functions--Listen for Page Loading
*/
onLoad: function (options) {
var postId = options.id;//Get article id from previous page
//test
console.log("comment.js ..." + postId);
},
/**
* Lifecycle Function -- Listen for page initial rendering complete
*/
onReady: function () {
},
/**
* Lifecycle Functions--Monitor Page Display
*/
onShow: function () {
},
/**
* Lifecycle Functions--Listening Page Hide
*/
onHide: function () {
},
/**
* Lifecycle Functions--Listen for Page Uninstall
*/
onUnload: function () {
},
/**
* Page Related Event Handler--Listens for user dropdown actions
*/
onPullDownRefresh: function () {
},
/**
* Handler for bottom-touch events on pages
*/
onReachBottom: function () {
},
/**
* Users click on the top right corner to share
*/
onShareAppMessage: function () {
}
})
4. comment.wxss File, add the style sheet you want
/* pages/lostandfound/comment/comment.wxss */
.page{
margin: 10rpx 10rpx 10rpx 10rpx;
}
.userMsg{
display: flex;
flex-direction: row;
}
.name-date{
display: flex;
flex-direction: column;
}
.userMsg-name{
font-size: smaller;
margin-left: 20rpx;
}
.userMsg-date{
font-size:small;
margin-top: 10rpx;
margin-left: 20rpx;
}
.comment-content{
font-size: small;
margin-left: 30rpx;
margin-top: 20rpx;
}
/*Split Line Style*/
.divLine{
margin-top: 30rpx;
background: #E0E3DA;
width: 100%;
height: 5rpx;
}
/*Comment box fixed at the bottom*/
.comment-send{
display: flex;
flex-direction: row;
position: fixed;
bottom: 0;
width: 100%;
height: 100rpx;
border-top-style: solid;
border-width: 3rpx;
border-color: rgba(100, 94, 86, 0.856)
}
.comment-form{
margin-top: 5rpx;
margin-left: 20rpx;
height: 100rpx;
width: 70%;
}
.comment-input{
width: 100%;
}
.comment-image{
width: 50rpx;
height: 50rpx;
}
.comment-button{
position: absolute;
right: 5rpx;
top: 5rpx;
height: 20rpx;
}
.btn{
background-color: rgb(23, 167, 250);
}
5.comment.json File Add Required Components
{
"navigationBarTitleText": "comment",
"usingComponents": {
"w-avatar": "/dist/w-avatar/index",
"w-input": "/dist/w-input/index",
"w-cell-group": "/dist/w-cell-group/index"
}
}
5. comment.json File Add Required Components
/* pages/lostandfound/comment/comment.wxss */
.page{
margin: 10rpx 10rpx 10rpx 10rpx;
}
.userMsg{
display: flex;
flex-direction: row;
}
.name-date{
display: flex;
flex-direction: column;
}
.userMsg-name{
font-size: smaller;
margin-left: 20rpx;
}
.userMsg-date{
font-size:small;
margin-top: 10rpx;
margin-left: 20rpx;
}
.comment-content{
font-size: small;
margin-left: 30rpx;
margin-top: 20rpx;
}
/*Split Line Style*/
.divLine{
margin-top: 30rpx;
background: #E0E3DA;
width: 100%;
height: 5rpx;
}
/*Comment box fixed at the bottom*/
.comment-send{
display: flex;
flex-direction: row;
position: fixed;
bottom: 0;
width: 100%;
height: 100rpx;
border-top-style: solid;
border-width: 3rpx;
border-color: rgba(100, 94, 86, 0.856)
}
.comment-form{
margin-top: 5rpx;
margin-left: 20rpx;
height: 100rpx;
width: 70%;
}
.comment-input{
width: 100%;
}
.comment-image{
width: 50rpx;
height: 50rpx;
}
.comment-button{
position: absolute;
right: 5rpx;
top: 5rpx;
height: 20rpx;
}
.btn{
background-color: rgb(23, 167, 250);
}
5.comment.json File Add Required Components
{
"navigationBarTitleText": "comment",
"usingComponents": {
"w-avatar": "/dist/w-avatar/index",
"w-input": "/dist/w-input/index",
"w-cell-group": "/dist/w-cell-group/index"
}
}
6. comment.wxml Writing Files
<!--pages/lostandfound/comment/comment.wxml-->
<view class='page'>
<block wx:for="{{comments}}" wx:for-item="item" wx:for-index="index">
<view class='userMsg'>
<w-avatar size="large" src="{{item.authorImg}}">W</w-avatar>
<view class='name-date'>
<text class='userMsg-name'>{{item.author}}</text>
<text class='userMsg-date'>{{item.date}}</text>
</view>
</view>
<view>
<text class='comment-content'>{{item.content}}</text>
</view>
<view class='divLine'></view>
</block>
</view>
<!-- Comment box fixed at the bottom-->
<view class='comment-send'>
<!-- <input placeholder="Write a comment" maxlength="200"></input> -->
<image class='comment-image' src='/images/wx_app_comment.jpg'></image>
<!-- <w-input
clear
count="100"
type="textarea"
placeholder="comment"
/> -->
<!-- review form-->
<form class='comment-form' bindsubmit='formSubmit'>
<textarea placeholder="Write a comment" maxlength="200" cursor-spacing="30" bindblur='bindTextAreaBlur' class='comment-input' value='{{content}}'></textarea>
<view class='comment-button'>
<button size='mini' class='btn' formType='submit'>Publish</button>
</view>
</form>
</view>
(3) Search (Li Xianwu)
Search Query Search Box: When it comes to fuzzy queries and multi-value matching, users can match information by searching for the name of the owner or the name of the lost property.
/ search event
search: function (e) {
let that = this
if (e.detail.value!==''){
db.collection('product').where({
price:{
$regex: '.*' + e.detail.value,
$options:'i'
}
}).get({
success: function (res) {
that.setData({
search: res.data
})
console.log('Search succeeded', that.data.search)
if (that.data.search == "") {
db.collection('product').where({
name: {
$regex: '.*' + e.detail.value,
$options: 'i'
}
}).get({
success: function (res) {
that.setData({
search: res.data
})
console.log('Search succeeded', that.data.search)
if (that.data.search == "") {
wx.showToast({
title: 'not found',
duration: 1000
})
}
}
})
}
},
})
}
else {
wx.showToast({
title: 'You still have information to fill in',
icon: "none"
})
}
},
Summary (Feng Chenyang)
Although the function of comments has been initially built, it is obvious that the function is very simple and has obvious defects: the interface does not show the number of comments, comments cannot be saved, and so on; Actually, if you have the best sorting capability, you can choose to show popular posts and comments first.
In addition, the number of applet data calls per day is limited.