震惊！十五天开发一款安卓APP并成功发布

摘要
- 功能展示，页面展示
- 功能展示
- 项目查看
- - 安卓app下载：
  - 简化版的微信小程序
- 开发过程
- - 界面设计
  - 功能设计
  - 后台开发
  - 前端开发
- 安卓app一些功能的实现
- - 安卓登录状态保存
  - 页面获取登录用户的信息
  - 下拉刷新功能
  - 打卡卡片
  - - 绘制卡片
    - 卡片适配问题
    - - 屏幕问题
      - 文字换行问题
- 总结

摘要

假期宅在家里，现在正处于大三，面临找工作和考研的两种选择。但是对找工作其实没有太大的兴趣，于是便准备考研。然后想着手记录一下考研的生活点滴，作为以后的一个回忆。毕竟考研是最后一次可以通过努力来改变学历的机会。然后就在应用市场和小程序搜罗各种各样的打卡app或者小程序。但是都没有符合自己的要求的。于是就萌生了开发一款属于自己的打卡小程序。刚开始做了个一个小程序并且成功发布了。叫做”21天习惯卡“，功能比较简化。但是开发完小程序之后并不满足，于是又萌生了开发安卓的想法。这个安卓并不是普通的安卓，而是通过uniapp开发的安卓，就相当于一个web安卓应用。

功能展示，页面展示

功能展示

观看视频

项目查看

安卓app下载：

安卓体验

简化版的微信小程序

开发过程

从来没有接触过uniapp，这个寒假是第一接触uniapp，但是看着uniapp使用的vue。还是比较方便上手的。

界面设计

dcloud社区提供了很多的插件还有模板，在加上之前也学习过前端。于是就自己绘制设计稿。纯手绘，所以这里就不跟大家展示了。先想了一下功能，然后绘制样式，指定某个部位点击跳转到某个页面。其实说着简单，画起来是真不容易。因为逻辑啥的要考虑清楚，包括页面传参，参数也不能出错，每个页面跳转需要的参数也是不同的。

功能设计

预期设想的功能：
1.打卡圈：分为两种，公共打卡圈，私人打卡圈。私人打卡圈可以设置是否可以被公共访问
2.每日打卡：刚开始想的是只有打卡内容，没考虑打卡图片的功能。后来发现没有上传图片不太完善，于是加入打卡上传功能。
3.打卡日历：查看每日打卡
4.打卡图表：查看打卡数据
5.图文圈子：可以公开发布自己的内容，可被推荐至全部人查看。
后期新加的功能：
积分功能：为了以后的资源分享app做准备。
会员功能：根据积分的多少自动评定，不收费，也是为了资源app做准备。
匿名发泄：在我们坚持习惯的时候，总会有很多的琐事来打扰我们，而我们也无从去发泄，于是就开发了匿名发泄的功能，在这里头像和昵称都是随机生成的没人知道是谁发泄的，但是说出来总归是好的。
（发泄评论功能还在开发中）

后台开发

后台采用Java语言，数据库采用mysql，挂载在阿里云服务器上。

前端开发

使用了两个大佬的组件库的一些内容，同时也自己开发了一些页面。同时也根据自己的需要二次开发了大佬的组件库

安卓app一些功能的实现

安卓登录状态保存

引入store
首先在main.js中加入如下一句话，引入store

import store from './store'

然后创建store目录，创建index.js文件，在里面写入

import Vue from 'vue'
import Vuex from 'vuex'Vue.use(Vuex)const store = new Vuex.Store({state: {/*** 是否需要强制登录*/forcedLogin: false,hasLogin: false,userinfo:{}},mutations: {login(state, userinfo) {//登录方法state.userinfo = userinfo;state.hasLogin = true;uni.setStorage({key: 'userinfo',//登录用户的信息data: userinfo})uni.setStorage({key:'hasLogin',//登录状态data:true})},logout(state) {//注销登录方法state.userinfo = {};state.hasLogin = false;uni.removeStorage({key: 'userinfo'//抹除登录用户信息});uni.removeStorage({key:'hasLogin'//抹除登录状态})}}
})export default store

完成之后，则需要在使用该方法的页面加入

import {mapState,mapMutations} from 'vuex';...mapMutations(['login']) //登录页面引入...mapMutations(['logout']) //注销页面引入

页面获取登录用户的信息

uni.getStorage({key: 'userinfo',//获取缓存中的用户信息success(e) {that.openid=e.data.openid//用户的唯一标志console.log(e.data)if (e.data) {uni.request({url: 'url',//获取数据的urldata: {},method: 'POST',header: {"Content-Type": "application/x-www-form-urlencoded"},success: (res) => {},fail: () => {uni.showModal({title:'您好，系统正在维护中'})}})}else {uni.navigateTo({//获取失败返回登录界面url: '../login/login'})}
})

下拉刷新功能

uniapp和小程序一样，需要开启onpulldownrefresh
在pages.json内的对应页面的style中加入

"enablePullDownRefresh": true, // 开启下拉
"backgroundTextStyle": "dark"

然后在页面内的onPullDownRefresh方法中加入需要刷新数据的请求接口

onPullDownRefresh() {var that=thisuni.request({url: 'url',data: {},method: 'POST',header: {"Content-Type": "application/x-www-form-urlencoded"},success: (res) => {uni.stopPullDownRefresh()}})},

打卡卡片

作为一个打卡app，打卡卡片的生成至关重要，虽然不是所有人都会去保存这个打卡卡片。
但是打卡卡片是我们打卡完成的唯一证据。

绘制卡片

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()
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)
var nowtime=hour+":"+minute
ctx.fillText(nowtime,wigth-56,100)
ctx.setFillStyle("#FFFFFF")
ctx.setFontSize(50)//设置字体大小，默认10
ctx.textAlign = 'center' // 设置位置
ctx.font = 'normal 40px sans-serif'; // 字体样式
ctx.fillText(day , 60, 80);
ctx.font = 'normal 15px sans-serif';
ctx.fillText("⛪枣庄市",70,120)
ctx.font = 'normal 10px sans-serif';
ctx.fillText("21天习惯打卡",60, wigth*1.70-45)
ctx.save()
ctx.font = 'normal 12px sans-serif';
var dayy=year+"."+month
ctx.fillText(dayy,60,100)
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 = '30px 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()

卡片适配问题

屏幕问题

而开发打卡卡片就需要用到canvas来绘制打卡卡片了。而且手机的屏幕都不一样，所以我们就要考虑卡片在不同手机的排版问题。
在这个地方，我采用了获取用户手机屏幕宽度和高度的方法，虽然有些特殊手机也会出现一些格式错乱，但是只是稍微有一点点移位。问题不大

文字换行问题

两种实现方法。

一，适用于文字长度不知道，也不知道具体输出的问题
将文字拆分，先得到字符串的长度，然后通过split分割。
通过循环串接字符串，当到达设定的宽度的时候自动绘制，然后字符串清空，继续串接
直到绘制到最后一行。

二，文字内容我们已经事先得知
当我们开发一些打卡app的时候，输出的内容我们都是规定好的，随机生成我们数组内的字符串，这个时候就可以规定字符串内的拆分符号

在我的开发中，我是在20句名言中随机生成一个句子，内容已经知道，于是采用了第二种开发方式

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 = '30px shuti';ctx.fillText(str[i], reallywight/2, height/2+uphight)uphight+=40
}

