Chocado! ! Quinze dias para desenvolver um aplicativo de cartão perfurado para Android e lançado com sucesso!

Sumário

Ficar em casa em férias, agora em seu primeiro ano, enfrentando duas opções para encontrar emprego e pós-graduação. Mas como não havia muito interesse em encontrar um emprego, ele se preparou para o exame de pós-graduação. Quero começar a registrar um pouco da vida da pós-graduação, como lembrança posterior. Afinal, o exame de admissão de pós-graduação é a última oportunidade que pode ser alterada através de muito trabalho. Em seguida, pesquise vários aplicativos ou applets de perfuração no mercado de aplicativos e applets. Mas nenhum deles atende a seus próprios requisitos. Por isso, nasceu para desenvolver um pequeno programa de perfuração. Acabei de iniciar um pequeno programa e o liberei com sucesso. É chamado " cartão de hábitos de 21 dias " e sua função é simplificada. Mas depois que o desenvolvimento do applet não foi satisfeito, surgiu a ideia de desenvolver o Android. Este Android não é um Android comum, mas o Android desenvolvido através do uniapp é equivalente a um aplicativo Android da Web.

Exibição de função, exibição de página

Exibição de função

Assista ao vídeo

Visualização de item

Download de aplicativo para Android:

Experiência Android

Uma versão simplificada do miniaplicativo WeChat

Processo de desenvolvimento

Nunca contatou a uniapp, essas férias de inverno são o primeiro contato com a uniapp, mas observando o valor usado pela uniapp. É mais conveniente começar.

Design de interface

A comunidade dcloud fornece muitos plugins e modelos e também aprendeu o front end antes de adicioná-lo. Então ele mesmo desenhou o rascunho do projeto. Puro pintado à mão, por isso não o mostrarei aqui. Primeiro pense na função, depois desenhe um estilo, especifique uma determinada parte e clique para pular para uma determinada página. De fato, é simples, não é realmente fácil desenhar. Como a lógica deve ser considerada claramente, incluindo parâmetros de transferência de página, os parâmetros não podem estar errados, os parâmetros necessários para cada salto de página também são diferentes.

Design funcional

As funções previstas:
1. Anéis de punção: Existem dois tipos: anéis de punção públicos e anéis de punção privados. O círculo de puncionamento particular pode ser definido se ele pode ser acessado pelo público
2. Punção diária: No começo, pensei apenas no conteúdo da punção, sem considerar a função de puncionar imagens. Mais tarde, verificou-se que não era perfeito fazer upload de fotos, então adicionei a função de upload de cartões perfurados.
3. Calendário de punções
: visualize punções diárias 4. Gráfico de punções: exibindo dados de punções
5. Círculo gráfico: você pode publicar seu conteúdo publicamente e isso pode ser recomendado a todos.
Função recém-adicionada no período posterior:
Função de crédito: prepare-se para o futuro aplicativo de compartilhamento de recursos.
Função membro: avaliação automática com base no número de pontos, sem custo, mas também para a preparação do aplicativo de recursos.
Ventilação anônima: quando insistimos em nos acostumar, sempre haverá muitas coisas triviais para nos perturbar, e não temos como desabafar, então desenvolvemos a função de ventilação anônima, onde o avatar e o apelido são gerados aleatoriamente. Quem desabafa, mas é sempre bom dizê-lo.
(A função de comentário de ventilação ainda está em desenvolvimento)

Desenvolvimento em segundo plano

O back-end usa a linguagem Java e o banco de dados usa o mysql, que é montado no servidor Alibaba Cloud.

Desenvolvimento front-end

Usei parte do conteúdo das bibliotecas de componentes dos dois grandes irmãos e também desenvolvi algumas páginas. Ao mesmo tempo, de acordo com suas próprias necessidades, ele desenvolveu a biblioteca de componentes do big brother

Realização de algumas funções do aplicativo Android

Economia de status de login no Android

Para introduzir a loja,
primeiro adicione a seguinte frase ao main.js, introduza a loja

import store from './store'

Em seguida, crie o diretório da loja, crie o arquivo index.js, escreva nele

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

Após a conclusão, você precisa ingressar na página usando este método

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

Página para obter as informações do usuário 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'
				})
			}
})

Função de atualização suspensa

Uniapp é o mesmo que o applet, é necessário ativar onpulldownrefresh
e adicioná-lo ao estilo da página correspondente em pages.json

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

Em seguida, adicione a interface de solicitação que precisa atualizar os dados no método onPullDownRefresh na 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()
				}
			})
		},

Cartão perfurador

Como um aplicativo de cartão perfurado, a geração de cartões perfurados é crucial, embora nem todos salvem esse cartão perfurado.
Mas o cartão perfurado é a única evidência de que completamos o cartão perfurado.

Draw card

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 adaptação do cartão

Problema na tela

O desenvolvimento de cartões perfurados requer o uso de lona para desenhar cartões perfurados. E as telas dos telefones celulares são diferentes, por isso temos que considerar o layout dos cartões em diferentes telefones celulares.
Nesse local, usei o método para obter a largura e a altura da tela do telefone móvel do usuário, embora alguns telefones celulares especiais também apresentem alguns erros de formatação, mas apenas uma pequena mudança. Não é um grande problema

Problemas de quebra de texto

Dois métodos de implementação.

Primeiro, é aplicável ao problema que o comprimento do texto não é conhecido ou a saída específica é
dividida. Divida o texto para obter o comprimento da string primeiro e depois divida-o por divisão.
Ao concatenar ciclicamente as cadeias de caracteres, ele desenha automaticamente quando a largura definida é atingida, as cadeias de caracteres são limpas e a concatenação continua
até que a última linha seja desenhada.

Segundo, conhecemos o conteúdo do texto com antecedência.Quando
desenvolvemos alguns aplicativos de perfuração, produzimos o conteúdo conforme especificado e geramos aleatoriamente as seqüências de caracteres em nossa matriz.Neste momento, podemos especificar o símbolo de divisão na sequência

No meu desenvolvimento, gerei aleatoriamente uma frase em 20 citações famosas, o conteúdo já é conhecido, então adotei o segundo método de desenvolvimento

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
}

Sumário

Através do desenvolvimento e design do aplicativo de cartões perfurados, entendemos completamente o mecanismo de trabalho do uniapp. Ao mesmo tempo, também tenho novas idéias. É como os pontos mencionados acima para se preparar para o aplicativo de recursos.
O próximo passo é desenvolver um aplicativo de recursos: ganhamos pontos perfurando cartões e obtemos os recursos de que precisamos.Então aprendemos os recursos perfurados passo a passo e melhoramos nossa capacidade perfurando cartões e adquirindo recursos. Espero que o aplicativo desenvolvido no futuro possa ajudar a todos.