一.前言
大家不要说我是标题党哈…前天晚上真的是震惊了,上一篇博文被推荐之后,许多朋友都去了我开发的app的展示网页上去下载app,因此当时服务器的带宽被完全的占据了,整个服务器的出网带宽和出网流量都在最顶上。上一篇博文没有跟介绍这个app的开发目的。其实最刚开始的目的很单纯,给我还有我好朋友用来记录考研生活的。但是后来简化版的小程序发布之后,也有很多朋友在用,于是就启动开发了app。开发开始是3.15号,第一个版本发布是4.1号。
二.想法
现在想开发一款app,跟着这个一块使用,但是现在又要考研,于是就先把想法记在了自己的ipad上。两款app是合起来一起使用的,助力学习。如果又想要开发的,可以联系我,然后先学学后端技术。等我考完研咱么一起合作开发。
成果展示
安卓体验:因为害怕服务器在崩溃,两种方式
体验下载
网盘:链接: https://pan.baidu.com/s/1ali71H4-4JD7aJ8UgieiqA 提取码: 594a
小程序展示:
三.数据
先看看上次的服务器带宽,真的是十点之后全程走高
当时看的心惊肉跳,生怕服务器宕机了。但是好在我的微信小程序和app所处的服务器并不是一个。然后存放apk安装包的服务器就是我部署app的服务器。对小程序的影响不是太大。小程序的瞬间访问值也到达了1.1k。
四.页面美化
上次发布之后,为了更好的展示,而且也发现了一些bug,对页面做了一些修复和美化。同时打卡图片也重新设计,正在申请多平台分享的权限。以后的打卡卡片就能分享给好友,而且ui也会继续美化。
最优先美化的是圈子页面
美化前
美化之后
打卡卡片也进行了二次美化,日历加了边框样式,右上角文字改为随机生成
美化前
美化之后
五.bug修复
点赞问题
app开放下载之后,在自己的测试的时候发现了一个疏忽的bug。在打卡圈内的发现栏内,如果点赞则会出现点赞信息不发送到用户。也就是用户没有消息提醒。然后紧急修复bug.
发现原因是author_id数据绑定错误,点赞功能的实现是插入数据库打卡内容id号,点赞人的id,被点赞人的id。在传输数据的时候出现了id错误
var index = e.currentTarget.dataset.index
var num = e.currentTarget.dataset.num
var author_openid = e.currentTarget.dataset.openid
var daka_id = e.currentTarget.dataset.dakaid
this.alldaka[index].dianzan_type = 1
this.alldaka[index].dianzan = parseInt(num) + 1
this.alldaka = this.alldaka
console.log(daka_id)
uni.request({
url: getApp().globalData.requesturl + '/dianzan',
data: {
circle_id: this.circleinfo.id,
card_id: card_id,
id: this.id,
author_id: author_id,//错误在这,刚开始的绑定id,绑定成了圈子主的id,所有点赞消息都发送到了圈子主
nickname: this.userinfo.nickname,
avaturl: this.userinfo.avatarurl,
circle_name: this.circleinfo.name
},
method: 'POST',
header: {
"Content-Type": "application/x-www-form-urlencoded"
},
success: (res) => {
console.log(res)
}
})
打卡卡片的设计
之前的打卡卡片右上角固定显示每日一签,没有区分度,现在增加了三种选择。也是随机自动生成。
对于左上角的日历样式,日历光秃秃不是太好看,然后就给日历加了边框。日期下面加上了横杠。
var now = new Date();
var year = now.getFullYear(); //年
var month = now.getMonth() + 1; //月
var day = now.getDate();
var hour=now.getHours();
var minute=now.getMinutes();
var reallywight=uni.getSystemInfoSync().windowWidth
var reallyhight=uni.getSystemInfoSync().windowHeight
var wigth=uni.getSystemInfoSync().windowWidth-50
var hight=uni.getSystemInfoSync().windowHeight-90
var height=uni.getSystemInfoSync().windowHeight-190
const ctx =uni.createCanvasContext('myCanvas');
ctx.drawImage( "../../static/cards/card19.png" , 25 ,25 ,wigth,wigth*1.77 ); //绘制图
ctx.save()
var b = Math.random();
b=b*3
b = Math.ceil(b)
if (b==1){
ctx.setFillStyle("#FFFFFF")
ctx.font = 'normal 16px sans-serif';
ctx.fillText("每/",wigth-80,70)
ctx.fillText("日/",wigth-56,70)
ctx.fillText("一/",wigth-32,70)
ctx.fillText("签",wigth-8,70)
}else if (b==2){
ctx.setFillStyle("#FFFFFF")
ctx.font = 'normal 16px sans-serif';
ctx.fillText("元/",wigth-80,70)
ctx.fillText("气/",wigth-56,70)
ctx.fillText("满/",wigth-32,70)
ctx.fillText("满",wigth-8,70)
}else if(b==3){
ctx.setFillStyle("#FFFFFF")
ctx.font = 'normal 16px sans-serif';
ctx.fillText("持/",wigth-80,70)
ctx.fillText("之/",wigth-56,70)
ctx.fillText("以/",wigth-32,70)
ctx.fillText("恒",wigth-8,70)
}
// 画方框
ctx.lineWidth="2"
ctx.strokeStyle="#FFFFFF"
ctx.strokeRect(30, 35, 60, 70)
ctx.moveTo(40,86)
ctx.lineTo(80,86)
ctx.lineWidth="4"
ctx.stroke()
ctx.setFillStyle("#FFFFFF")
ctx.setFontSize(50)//设置字体大小,默认10
ctx.textAlign = 'center' // 设置位置
ctx.font = 'normal 40px sans-serif'; // 字体样式
ctx.fillText(day , 60, 80);
ctx.save()
ctx.font = 'normal 12px sans-serif';
var dayy=year+"."+month
ctx.fillText(dayy,60,100)
ctx.font = 'normal 15px sans-serif';
ctx.fillText("⛪枣庄市",70,130)
ctx.font = 'normal 10px sans-serif';
ctx.fillText("21天习惯打卡",60, wigth*1.70-45)
ctx.save()
var text="所有的习惯以,不可见的程度积聚起来,如百溪汇于川,百川流于海!"
ctx.font = '30px FZShuTi';
var str= new Array();
str=text.split(",");
// ctx.textAlign="center";
var uphight=0
for (var i=0;i<str.length;i++){
ctx.font = '25px shuti';
ctx.fillText(str[i], reallywight/2, height/2+uphight)
uphight+=40
}
ctx.font = 'normal 20px FZYaoti';
ctx.fillText("考研记录生活圈子",wigth-80,wigth*1.70-25)
ctx.font = 'normal 20px FZYaoti';
ctx.fillText("已打卡10天",wigth-50,wigth*1.77-15)
ctx.draw()
修复后的效果图
感觉比以前好看了不少。
六.问题解答
有问题可以问我,我也比较热心肠,技术上的问题会详细解答的,我也是个小菜菜。
对了还有上次的打卡图片的问题,
下面这个代码只适用于小程序。而且只能保存到手机
uni.showLoading({
title:'图片生成中'
})
var wigth=uni.getSystemInfoSync().windowWidth-50
var hight=uni.getSystemInfoSync().windowHeight-90
uni.canvasToTempFilePath({ // 把画布转化成临时文件
x: 25,
y: 25,
width:wigth, // 截取的画布的宽
height: wigth*1.77, // 截取的画布的高
destWidth: wigth*4, // 保存成的画布宽度
destHeight: wigth*1.77*4, // 保存成的画布高度
fileType: 'jpg', // 保存成的文件类型
quality: 1, // 图片质量
canvasId: 'myCanvas', // 画布ID
success(res) {
// 2-保存图片至相册
uni.saveImageToPhotosAlbum({ // 存成图片至手机
filePath: res.tempFilePath,
success(res2) {
wx.hideLoading();
uni.showToast({title: '图片保存成功', duration: 2000})
uni.hideLoading()
this.canvasCancelEvn();
},
fail(res3) {
if (res3.errMsg === 'saveImageToPhotosAlbum:fail auth deny') {
uni.showToast({title: '保存失败,稍后再试', duration: 2000,icon:'none'})
uni.hideLoading();
}else{
uni.showToast({title: '保存失败,稍后再试', duration: 2000,icon:'none'})
uni.hideLoading();
}
}
})
},
fail() {
uni.showToast({title: '保存失败,稍后再试',duration: 2000,icon:'none'})
wx.hideLoading();
}
})
七.经验分享
下一步就是:边准备考研,边跟大家分享一下微信小程序开发过程中的问题,因为我已经开发过两个小程序了,一个是一站式智慧停车,一个是21天习惯卡。对小程序还是比较熟练的。有问题可以联系,如果我会的话一定给大家解答。以后会接着在小程序专栏中更博,《小程序开发实战》。
##小目标
考完研之后,开出来另一款app,同时写一套ui组件开源给大家使用。
八.页面展示
最后了,跟大家展示一下打卡app的样式
九.总结
做这个一定要静下心来,其实开发一个小程序很快的,安卓app开发的时间比较长。但是像现在能够访问的那个简化版小程序,功能也比较完整,合起来开发的时间其实也就两天。如果使用云开发的话速度会更快,因为我是用的自己的服务器,然后配置的域名,使用异步数据交互。想开发小程序,两种方式可以都尝试尝试。