总结

通过这次打卡app的开发和设计，彻底了解了uniapp的工作机制。同时，自己也有了一些新的想法。就像是上文说的积分为资源app做准备。
下一步就是开发资源app，我们通过打卡获得积分，然后去领取自己需要的资源，然后在打卡资源的学习，循循渐进，通过打卡和资源获取，提高自己的能力。希望以后开发出来的app能够帮到大家。

震惊！！十五天开发出一款安卓打卡app,并且成功发布！相关推荐

十年游戏老兵，如何开发出一款受索尼青睐的VR游戏？
导语:本期公开课,雷锋网邀请到姚堃(Kun,更多的被人称为"姚姚丸"). 提及当下VR的应用场景,VR游戏无疑是最火的,也是最能够吸引消费者的.但针对目前三大头显平台Oculus ...
如何开发出一款仿映客直播APP项目实践篇 -【服务器搭建+推流】
如何开发出一款仿映客直播APP项目实践篇 -[原理篇] 如何开发出一款仿映客直播APP项目实践篇 -[采集篇 ] 如何开发出一款仿映客直播APP项目实践篇 -[服务器搭建+推流] 如何开发出一款仿映客 ...
2人同步听歌软件_【Android】魔音II 1.3 无损音乐下载软件震撼来袭，原音乐狂作者全新开发的一款安卓应用，低调使用！...
大家好,今天为大家推荐魔音II1.3,原音乐狂作者全新开发的一款安卓应用,完全免费无广告,付费歌曲无损音乐下载工具,可以批量下载.采集热门推荐新歌榜.热歌榜.DJ歌曲.歌单推荐,音乐搜索具有多条无损音 ...
最近开发了一个款安卓手机应用【摇摇语音记事本】
个人开发的第一款安卓应用上线了,纪念一下: 下载地址:http://apk.gfan.com/Product/App381905.html
网上有一款测试人血压的软件,中国和加拿大合作新研究开发出一款可通过自拍测量血压的软件...
中国杭州师范大学和加拿大多伦多大学研究人员借助透皮光学成像技术开发出的一款可通过自拍测量血压的软件. 据了解,中国杭州师范大学和加拿大多伦多大学研究人员借助透皮光学成像技术开发出的一款可通过自拍测量血 ...
普本在校生是如何零基础在一个月内开发出第一款微信小程序的
先自我介绍一下,我是一个普通本科的大三在读生,在2020年春节前后,自己一个人开发并上线了第一款微信小程序,后续陆续开发了N款小程序,并且自己通过毕设.课设的开发在2020年上半年的疫情期间挣了一万多 ...
安卓手机软件开发_这款安卓神器，让你下片更轻松！千万别滥用
小编一直在想,有木有一款安卓手机电影下载神器让用户在一个手机 App 软件里,既能播放 BT 文件,又能下载网盘文件呢? 谁又不想要一个迅雷+百度云网盘+资源网站,三合一的手机电影下载神器呢? 其实小 ...
10款安卓手机必备APP，能让你的手机更好用！
最近换了安卓手机,发现有很多安卓手机值得安装的神器App.下面10个冷门绝佳的安卓App,你未必全知道. 01 Via 一款主打简洁的浏览器,首页只有一个简简单单的搜索框,不会给你推荐各种奇葩新闻和资 ...
十大python开发软件-5款开发安全、高质量代码的优秀Python工具
怎样提高代码的质量.安全性和可维护性,本文作者推荐了五款工具,并从四个方面对其进行量化.并且,他还介绍了怎样将这些工具整进 CI pipeline. 为提高代码的质量.安全性和可维护性,软件工程师每天 ...

震惊！！十五天开发出一款安卓打卡app,并且成功发布！