基于微信小程序的校园论坛系统开发过程
微信小程序介绍
首先，我说明下为什么会选择开发微信小程序，而不是去选择开发APP或者一个web网站的论坛系统，原因很简单–没人用。我开发好几个系统发现班级同学不经常用，这让我反思了好久，其实问题很明显，就是你增加了大家的负担，用户根本不原因去下载一个大家都不用的APP或者一个网站，所以我转变了策略，直接站在巨人的肩膀上开发（微信），微信小程序是内置在微信应用的，大家随手可以打开使用，用完就走，十分方便，所以我选择了微信小程序的开发。
页面展示
1。下面是小程序的首页，帖子的展示页面。
2。点击对应的帖子，可以进入详细浏览界面。
3。下面是发帖界面，图片最多上传3张，可以选择拍照
4。下面是我的界面，当然用户首次进入小程序需要登陆。
5。下面是我的帖子管理页面
小程序功能介绍
- 用户的发帖功能
- 用户的评论功能
- 用户的点赞功能
- 用户的帖子管理功能、
- 客服对话功能
- 不同用户帖子的权限（主要指删除帖子或者评论）
小程序设计介绍
- 小程序前端采用小程序自带的语法wxml+wxss+javascript,其实就是web前端html+css+javascript的一个翻版。如果你会前端语法，小程序上手也就十分快，当然还是要多参考小程序开发文档。
- 小程序后端可以采用任意一门编程语言，php,java,或者python,当然也可以选择微信小程序自带的云开发作为后端。我用的是云开发作为后端，因为如果你采用上面自己的后端，需要配置许多麻烦的东西，如果采用云开发，十分简单，上手也十分快。下图就是云开发的后台展示
小程序部分代码设计讲解
- 用户的登陆功能
首先去云数据库检测用户是否之前注册过，如果注册，直接获取用户登陆信息，如果用户第一次登陆，则直接注册登陆。
//登陆实现
getUserInfo:function(e){
//1.用户进入页面，提示登陆。
wx.showLoading({
title: '登陆中....',
})
let that = this;
let info = e.detail.userInfo;
console.log(info);
wx.cloud.callFunction({
name:"love_login",
success:function(e){
console.log(e.result.openid);
if(e.result.openid)
that.setData({
openid:e.result.openid,
userinfo:info
})
//先去判断用户之前是否注册入库，如果未注册，注册入库
wx.cloud.callFunction({
name:"love_iszhu",
data:{
openid:that.data.openid
},success:function(e){
if(e.result.data.length==0)//未入库，进行入库
{
wx.cloud.callFunction({
name:'love_register',
data:{
username:that.data.userinfo.nickName,
head:that.data.userinfo.avatarUrl,
openid:that.data.openid
},success:function(ev){
console.log(ev)
wx.hideLoading({
success: (res) => {},
})
wx.showToast({
title: '登陆成功',
icon:"success",
duration:2000
})
},fail:function(e){
console.log(e);
}
})
}else{//已经入库，直接从数据库读取信息
console.log('已经注册');
wx.showToast({
title: '登陆成功',
icon:"success",
duration:2000
})
wx.hideLoading({
success: (res) => {},
})
}
//用户信息保存到数据库和缓存里面
wx.setStorageSync('userinfo', that.data.userinfo);
wx.setStorageSync('openid', that.data.openid);
},fail:function(e){
console.log(e);
}
})
}
})
},
- 帖子发布功能：此处设计不好口头描述，我也是参考小程序官方文档和csdn各位大神讲解才学会的，主要难点是图片的上传。首先我们获取用户输入的标题和内容，其次获取用户上传的图片，最后一起发送到后端云函数处理保存到数据库。
//图片的上传
chooseImage:function(e){
let that = this;
wx.chooseImage({
count: 3, // 默认最多3张图片，可自行更改
sizeType: ['original', 'compressed'],// 可以指定是原图还是压缩图，默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
success: res => {
wx.showToast({
title: '正在上传...',
icon: 'loading',
mask: true,
duration: 1000
})
// 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
let tempFilePath = res.tempFilePaths;
console.log(tempFilePath);
let nowCount = that.data.nowCount;
let tempFilePaths = that.data.tempFilePaths;
if(that.data.nowCount + tempFilePath.length >=3){
let i = 0;
while(nowCount<3){//还可以继续上传图片
tempFilePaths.push(tempFilePath[i]);
i++;
nowCount++;
}
that.setData({
nowCount:3,
tempFilePaths:tempFilePaths
})
}else{
let i = 0;
while(i<tempFilePath.length){
tempFilePaths.push(tempFilePath[i]);
i++;
}
that.setData({
nowCount:that.data.nowCount + tempFilePath.length,
tempFilePaths:tempFilePaths
})
}
console.log(that.data.nowCount,that.data.tempFilePaths);
}
})
},
//上传文件到云端
submit:function(e){
let i;
let count=0;
let that = this;
let url = [];
console.log(e);
let title = e.detail.value.name;
let content = e.detail.value.content;
if(title.length<3){
wx.showToast({
title: '标题少于3个字',
icon:"none"
})
return false
}
if(content.length<5){
wx.showToast({
title: '内容少于5个字',
icon:"none"
})
return false
}
wx.showLoading({
title: '发布中',
})
if(that.data.nowCount==0){
wx.cloud.callFunction({
name:'love_upload',
data:{
title:title,
content:content,
openid:that.data.openid,
url:[]
},success:function(e){
console.log(e);
wx.hideLoading({
success: (res) => {
that.setData({
value1:'',
value2:'',
tempFilePaths:[],
nowCount:0
})
wx.showToast({
title: '发布成功',
})
},
})
},fail:function(e){
wx.hideLoading({
success: (res) => {
wx.showToast({
title: '网络异常',
})
that.setData({
value1:'',
value2:'',
tempFilePaths:[],
nowCount:0
})
},
})
console.log(e);
}
})
}else{
//将所有的内容上传到云端去
for(i=0;i<that.data.nowCount;i++){
console.log(1);
let extName = that.data.tempFilePaths[i].split(".").pop();
let cloudPath = "love/" + new Date().getTime() + "." + extName;
wx.cloud.uploadFile({
cloudPath: cloudPath,
filePath: that.data.tempFilePaths[i], // 文件路径
success: res => {
count++;
url.push(res.fileID);
console.log('上次图片');
console.log(i,url);
if(count==that.data.nowCount){
console.log(url);
wx.cloud.callFunction({
name:'love_upload',
data:{
title:title,
content:content,
openid:that.data.openid,
url:url
},success:function(e){
console.log(e);
wx.hideLoading({
success: (res) => {
that.setData({
value1:'',
value2:'',
tempFilePaths:[],
nowCount:0
})
wx.showToast({
title: '发布成功',
})
},
})
},fail:function(e){
wx.hideLoading({
success: (res) => {
wx.showToast({
title: '网络异常',
})
that.setData({
value1:'',
value2:'',
tempFilePaths:[],
nowCount:0
})
},
})
console.log(e);
}
})
}
},fail:res=>{
console.log(res);
}
})
}
}
},
- 帖子的展示：这个还是比较容易，通过index.js传递帖子的_id(主键)，然后去数据库请求该帖子展示到show.wxml页面
onLoad: function (options) {
let that = this;
//从缓存读取个人信息
let userinfo = wx.getStorageSync('userinfo')
let openid = wx.getStorageSync('openid')
wx.cloud.callFunction({
name:'love_show',
data:{
id:options.id
},success:function(e){
console.log(e.result.list[0])
let info = e.result.list[0]
info.timeShow = that.timeShow(info.time)
that.setData({
info:info,
userinfo:userinfo,
openid:openid,
value:""
})
wx.showLoading({
title: '加载中...',
})
//加载所有评论
that.getData()
//判断用户是否点赞了
wx.cloud.callFunction({
name:'love_zan',
data:{
openid:wx.getStorageSync('openid'),
id:that.data.info._id
},success:function(e){
console.log(e.result.data.length)
if(e.result.data.length==0){
that.setData({
zan:false
})
}else{
that.setData({
zan:true
})
}
},fail:function(e){
console.log(e)
}
})
},fail:function(e){
console.log(e);
}
})
},
结尾语
这个小程序花费了大概一周时间吧，基本每天有空就会去做，本来打算用它服务于我的学校用，基本功能都经过好几轮测试了，就等待上线了，可以腾讯审核没通过，说论坛类属于企业级才能做的，我的开发类型属于个人用户，所以后面和学校商量下如何解决。
大家需要源码的可以在微信公众号考研稳上岸获取
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
