前言
大家不要说我是标题党哈…前天晚上真的是震惊了，上一篇博文被推荐之后，许多朋友都去了我开发的app的展示网页上去下载app，因此当时服务器的带宽被完全的占据了，整个服务器的出网带宽和出网流量都在最顶上。上一篇博文没有跟介绍这个app的开发目的。其实最刚开始的目的很单纯，给我还有我好朋友用来记录考研生活的。但是后来简化版的小程序发布之后，也有很多朋友在用，于是就启动开发了app。开发开始是3.15号，第一个版本发布是4.1号。
想法
现在想开发一款app，跟着这个一块使用，但是现在又要考研，于是就先把想法记在了自己的ipad上。两款app是合起来一起使用的，助力学习。如果又想要开发的，可以联系我，然后先学学后端技术。等我考完研咱么一起合作开发。
成果展示
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开发的时间比较长。但是像现在能够访问的那个简化版小程序，功能也比较完整，合起来开发的时间其实也就两天。如果使用云开发的话速度会更快，因为我是用的自己的服务器，然后配置的域名，使用异步数据交互。想开发小程序，两种方式可以都尝试尝试。
