| 博客班级 | https://edu.cnblogs.com/campus/zjcsxy/SE2020 |
|---|---|
| 作业要求 | https://edu.cnblogs.com/campus/zjcsxy/SE2020/homework/11334 |
| 作业目标 | 完成一个小程序,上传代码,完成一篇博文 |
| 作业源代码 | https://github.com/Hsaeno/2020-software-demo1 |
| 姓名 | 谢健 |
| 学号 | 31801141 |
| 院系 | 浙大城市学院计算机系 |
项目灵感来源：经常能在校园内部的小程序或者微信群上看到闲置物品的出售,类似闲鱼的大平台又不适用于区域内部的交易，所以萌生了校园二手交易平台的想法。
项目描述：本项目完成的是一个校园二手交易平台的简易搭建，因服务器原因，以静态呈现，如有后续，会考虑连接后台。主要完成了首页、校园讨论、发布、买卖双方信息交流以及个人信息展示。
需求分析：作为一个二手平台，首页推荐是需要的，发布功能是最重要的，这里面同时也就涉及到了将图片预览、上传的功能，买卖双方的聊天功能也是必不可少的，同时个人也要能够看到自己的历史交易和收藏。校园作为一个附带功能，也提供了一个供学生内部交流的平台。
本项目基于微信云开发，代码中云开发组件部分不予讲解，详情请参考开发者文档。自我完成部分重要结构将进行注释并做部分分析!
开发工具：微信开发者工具
项目页面展示
全局配置
JSON文件（app.json）
{
"pages": [
"pages/index/index", //首页
"pages/chat/chat", //聊天进入界面
"pages/post/post", //发布页
"pages/school/school", //校园页
"pages/userInfo/userInfo" //用户信息页
],
"window": {
"backgroundTextStyle": "dark",
"navigationBarBackgroundColor": "#ffd747", //导航栏背景颜色
"navigationBarTitleText": "ZUCC闲置交易平台", //导航栏
"navigationBarTextStyle": "black",
"enablePullDownRefresh": true //下拉自动刷新
},
"tabBar": {
"backgroundColor": "#fafafa",
"borderStyle": "white",
"selectedColor": "#333",
"color": "#333",
"list": [
{
"pagePath": "pages/index/index", //跳转导航页
"iconPath": "./images/ic_menu_home_nor.png", //图标样式
"selectedIconPath": "./images/ic_menu_home_pressed.png", //图标选中样式
"text": "首页" //页面名称
},
{
"pagePath": "pages/school/school",
"iconPath": "./images/xiaoyuan.png",
"selectedIconPath": "./images/xiaoyuan_pressed.png",
"text": "校园"
},
{
"pagePath": "pages/post/post",
"iconPath": "./images/ic_menu_add_nor.png",
"selectedIconPath": "./images/ic_menu_add_nor.png",
"text": "发布"
},
{
"pagePath": "pages/chat/chat",
"iconPath": "./images/ic_menu_chat_nor.png",
"selectedIconPath": "./images/ic_menu_chat_pressed.png",
"text": "消息"
},
{
"pagePath": "pages/userInfo/userInfo",
"iconPath": "./images/ic_menu_me_nor.png",
"selectedIconPath": "./images/ic_menu_me_pressed.png",
"text": "我的"
}
]
},
"sitemapLocation": "sitemap85.json"
}
JS文件(app.js) 该文件由云开发时自动生成，直接调用即可
// 展示本地存储能力
var logs = wx.getStorageSync(\'logs\') || []
logs.unshift(Date.now())
wx.setStorageSync(\'logs\', logs)
// 登录
wx.login({
success: res => {
// 发送 res.code 到后台换取 openId, sessionKey, unionId
}
})
// 获取用户信息
wx.getSetting({
success: res => {
if (res.authSetting[\'scope.userInfo\']) {
// 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
wx.getUserInfo({
success: res => {
// 可以将 res 发送给后台解码出 unionId
this.globalData.userInfo = res.userInfo
// 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
// 所以此处加入 callback 以防止这种情况
if (this.userInfoReadyCallback) {
this.userInfoReadyCallback(res)
}
}
})
}
}
})
},
globalData: {
userInfo: null
}
wxss样式（app.wxss）
.container {
box-sizing: border-box;
background-color: #f4f4f4;
font-family: PingFangSC,helvetica,\'Heiti SC\'; //字体
}
view,image,text,navigator{
box-sizing: border-box;
padding:0;
margin:0;
}
view,text{
font-family: PingFangSC,helvetica,\'Heiti SC\';
font-size: 29rpx;
color: #333;
}
各页面代码
首页(index)
wxml文件
<view class="container">
<swiper class="banner" indicator-dots="true" autoplay="true" interval="3000" duration="1000" circular="true"> //轮播动画,调用for循环在js中读取数据完成,不必逐一配置
<block wx:for=\'{{background}}\' wx:key="key">
<swiper-item>
<image src=\'{{item}}\'></image>
</swiper-item>
</block>
</swiper>
<view class="search_menu">
<view class=\'page_row\' bindtap="suo">
<view class="search">
<view class="df search_arr">
<icon class="searchcion" size=\'20\' type=\'search\'></icon>
<input class="" placeholder="请输入关键字" value="{{searchValue}}"/> //搜索框
</view>
</view>
<view class=\'sousuo\'>
<text class = "sousuotext">搜索</text> //搜索按钮，这里采用text和css样式进行模拟一个按钮
</view>
</view>
<!-- 首页分类 -->
<view class="m-menu">
<navigator open-type="navigate" wx:for="{{channel}}" wx:key="key"> //分类栏跳转
<image src="{{item.imgurl}}"></image>
<text>{{item.name}}</text>
</navigator>
</view>
</view>
<view class="recommdant">
<text class="cnxh">猜你喜欢</text>
<navigator open-type="navigate" wx:for="{{user_rec}}" wx:key="key"> // 推荐栏,调用for循环。
<view class=".recommdant_text_img">
<image src="{{item.img}}"></image>
<text class="recommdant_text">{{item.title}}</text>
</view>
</navigator>
</view>
</view>
js文件
//数据绑定
channel: //分类
[
{
name:"二手手机", //文字
imgurl:"cloud://ash-1gecd5xpb564b8d4.6173-ash-1gecd5xpb564b8d4-1303835441/cloud_img/essj.png" //图片存储位置,因为小程序的存储设置，这里采用云存储完成
},
{
name:"数码产品",
imgurl:"cloud://ash-1gecd5xpb564b8d4.6173-ash-1gecd5xpb564b8d4-1303835441/cloud_img/sm.png"
},
{
name:"二手图书",
imgurl:"cloud://ash-1gecd5xpb564b8d4.6173-ash-1gecd5xpb564b8d4-1303835441/cloud_img/ess.png"
},
{
name:"化妆品",
imgurl:"cloud://ash-1gecd5xpb564b8d4.6173-ash-1gecd5xpb564b8d4-1303835441/cloud_img/hzp.png"
},
{
name:"全部分类",
imgurl:"cloud://ash-1gecd5xpb564b8d4.6173-ash-1gecd5xpb564b8d4-1303835441/cloud_img/fl.png"
}
],
background:[ //轮播背景图
"cloud://ash-1gecd5xpb564b8d4.6173-ash-1gecd5xpb564b8d4-1303835441/cloud_img/index_swiper3.jpg",
"cloud://ash-1gecd5xpb564b8d4.6173-ash-1gecd5xpb564b8d4-1303835441/cloud_img/index_swiper1.jpg",
"cloud://ash-1gecd5xpb564b8d4.6173-ash-1gecd5xpb564b8d4-1303835441/cloud_img/index_swiper2.jpg"
],
user_rec:[ //猜你喜欢
{
img:"cloud://ash-1gecd5xpb564b8d4.6173-ash-1gecd5xpb564b8d4-1303835441/cloud_img/iphone.jpg",
title:"自用Ipone11 promax"
},
{
img:"cloud://ash-1gecd5xpb564b8d4.6173-ash-1gecd5xpb564b8d4-1303835441/cloud_img/sony.jpg",
title:"索尼降噪豆三代 京东购买"
},
{
img:"cloud://ash-1gecd5xpb564b8d4.6173-ash-1gecd5xpb564b8d4-1303835441/cloud_img/kyzz.jpg",
title:"2021考研政治全套便宜出"
},
{
img:"cloud://ash-1gecd5xpb564b8d4.6173-ash-1gecd5xpb564b8d4-1303835441/cloud_img/ysl.jpg",
title:"YSL口红未拆封低价卖"
}
]
校园页(school)
分左右2栏,样式不同。为了方便展示,2栏使用相同的数据。
wxml文件
<view class= "school_container"> //左右两栏不同样式
<view class="left-culumn"> //左栏
<navigator open-type="navigate" wx:for="{{school_info_left}}" wx:key="key">
<view class="left-school_box">
<image src="{{item.imgurl}}" class="userinfo_img"></image>
<text class="recommdant_text" style="font-weight:200">{{item.title}}</text>
</view>
</navigator>
</view>
<view class="right-culumn"> //右栏
<navigator open-type="navigate" wx:for="{{school_info_left}}" wx:key="key">
<view class="right-school_box">
<image src="{{item.imgurl}}" class="userinfo_img"></image>
<text class="recommdant_text" style="font-weight:200">{{item.title}}</text>
</view>
</navigator>
</view>
</view>
js文件
chool_info_left:[
{
imgurl:"cloud://ash-1gecd5xpb564b8d4.6173-ash-1gecd5xpb564b8d4-1303835441/cloud_img/nokia.jpg",
title:"#数码好物分享# 极为罕见的白色5510"
},
{
imgurl:"cloud://ash-1gecd5xpb564b8d4.6173-ash-1gecd5xpb564b8d4-1303835441/cloud_img/clothes.jpg",
title:"#潮牌配色指南# 早春卫衣人靠衣服马靠鞍"
},
{
imgurl:"cloud://ash-1gecd5xpb564b8d4.6173-ash-1gecd5xpb564b8d4-1303835441/cloud_img/mz.jpg",
title:"#数码好物分享# 精致的千元机魅族Note"
},
{
imgurl:"cloud://ash-1gecd5xpb564b8d4.6173-ash-1gecd5xpb564b8d4-1303835441/cloud_img/shoes.jpg",
title:"#这是我穿过最酷的潮牌# 百看不厌"
},
{
imgurl:"cloud://ash-1gecd5xpb564b8d4.6173-ash-1gecd5xpb564b8d4-1303835441/cloud_img/waitao.jpg",
title:"#晒晒那些高颜值好物# 通勤换季ootd | 初秋穿搭 小香风粗花昵外套真的好显气质!"
},
]
发布页(post)
图片能够进行预览,删除和上传到云端。
云端存储记录
wxml文件
<!--pages/post/post.wxml-->
<view class="post_container">
<input class="title" placeholder-style="color: #aeaeae;" placeholder=" 标题， 品牌品类都是买家喜欢搜索的" value="{{searchValue}}"/> // 商品标题栏
<view class="content">
<!-- <input class="reason" placeholder-class="placeholderinput" placeholder="描述一下宝贝的转手原因、入手渠道和使用感受" value="{{searchValue}}"/> --> // 商品描述
<textarea class="reason" placeholder=" 描述一下宝贝的转手原因、入手渠道和使用感受" decode="{{true}}" placeholder-style="color: #aeaeae;"></textarea>
</view>
<form bindsubmit="formSubmit" bindreset="formReset" > //
<view class=\'tu1\'>
<block wx:for="{{img_arr}}" wx:key="index">
<view class=\'logoinfo\'>
<image class=\'logoinfo\' mode="aspectFill" src=\'{{item}}\' data-index="{{index}}" bindtap="previewImg" bindlongpress="deleteImg" name="headimage" ></image> //事件绑定,图片预览
</view>
</block>
<view class="addpic">
<image bindtap=\'upimg\' class=\'tu\' src="../../images/add_pic.png"></image> // 事件绑定，上传图片
<text>添加图片</text>
</view>
</view>
<view class="sellinfo">
<view class="price">
<text style=" position: relative; top: 35rpx;">价格：</text> //价格
<input class="title" placeholder-style="color: #aeaeae;" placeholder="在此输入你的预想价格" value="{{searchValue}}"/>
</view>
<view class="position"> //位置
<text style=" position: relative; top: 35rpx;">位置： </text>
<input class="title" placeholder-style="color: #aeaeae;" placeholder="请输入你的交易位置" value="{{searchValue}}"/>
</view>
<view class="catagory"></view>
</view>
<view class=\'an1\'>
<button form-type="submit" class=\'an\'>发布</button> //提交
</view>
</form>
</view>
js文件
const app = getApp()
wx. cloud. init() //微信云端初始化
var form_data;
var psw_vaule = [];
Page({
data: {
tempFilePaths: [],
img_arr: [],
},
//上传图片到服务器
formSubmit: function () {
var that = this
var adds = that.data.img_arr;
for (var i = 0; i < this.data.img_arr.length; i++) {
let filePath = that.data.img_arr[i]; //读取数组中用户添加的图片
let cloudPath = \'my-image\'+new Date().getTime() + filePath.match(/\.[^.]+?$/)[0]; //这里利用时间不会重复的特性进行文件上传，防止图片覆盖
wx.cloud.uploadFile({ //利用微信自带的函数将文件上传至云端
cloudPath,
filePath,
name: \'content\',
formData: {
\'user\': adds
},
success: function (res) {
console.log(res)
if (res) {
wx.showToast({
title: \'已提交发布！\', //上传提示
duration: 3000
});
}
}
})
}
// this.setData({
// formdata: \'\'
// })
},
//从本地获取照片
upimg: function () {
var that = this;
if (this.data.img_arr.length < 9) {
wx.chooseImage({
count: 9, //一次性上传到小程序的数量
sizeType: [\'original\', \'compressed\'], //原图或压缩
sourceType: [\'album\', \'camera\'],
success(res) {
console.log(res)
const tempFilePaths = res.tempFilePaths
console.log(res.tempFilePaths)
//concat() 方法用于连接两个或多个数组
that.setData({
img_arr: that.data.img_arr.concat(res.tempFilePaths), //将用户添加的图片放到预设数组里面
})
}
})
} else {
wx.showToast({
title: \'最多上传九张图片\', //设置阈值，超过提示
icon: \'loading\',
duration: 2000
})
}
},
//删除照片功能与预览照片功能
deleteImg: function (e) {
var that = this;
var img_arr = that.data.img_arr;
var index = e.currentTarget.dataset.index;
wx.showModal({
title: \'提示\',
content: \'确定要删除此图片吗？\',
success: function (res) {
if (res.confirm) {
console.log(\'点击确定了\');
img_arr.splice(index, 1); //图片删除
} else if (res.cancel) {
console.log(\'点击取消了\');
return false;
}
that.setData({
img_arr: img_arr
});
}
})
},
//预览图片
previewImg: function (e) {
var index = e.currentTarget.dataset.index;
var img_arr = this.data.img_arr;
wx.previewImage({
current: img_arr[index], //预览
urls: img_arr
})
},
})
聊天页(chat)
模拟了针对不同用户的聊天界面,可以通过点击,进入聊天详情
wxml文件
<view class="chat_seller">
<navigator url="../im/room/room" open-type="navigate" wx:for="{{chat_info}}" wx:key="key" class="chat_info"> //不同用户的聊天信息，for循环模拟
<image src="{{item.photo}}"></image>
<view style="display:flex;flex-direction:colum; align-items: initial;">
<text class="name">{{item.name}}</text>
<text class="time">{{item.time}}</text>
</view>
</navigator>
</view>
js文件
chat_info:[
{
photo: "cloud://ash-1gecd5xpb564b8d4.6173-ash-1gecd5xpb564b8d4-1303835441/cloud_img/tx1.jpg",
name: "qz1003",
time: "2小时前"
},
{
photo: "cloud://ash-1gecd5xpb564b8d4.6173-ash-1gecd5xpb564b8d4-1303835441/cloud_img/tx2.jpg",
name: "zt1234",
time: "5小时前"
},
{
photo: "cloud://ash-1gecd5xpb564b8d4.6173-ash-1gecd5xpb564b8d4-1303835441/cloud_img/tx3.jpg",
name: "frt991",
time: "8小时前"
},
{
photo: "cloud://ash-1gecd5xpb564b8d4.6173-ash-1gecd5xpb564b8d4-1303835441/cloud_img/tx4.jpg",
name: "xqr233",
time: "9小时前"
},
{
photo: "cloud://ash-1gecd5xpb564b8d4.6173-ash-1gecd5xpb564b8d4-1303835441/cloud_img/tx5.jpg",
name: "ptf123",
time: "9小时前"
}
]
聊天室(chatroom)
聊天可以发送文字信息和图片信息,因为没有搭建后台数据库,暂时只能在本地看到，无法上传。这部分的完成通过云开发提供的聊天室组件完成,将对文字发送部分进行注释，如有错误，望指正。后续可以通过用户的id，进行1对1聊天的修改。
文字信息相关
async onConfirmSendText(e) {
this.try(async () => {
if (!e.detail.value) {
return
}
const { collection } = this.properties //相关信息的初始化获取，如envid等
const db = this.db
const _ = db.command
const doc = {
_id: `${Math.random()}_${Date.now()}`, //随机初始化一个数据id供上传甄别使用
groupId: this.data.groupId,
avatar: this.data.userInfo.avatarUrl,
nickName: this.data.userInfo.nickName, //用户名
msgType: \'text\',
textContent: e.detail.value, //用户输入的文字信息
sendTime: new Date(),
sendTimeTS: Date.now(), // fallback
}
this.setData({ //信息设置
textInputValue: \'\',
chats: [
...this.data.chats,
{
...doc,
_openid: this.data.openId,
writeStatus: \'pending\',
},
],
})
this.scrollToBottom(true)
await db.collection(collection).add({
data: doc,
})
this.setData({
chats: this.data.chats.map(chat => {
if (chat._id === doc._id) {
return {
...chat,
writeStatus: \'written\',
}
} else return chat
}),
})
}, \'发送文字失败\') //报错提醒
},
图片选择与之前提到的类似，这里就不再进行赘述。
个人信息页(userinfo)
首先会进行是否登录的信息判断
信息授权
登录后会显示个人的相关信息
wxml文件
<view class="user_container">
<view class="userinfo">
<button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 微信账号登录 </button> //一开始的信息判断
<block wx:else>
<view class="base-info">
<image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image> //用户的头像
<text class="userinfo-nickname">{{userInfo.nickName}}</text> //用户的名称
<text class="userinfo-id">闲置号：Hsaenox</text> //闲置号因为小程序专属,没有后台数据,这里进行静态设置。
</view>
<navigator open-type="navigate" wx:for="{{channel}}" wx:key="key"> //相关的信息,包括我的收藏,我的订单等
<view class="user_menu">
<image src="{{item.imgurl}}" class="userinfo_img"></image>
<text class="recommdant_text">{{item.name}}</text>
</view>
</navigator>
</block>
</view>
<view>
</view>
</view>
json文件
bindViewTap: function() {
wx.navigateTo({
url: \'../logs/logs\'
})
},
onLoad: function () {
if (app.globalData.userInfo) { //如果已经登录,则从全局获取信息
this.setData({
userInfo: app.globalData.userInfo,
hasUserInfo: true //标记符,已登录
})
} else if (this.data.canIUse){
// 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
// 所以此处加入 callback 以防止这种情况
app.userInfoReadyCallback = res => {
this.setData({
userInfo: res.userInfo,
hasUserInfo: true
})
}
} else {
// 在没有 open-type=getUserInfo 版本的兼容处理
wx.getUserInfo({
success: res => {
app.globalData.userInfo = res.userInfo //获取信息,并写入全局
this.setData({
userInfo: res.userInfo,
hasUserInfo: true
})
}
})
}
},
getUserInfo: function(e) { //获取信息函数
console.log(e)
app.globalData.userInfo = e.detail.userInfo
this.setData({
userInfo: e.detail.userInfo,
hasUserInfo: true
})
}
})
收获总结
第一次编写小程序,从毫无头绪到逐渐入门,我从中感受到了开发的乐趣。微信开发工具的不熟悉, 开发语言的不了解,开发过程中遇到的各种bug,这些都需要自己查找资料,不断试错才能够完成。虽然过程是痛苦的,但一个星期的全身心投入,当看到最后的成品之后还是有着满足感。通过本次开发,也让我对于小程序有了基本的入门,但我知道现在完成的仅仅是个demo。如果后面想要做出真正能够让人满意的东西,在软件工程理论知识和开发技术方面,我都还有很长的路要走,我也会不断激励自己,不断进步。
后续程序设想
对于后续的程序,整体上,需要连入后台数据库,完成数据上传、下载的功能。
个人搜索模块，需要将搜索功能连入数据库，完成对闲置在卖物品的搜索。分类功能，需要参考其他app，采用更为细致的精准分类模式，帮助用户准确查找到所需要的物品。猜你喜欢板块，考虑引入机器学习和深度学习，对每个用户结合历史浏览记录和搜索记录进行推荐商品精准投放。
校园模块，考虑加入筛选和关键词功能，添加发布按钮，每个人都可以发布自己的帖子，分享自己的想法，打造成一个类似内嵌校园贴吧的产物。
发布模块，引入地图api接口，可以直接选择自身位置，而不用手动文字输入。
消息模块，添加服务器，完成用户间的交互功能，根据双方用户id进行识别，完成数据传输。用户脱机时，将数据存储在云端，用户上线后，再传输到设备上。
交易模块，用户能够购买指定商品，通过腾讯提供接口，完成双方的交易。
总体功能设想概述
设想中，程序能够完成商品分类、搜索、推荐，并且完成个人精准推荐。内嵌校园论坛，方便交流。发布更为便捷，简化发布学习成本。买卖双方能够进行实时聊天，完成交易。总体上，完成一个校园定制化的二手交易平台。