ショック！Androidアプリを開発して正常にリリースする15日間
まとめ
休暇で家にいて、現在は彼の3年生で、仕事と大学院を見つけるための2つのオプションに直面しています。しかし、就職にはあまり興味がなかったため、大学院受験に備えました。それから、大学院生の人生のちょっとした記録を、後の思い出として記録したいと思います。結局のところ、大学院入試はハードワークを通じて変更することができる最後の機会です。次に、アプリケーションマーケットおよびアプレットでさまざまなパンチアプリまたはアプレットを検索します。しかし、どれも独自の要件を満たしていません。独自の小さなパンチングプログラムを開発するために生まれました。小さなプログラムを開始して、リリースに成功しました。「21日習慣カード」と呼ばれ、機能が簡素化されています。しかし、アプレットの開発が満足できなくなった後、Androidを開発するというアイデアが浮上しました。このAndroidは通常のAndroidではありませんが、uniappで開発されたAndroidはWeb Androidアプリケーションと同等です。
機能表示、ページ表示
機能表示
アイテムビュー
Androidアプリのダウンロード：
WeChatアプレットの簡易バージョン
開発プロセス
uniappに連絡したことがないため、この冬休みはuniappとの最初の連絡ですが、uniappが使用するvueを調べます。開始する方が便利です。
インターフェース設計
dcloudコミュニティは多くのプラグインとテンプレートを提供し、それを追加する前にフロントエンドについて学習しました。そこで彼は自分で設計案を描きました。純粋な手描きなので、ここでは表示しません。まず関数について考え、次にスタイルを描き、特定の部分を指定し、クリックして特定のページにジャンプします。実際、それは簡単で、描くのは本当に簡単ではありません。ページ転送パラメーターを含めて、ロジックを明確に検討する必要があるため、パラメーターを間違えることはできません。各ページジャンプに必要なパラメーターも異なります。
機能設計
想定される機能：
1.パンチングリング：パブリックパンチングリングとプライベートパンチングリングの2つのタイプがあります。プライベートパンチリングサークルは、公開するかどうかを設定できます
｡ 2.日常のパンチング：最初はパンチングの内容のみを考え、パンチング機能については考慮していませんでした。その後、写真をアップロードするのは完璧ではないことが判明したので、パンチカードアップロード機能を追加しました。
3.パンチングカレンダー：毎日のパンチングを表示
4.パンチングチャート：パンチングデータを表示
5.グラフィックサークル：コンテンツを公開して公開でき、誰にでも推奨できます
後期に新たに追加された機能：
クレジット機能：今後のリソース共有アプリに備えます。
メンバー機能：ポイント数に基づく自動評価、無料、リソースアプリの準備も
匿名のベント：慣れることを強く求めると、常に気を散らすためにささいなことがたくさんあり、ベントする方法がないので、アバターとニックネームがランダムに生成される匿名のベントの機能を開発しました。誰がベントするか、しかしそれを言うのは常に良いことです。
（ベントコメント機能はまだ開発中です）
背景開発
バックエンドはJava言語を使用し、データベースはAlibaba Cloudサーバーにマウントされているmysqlを使用します。
フロントエンド開発
私は2人の兄貴のコンポーネントライブラリのコンテンツの一部を使用し、いくつかのページも自分で開発しました。同時に、自分のニーズに応じて、兄のコンポーネントライブラリを開発しました
Androidアプリの一部機能の実現
Androidログインステータスの保存
ストアを紹介
するには、まずmain.jsに次の文を追加し、ストアを紹介します
import store from './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',//获取数据的url
data: {
},
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の対応するページのスタイルに追加する必要があります。
"enablePullDownRefresh": true, // 开启下拉
"backgroundTextStyle": "dark"
次に、ページのonPullDownRefreshメソッドでデータを更新する必要があるリクエストインターフェイスを追加します。
onPullDownRefresh() {
var that=this
uni.request({
url: 'url',
data: {
},
method: 'POST',
header: {
"Content-Type": "application/x-www-form-urlencoded"
},
success: (res) => {
uni.stopPullDownRefresh()
}
})
},
パンチカード
パンチカードアプリとして、パンチカードの生成は重要ですが、誰もがこのパンチカードを保存するわけではありません。
しかし、パンチカードは、パンチカードを完成させた唯一の証拠です。
カードを引く
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()
カードの適応に関する問題
画面の問題
パンチカードの開発では、キャンバスを使用してパンチカードを描画する必要があります。また、携帯電話の画面は異なるため、携帯電話ごとのカードのレイアウトを考慮する必要があります。
この場所では、ユーザーの携帯電話の画面の幅と高さを取得するためにメソッドを使用しましたが、一部の特殊な携帯電話にもフォーマットエラーがいくつかありますが、少しだけシフトします。大きな問題ではない
テキストの折り返しの問題
2つの実装方法。
まず、テキストの長さがわからない、または特定の出力が
分割されるという問題に適用できます。まずテキストを分割して文字列の長さを取得し、次に分割によって分割します。
文字列を循環的に連結することにより、設定された幅に達すると自動的に描画され、文字列は空になり
、最後の行が描画されるまで連結が継続されます。
2つ目は、テキストの内容を事前に知って
いることです。パンチアプリを開発するときは、指定した内容を出力し、配列にランダムに文字列を生成します。このとき、文字列に分割記号を指定できます
私の開発では、有名な20の引用でランダムに文を生成しました。内容は既にわかっているので、2番目の開発方法を採用しました。
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
}
まとめ
パンチカードアプリの開発・設計を通じて、ユニアプリの仕組みを徹底的に理解。同時に、新しいアイデアもいくつかあります。リソースアプリを準備するのは、上記のポイントのようです。
次のステップは、リソースアプリの開発です。カードをパンチしてポイントを獲得し、必要なリソースを取得します。次に、パンチのリソースを段階的に学び、カードをパンチしてリソースを獲得することで能力を向上させます。今後開発されるアプリが皆様のお役に立てれば幸いです。
