Sorprendido! ! Quince días para desarrollar una aplicación de tarjeta perforada para Android, ¡y lanzada con éxito!

Resumen

Quedarse en casa de vacaciones, ahora en su tercer año, enfrentando dos opciones para encontrar trabajo y posgrado. Pero no había mucho interés en encontrar un trabajo, por lo que se preparó para el examen de posgrado. Entonces quiero comenzar a grabar un poco de la vida del posgrado, como un recuerdo posterior. Después de todo, el examen de ingreso de posgrado es la última oportunidad que se puede cambiar a través del trabajo duro. Luego busque varias aplicaciones o applets de perforación en el mercado de aplicaciones y applets. Pero ninguno de ellos cumple con sus propios requisitos. Así nació para desarrollar un pequeño programa de punzonado propio. Acabo de comenzar un pequeño programa y lo lancé con éxito. Se llama " tarjeta de hábito de 21 días ", y su función se simplifica. Pero después de que el desarrollo del applet no quedó satisfecho, surgió la idea de desarrollar Android. Este Android no es un Android ordinario, pero Android desarrollado a través de uniapp es equivalente a una aplicación web de Android.

Visualización de funciones, visualización de página

Pantalla de funciones

Mira el video

Vista del artículo

Descarga de la aplicación de Android:

Experiencia de Android

Una versión simplificada del applet WeChat

Proceso de desarrollo

Nunca contacté a uniapp, estas vacaciones de invierno son el primer contacto con uniapp, pero observamos el vue utilizado por uniapp. Es más conveniente comenzar.

Diseño de la interfaz

La comunidad dcloud proporciona muchos complementos y plantillas, y también ha aprendido el front end antes de agregarlo. Entonces él mismo dibujó el borrador del diseño. Puro pintado a mano, así que no lo mostraré aquí. Primero piense en la función, luego dibuje un estilo, especifique una parte determinada y haga clic para saltar a una página determinada. De hecho, es simple, realmente no es fácil de dibujar. Debido a que la lógica debe considerarse claramente, incluidos los parámetros de transferencia de página, los parámetros no pueden estar equivocados, los parámetros requeridos para cada salto de página también son diferentes.

Diseño funcional

Las funciones que se prevén:
1. Anillos de perforación: existen dos tipos: anillos de perforación públicos y anillos de perforación privados. El círculo de perforación privado se puede establecer si el público puede acceder a él
2. Perforación diaria: Al principio, solo pensé en el contenido de perforación y no consideré la función de perforar imágenes. Más tarde, se descubrió que no era perfecto cargar imágenes, así que agregué la función de carga de tarjetas perforadas.
3. Calendario de perforación: Ver perforación diaria
4. Gráfico de perforación: visualización de datos de perforación
5. Círculo gráfico: puede publicar su contenido públicamente y se puede recomendar que todos lo vean.
Función recientemente agregada en el período posterior:
Función de crédito: prepararse para la futura aplicación de intercambio de recursos.
Función de miembro: evaluación automática basada en el número de puntos, sin cargo, pero también para la preparación de la aplicación de recursos.
Ventilación anónima: cuando insistimos en acostumbrarnos, siempre habrá muchas cosas triviales que nos molestarán, y no tenemos forma de ventilarnos, por lo que desarrollamos la función de ventilación anónima, donde el avatar y el apodo se generan aleatoriamente. Quién respira, pero siempre es bueno decirlo.
(La función de comentario de ventilación aún está en desarrollo)

Desarrollo de fondo

El back-end usa lenguaje Java, y la base de datos usa mysql, que está montado en el servidor Alibaba Cloud.

Desarrollo front-end

Utilicé parte del contenido de las bibliotecas de componentes de los dos hermanos mayores y también desarrollé algunas páginas. Al mismo tiempo, de acuerdo con sus propias necesidades, ha desarrollado la biblioteca de componentes del hermano mayor.

Realización de algunas funciones de la aplicación de Android.

Ahorro de estado de inicio de sesión de Android

Para introducir la tienda,
primero agregue la siguiente oración a main.js, introduzca store

import store from './store'

Luego cree el directorio de la tienda, cree el archivo index.js, escriba en él

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

Una vez completado, debe unirse a la página con este método.

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

Página para obtener la información del usuario conectado

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

Función de actualización desplegable

Uniapp es el mismo que el applet, debe habilitar onpulldownrefresh
y agregarlo al estilo de la página correspondiente en pages.json

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

Luego agregue la interfaz de solicitud que necesita actualizar los datos en el método onPullDownRefresh en la página

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

Tarjeta perforada

Como una aplicación de tarjetas perforadas, la generación de tarjetas perforadas es crucial, aunque no todos guardarán esta tarjeta perforada.
Pero la tarjeta perforada es la única evidencia de que hemos completado la tarjeta perforada.

Robar tarjeta

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()

Problemas de adaptación de la tarjeta

Problema de pantalla

El desarrollo de tarjetas perforadas requiere el uso de lienzo para dibujar tarjetas perforadas. Y las pantallas de los teléfonos móviles son diferentes, por lo que debemos considerar el diseño de las tarjetas en diferentes teléfonos móviles.
En este lugar, utilicé el método para obtener el ancho y la altura de la pantalla del teléfono móvil del usuario. Aunque algunos teléfonos móviles especiales también tendrán algunos errores de formato, solo se desplazarán ligeramente. No es un gran problema

Problemas de ajuste de texto

Dos métodos de implementación.

Primero, es aplicable al problema que no se conoce la longitud del texto o que la salida específica se
divide. Divida el texto para obtener primero la longitud de la cadena y luego sepárela por división.
Al concatenar cíclicamente las cadenas de caracteres, se dibuja automáticamente cuando se alcanza el ancho establecido, luego se vacía la cadena de caracteres y la concatenación continúa
hasta que se dibuja la última línea.

En segundo lugar, hemos conocido el contenido del texto de antemano.
Cuando desarrollamos algunas aplicaciones de perforación, enviamos el contenido como se especifica y generamos aleatoriamente las cadenas en nuestra matriz. En este momento, podemos especificar el símbolo de división en la cadena.

En mi desarrollo, generé al azar una oración en 20 citas famosas, el contenido ya se conoce, así que adopté el segundo método de desarrollo

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
}

Resumen

A través del desarrollo y el diseño de la aplicación de tarjetas perforadas, comprendemos a fondo el mecanismo de trabajo de uniapp. Al mismo tiempo, también tengo algunas ideas nuevas. Es como los puntos mencionados anteriormente para prepararse para la aplicación de recursos.
El siguiente paso es desarrollar una aplicación de recursos. Ganamos puntos al perforar tarjetas, y luego obtenemos los recursos que necesitamos. Luego aprendemos los recursos de perforación paso a paso, y mejoramos nuestra capacidad al perforar tarjetas y adquirir recursos. Espero que la aplicación desarrollada en el futuro pueda ayudar a todos.