软件工程第一次作业---简单的资料分享平台
| 博客班级 | https://edu.cnblogs.com/campus/zjcsxy/SE2020 |
| ---- | ---- | ---- |
| 作业要求 | https://edu.cnblogs.com/campus/zjcsxy/SE2020/homework/11334 |
| 作业目标 |1.编写一个小程序，可以全新编写，也可以学习别人的小程序进行修改 2.熟悉git代码管理流程，将源代码上传到到 3.github在博客园班级中写一篇相应的博文 |
| 作业源代码| https://github.com/momoshenchi/zuccresource- |
| 学号 | 31802053 |
| 院系| 浙大城市学院计算机专业 |
| 姓名学号| 王钧亮 31802053|
前言
这种资料平台的兴起已经是很久之前的事情,这次微信小程序我也不知道如何下手,就开始作这件事.
我的前景是愿城院学子不再受到考试折磨,当然软件工程这种课也要给他们留下模板
注: 全部代码95%以上都是手打,版权所有,请勿抄袭
项目大致功能:
用户进入首页后可以顺序浏览所有文件信息,文件排列没有顺序.到达底部后,弹出提示
首页还可以进行上传操作和发帖求助.上传操作只会上传到云端,需要管理员(本人)审核后送入数据库.
进入帖子页面,右上角点击可以发帖,中间是帖子的信息.
tabbar栏还有一个分类页面,是根据学院进行排列(不过还没实现),学院右侧是具体的科目信息,点击可以跳转到具体资源页面
在资源页面,可以看见文件的大致信息.点击选择评价可以给出好评或差评.
底部的加入收藏可以放入每个人的收藏栏.
点击下载有一个局限,会下载到一个难以找到的地方...
预期目标:
城院资料共享 (项目)功能
刚开始资料以考试试卷和计算机资料为主
1.用户识别,登录✅
2.用户可以查看自己的下载,收藏 ❎
3.可以实现下载资料的功能✅
4.在每个下载页面,可以查看各种数据(下载量,好评率,页数),以及对每份文档评论❎
5.用户可以上传文档 ✅
6.用户可以评论文档,每个文档每个用户只能评论一次 ❎
7.(对用户的下载做出限制) ❎
8.发帖求助,互动,回答帖子 ❎
9.有分类页面,可以进行检索✅
10.可以预览文件 ✅
微信开发综述(我个人对于微信小程序的理解及项目涉及)
采用模块化的开发思想,开发模式类似于vue.js,react.js
每个模块共有4个文件.分别为wxml,wxss,wxjs,json.
分为两个层级视图层(wxml),逻辑层(wxjs)
wxss负责美化工作,json文件功能则被大幅限制
后端向wxjs中的data传输数据,wxml使用data中的数据在页面渲染显示
sitemap只需要在开发时使用,可设置小程序搜索索引
项目使用云开发,结合里面的云存储,数据库,云函数功能实现后端,小程序代码实现前端,前后端代码没有完全分离,还有很大进步空间.
app.json负责全局配置
属性:
pages :
页面路径列表 必填
window 常用设置:
"window": {
"enablePullDownRefresh": true,
"backgroundTextStyle": "dark",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "name",
"navigationBarTextStyle": "black"
},
background : page下拉区域才为背景(设置enablePullDownRefresh)
enablePullDownRefresh:true 全局下拉刷新
tabBar:
切换条(菜单栏),可以切换页面
设置文字颜色(设置成与icon相匹配)
属性:
color : tab 上的文字默认颜色
selectedColor : 文字选中颜色
设置list属性:
list中设置pagePath,text 属性,必须设置两个页面以上
"tabBar": {
"list":[
{
"pagePath": "pages/test/1",
"text": "首页",
"iconPath": "",
"selectedIconPath": ""
},
{
"pagePath": "pages/logs/logs",
"text": "日志",
"iconPath": "",
"selectedIconPath": ""
}
]
}
设置tabbar图片:
iconPath string 否 图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片。
当 position 为 top 时，不显示 icon。
selectedIconPath string 否 选中时的图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片。
当 position 为 top 时，不显示 icon。
页面生命周期
常用的生命周期元素
onLoad->onShow->onReady
onLoad 开始加载,一个页面只会触发一次(初始化页面数据)
onReady 初次渲染完成,一个页面只会触发一次
onShow 应用切到前台时以及页面切换触发
onHide 应用隐藏以及页面之间切换的时候首先隐藏当前页面,再加载其他页面
onShow/onHide会反复调用
常用处理函数:
onPullDownRefresh下拉刷新(只有设置允许下拉) (页面数据效果刷新) 常用
onReachBottom 页面滚动触底( 需要足够多的数据, 实现上拉加载下一页) 常用
onShareAppMessage 分享按钮
onPageScroll 页面滚动就一直触发
onResize 页面尺寸变化,横竖屏切换
onTabItemTap 自己是tabbar页面,点击自己的按钮触发
下面是一些标签组件:
以及wxss中的page{height:100%}
decode 对 & nbsp; 等解码
属性:open-type为页面的跳转方式:
-
navigate 默认值 ,保留当前页面,有返回箭头,****不能跳转tabar界面
-
redirect 关闭当前页面,跳转,有home按钮****,不能跳转tabar界面
-
switchTab 跳转tabBar页面,关闭其他非tab页面
-
relaunch 关闭所有页面,打开任意页面
button 非常强大 (注 :这里有一个博客园的bug,不能写button标签形式)
使用图片时统一使用外网图片
默认宽度 320px,高度240px
属性 : mode 决定裁剪,缩放模式
-
scaleToFill 默认不保持横纵比,使宽高完全适配
-
aspectFit 保持横纵比 (页面轮播图常用)
-
widthFix 指定宽度,高度按比例调整
每一项被
默认宽度100% 高度150px
swiper无法根据宽度自动设置高度,需要手动设置
设置经验 :图片和swiper的宽度设置为100%,image mode设置为width-fit
swiper高度=100vw*原图高度/宽度
文件配置:
真机调试
使用api概述
wx.cloud.callFunction
执行云函数的操作,非常频繁使用
wx.cloud.callFunction({
name: 'thumb',
data: {
good: true,
"id": id,
rate:rate
},
wx.cloud.uploadFile
小程序端可以分别调用 wx.cloud.uploadFile 和 wx.cloud.downloadFile 完成上传和下载云文件操作。
下面简单的几行代码，即可实现在小程序内让用户选择一张图片，然后上传到云端管理的功能：
`// 让用户选择一张图片
wx.chooseImage({ success: chooseResult => {
// 将图片上传至云存储空间
wx.cloud.uploadFile({ // 指定上传到的云路径
cloudPath: 'my-photo.png', // 指定要上传的文件的小程序临时文件路径
filePath: chooseResult.tempFilePaths[0], // 成功回调
success: res => { console.log('上传成功', res) },
})
},
})`
wx.openDocument
直接打开指定地址的一个文件,在手机上会生成临时文件,不推荐作为下载使用
wx.openDocument({
filePath: res.tempFilePath,
success: res => {
console.log(res)
wx.hideLoading()
}
wx.getStorageSync
wx.getStorageSync("关键字")
wx.setStorageSync("关键字",数据)
目前，微信给每个小程序提供了10M的本地缓存空间
-
有了本地缓存，小程序可以做到：
- 离线应用（已测试在无网络的情况下，可以操作缓存数据）
- 流畅的用户体验
- 减少网络请求,节省服务器资源
-
哪些数据适合缓存：
-
热数据
-
静态数据（用户数据，服务器授权ID等）
-
网络地址（图片、文件等网络地址）
-
分页列表数据及详情内容
-
wx.showModel
(弹出是或否的选择框),有一个点击按钮
wx.showModal({
title: '提示',
content: '这是一个模态弹窗',
success: function (res) {
if (res.confirm) {//这里是点击了确定以后
console.log('用户点击确定')
} else {//这里是点击了取消以后
console.log('用户点击取消')
}
}
})
wx.showToast(弹出成功或失败的图标),没有点击按钮
wx.showToast({
title: '成功',
icon: 'success',
duration: 2000//持续的时间
})
数据库操作
wx.cloud.init({环境id})在app.js中初始化
图片上传云存储,在数据库中进行封装
一定要修改读写权限(巨坑)
注:(弊端,文件上传后就无法更改文件夹位置,这就是腾讯的工程师吗)
腾讯云中的数据库改变自关系数据库,每个集合都是一张表
但是关系数据库中可以有好多数据库，腾讯云只能有一个
云函数的创建部署:
需要在app.json中开启云函数,设置项目文件夹,并在project.config.json中设置项目文件夹
在项目文件夹中新建Node.js云函数,编写云函数
云函数的开发过程都是很类似的
如下图所示:(一般都是进行数据库的操作)
if (event.update == true) {
try {
return await usersTable.doc(md5(wxContext.OPENID)).update({
data: {
userData: _.set(event.userData)
},
})
} catch (e) {
console.error(e)
}
}
通过下面代码读入数据库的数据
wx.cloud.database().collection("swiper").get(
{
success:res=>{
this.setData({
swiperList: res.data[0].message
})
},
fail :()=>{}
}
)
然后利用数据显示图片
get操作
相当于select
.where({})相当于where x = ""&& y=""
.doc操作目前还没有搞懂,相当迷惑.....(推荐使用where)
.skip(pages)用于跳过指定数目的记录,常用于分页,也可以是下拉加载下一页
.get相当于select ,但是get方法一次最多获取20行数据
.field用于指定返回字段,用在云函数中
field({
description: true,
done: true,
progress: true
}).
update操作
相当于update
使用 update 方法可以局部更新一个记录或一个集合中的记录中的某些特定字段
f.doc(id).update({
data:{
"downloadtimes":db.command.inc(1)
},
success:res=>{
console.log(res.data)
}
})
除了用指定值更新字段外，数据库 API 还提供了一系列的更新指令用于执行更复杂的更新操作，更新指令可以通过 db.command 取得：
add操作
相当于insert
// _id: 'todo-identifiant-aleatoire', // 可选自定义 _id，在此处场景下用数据库自动分配的就可以了
db.collection('todos').add({
// data 字段表示需新增的 JSON 数据
data: {
// _id: 'todo-identifiant-aleatoire',
description: "learn cloud database",
due: new Date("2018-09-01"),
tags: [
"cloud",
"database"
],
// 为待办事项添加一个地理位置（113°E，23°N）
location: new db.Geo.Point(113, 23),
done: false
},
success: function(res) {
// res 是一个对象，其中有 _id 字段标记刚创建的记录的 id
console.log(res)
}
})
注:添加记录时无法设置自增id,update时可以使用inc自增
但是add时无法实现主键自增,这是一个官方漏洞(啊啊啊又一个腾讯漏洞......)
总结:
本次微信小程序实践从0起步,学习html,css,JavaScript,以及微信的开发流程.
学习途中遇到过无数的困难,也遇到了无数坑点.总的来说有点心累,终于解脱了.解决困难的途中有所收获,具体多少,只待日后检验.
只能说要学的东西真实无穷无尽,直到现在,我对开发小程序还是一窍不通...
此项目后续还会维护下去,继续寻找真正的考试资料.
