安卓app下載三分鐘，數據服務都崩了

一.前言

大家不要說我是標題黨哈…前天晚上真的是震驚了，上一篇博文被推薦之後，許多朋友都去了我開發的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開發的時間比較長。但是像現在能夠訪問的那個簡化版小程序，功能也比較完整，合起來開發的時間其實也就兩天。如果使用雲開發的話速度會更快，因爲我是用的自己的服務器，然後配置的域名，使用異步數據交互。想開發小程序，兩種方式可以都嘗試嘗試。