みんなが休みの間何をしているか知りませんが、私は休みの間一週間家で寝ていました（ははは）。そこで今日は、WeChat アプレットの設計に基づいた小さなプロジェクトを、主に需要分析、全体設計、詳細設計、実装の 4 つの部分から共有する予定です。未熟な部分や不規則な部分も多々あるかもしれませんが、ご容赦ください。皆さんも交流し、一緒に学びましょう！(＾－＾)V
目次
1. 需要分析
1.1 プロジェクトの紹介
このプロジェクトは、クラウド開発、WeUI、およびノード ローカル サーバーに基づいて設計された「ソフトウェア デザイナー試験アシスタント」アプレットです。設計の意図は、ソフトウェア デザイナーとして認められる必要がある人が関連リソースを提供して、ソフトウェア デザイナー試験の準備をより良くできるようにすることです。テスト。
1.2 主な機能
このプロジェクトには主にホームページ、情報ページ、パーソナル センター ページが含まれており、各ページの主な機能は次のとおりです。
1.2.1 ホームページの機能要件分析
- ソフト テストの公式 Web サイトを表示します。モジュールのこの部分の対応する部分をクリックすると、ソフト テストの公式 Web サイトにアクセスできます。これは、ユーザーが信頼できるソフト テスト情報を参照するのに便利です。
- 過去の実際の質問を表示する: モジュールのこの部分では、さまざまな年のソフトウェア設計者の実際の質問を表示できます。ユーザーにとって、長年にわたる本当の疑問を理解するのに便利です。
- トピック演習: このパートには、さまざまな章の知識ポイントに対応するトピックがあり、ユーザーは演習することができます。
- ビデオを見る: このパートでは、さまざまな章の知識ポイントのビデオ説明を見ることができ、ユーザーが戦闘の準備を整えるのに便利です。
- メモの記録と表示: メモの記録はビデオ視聴セクションで設定され、ユーザーはビデオを見ながらメモを取ることができ、作成したメモを保存した後、メモ セクションで以前に作成したメモを表示できます。
- チェックリストの追加、表示、および削除: この部分は、ユーザーが学習タスクをより適切に計画するのに便利です。チェックリストを追加した後、対応するセクションで新しく追加されたチェックリストを表示したり、完了したチェックリストを削除したりできます。
- カレンダーの表示: この部分ではカレンダーを表示でき、対応するテストのカウントダウン表示が表示され、ユーザーがテストの準備を整えるのに便利です。
- マシン チャット: このパートでは、ロボットとチャットすることができ、また、英語の単語の中国語の意味、さまざまなコンピューター関連の知識の概念、天気予報の見方などの知識に関する質問をすることもできます。
1.2.2 情報の機能要件分析ページ
- 試験問題タイプの得点率グラフ: この部分には、午前と午後の試験の知識ポイントの得点率が円グラフとヒストグラムの形式で表示されます。ユーザーが試験の重要なポイントをよりよく理解できるようにします。
- よくある質問と回答: この部分には主にソフト テストに関する人気のある質問がいくつか含まれており、ユーザーはそれらを確認して対応する回答を得ることができます。上の検索ボックスにキーワードを直接入力して、必要な質問を検索して見つけることもできます。
1.2.3 パーソナル センター ページの機能要件分析
- ユーザーのログインと登録: この部分で未登録ユーザーは、ユーザー名、パスワード、携帯電話番号を入力して登録し、ユーザー名とパスワードを入力してログインする必要があります。
- ユーザー情報の変更: この部分では、ユーザーのパスワードと携帯電話番号を変更できます。
- ユーザーのログアウト: この部分では、すでに登録済みのユーザーは、ログアウト ボタンをクリックすることでログアウトできます。
- フィードバック: このセクションでは、製品および既存の問題についての意見を送信できます。
- 私たちについて: このセクションはこの製品の基本的な紹介です。
- 顧客連絡先: この部分は電話をかけるために使用できます。
2.全体のデザイン
2.1 プロジェクトの機能図
図 2-1 プロジェクトのフロントデスクの全体構成
プロジェクトのフロントデスク構造は主に、ホームページ、情報、パーソナルセンターの 3 つのページで構成されます。
図 2-2 プロジェクトのホームページの機能図
ホーム ページには、ソフト テスト公式 Web サイトの表示、過去の実際の問題の表示、ビデオの視聴、練習問題、メモの記録と表示、リストの表示と削除の追加、カレンダーの表示、およびマシン チャット モジュールが含まれます。
図 2-3 プロジェクト情報ページの機能図
情報ページには、試験問題タイプの得点率表、人気のある問題の表示および表示モジュールが含まれます。
図 2-4 プロジェクトパーソナルセンターページの機能図
個人センター ページには、ユーザーのログインと登録、ユーザー情報の変更、ユーザーのログアウト、フィードバック、当社と顧客の連絡先、その他の機能モジュールが含まれます。
図 2-5 プロジェクト後の機能図
プロジェクトのバックグラウンド機能には主に、ユーザー情報の追加・削除・確認・変更、ユーザーノート情報の追加・削除・確認・変更、リスト情報の追加・削除・確認・変更が含まれます。
2.2 プロジェクト構造図
図 2-6 ホームページの構造図
図 2-7 コンサルティング ページの構造図
図 2-8 コンサルティング ページの構造図
図2-9 パーソナルセンターページの構成図
3. 詳細設計
3.1 ER図とデータベース設計表
ユーザーのログイン登録にはユーザー テーブルが使用されます。このテーブルの属性にはユーザー名、携帯電話番号、パスワードが含まれ、ユーザー名が主キーになります。対応する ER 図とユーザー テーブルは次のとおりです。
図 3-1 ユーザー ER 図
表 3-1 ユーザーテーブル
| 名前 |
タイプ |
長さ |
空いてますか？ |
説明する |
| ユーザー名 |
弦 |
5 |
いいえ |
ユーザー名 |
| パスワード |
弦 |
6 |
はい |
パスワード |
| 電話 |
弦 |
11 |
はい |
電話番号 |
リストの内容にはリスト テーブルが使用され、その属性にはリストの内容、リスト ID、リスト時間が含まれ、リスト ID が主キーになります。対応する ER 図とユーザー テーブルは次のとおりです。
図 3-2 リスト ER 図
表3-2 リスト表
| 名前 |
タイプ |
空いてますか？ |
説明する |
| ID |
弦 |
いいえ |
リストID |
| リストコンテンツ |
弦 |
はい |
リストコンテンツ |
| リスト日付 |
弦 |
はい |
リストタイム |
| ユーザー名 |
弦 |
はい |
ユーザー名 |
ノートの内容にはノート テーブルが使用され、その属性にはノート ID、ノートの内容、ノートのタイトル、ユーザー名が含まれ、ノート ID が主キーになります。対応する ER 図とユーザー テーブルは次のとおりです。
図 3-3 注 ER 図
表 3-3 注記表
| 名前 |
タイプ |
空っぽでも許されるのか |
説明する |
名前 |
| ID |
弦 |
いいえ |
ノートID |
ID |
| noteコンテンツ |
弦 |
はい |
メモの内容 |
noteコンテンツ |
| メモタイトル |
弦 |
はい |
メモのタイトル |
メモタイトル |
3.2 プログラムの流れ
図3-4 登録部のビジネスロジック図
登録部分のビジネスロジックは以下の通りです: ユーザーがユーザー名、パスワード、携帯電話番号を入力すると、まずユーザーが入力した形式が正しいかどうかを判断します ユーザー名は 1 ～ 5 桁の任意の文字です、パスワードは6桁の数字または文字です。入力形式が間違っている場合は再入力が表示され、内容を再入力する必要がありますが、空でない場合は入力された同じアカウント名が登録されているかどうかを判断し、ユーザー名が設定されます。各ユーザーの ID 値であり、繰り返すことはできません。入力したユーザー名が既に登録されている場合は登録済みと表示され、登録されていない場合は登録が完了しています。
図3-5 ログイン部分のビジネスロジック図
ログイン部分のビジネス ロジックは次のとおりです: ユーザーがユーザー名とパスワードを入力します。入力が空の場合は、入力を空にすることはできないため、再入力する必要があることが表示されます。空でない場合は、まず入力されたユーザーが登録済みかどうかを判断し、登録されていない場合はユーザーが存在しないと表示し、そうでない場合はユーザー名とパスワードが一致するかどうかを判断します。プロンプトのパスワードが間違っています。
図 3-6 注意事項の業務フロー図
この部分のビジネスプロセスは、ユーザーがノートのタイトルと内容を記入して送信をクリックすると、まずユーザーがログインを完了したかどうかを判断し、ユーザーがログインしていない場合は、まずユーザーをアップグレードしません。ユーザーがログインしている場合、メモは保存されます。
図 3-7 リストの一部の業務フローチャート
この部分の業務プロセスは、まずリストの内容を書き込み、時刻を選択し、「追加」をクリックすると、まずユーザーがログインを完了したかどうかを判断します。
4. 実現する
4.1 ホームページモジュール
4.1.1 ホームページのデザイン
図 4-1 ホームページ
このページは、カルーセルの中央にある 9 つの正方形のグリッドと、下部にある 2 つの写真で構成されています。中央の 9 マスのグリッドは weui のテンプレートを使用します。さまざまなセクションをクリックして、さまざまな機能ページに入ります。まずジャンプする必要があるページのアドレスを配列に保存し、クリック時間を九公格の各小さなモジュールにバインドし、クリック後に対応する添字を取得し、ジャンプ先の添字アドレスを通じて対応する配列を取得します。コアコードは次のとおりです。
onTapBlock(event) {
const index = event.currentTarget.dataset.index;
if(index==0){
const url=this.data.websiteUrl
wx.navigateTo({
url: "../../pages/official/offocial?url="+encodeURIComponent(url),
})
}
wx.navigateTo({
url: this.data.urlList[index]
})
}4.1.2. 公式サイトのページデザイン
図 4-2 公式 Web サイトのページ
公式サイトのアドレスはページ間のWebビューで設定されており、公式サイトモジュールをクリックしてこのページにジャンプすると、公式サイトに対応するWebビューに対応するsrcがページ番号に割り当てられます。道。コアコードは次のとおりです。
onTapBlock(event) {
const index = event.currentTarget.dataset.index;
if(index==0){
const url=this.data.websiteUrl
wx.navigateTo({
url: "../../pages/official/offocial?url="+encodeURIComponent(url),
})
}
wx.navigateTo({
url: this.data.urlList[index]
})
}4.1.3. Zhenti ページのデザイン
図 4-3 実際の質問ページ
このページでは、まず各年度の実問題が表示され、該当する実問題をクリックすると、その実問題に対応するPDFファイルが開きます。そのコアコードは次のとおりです。
show(event){
const index = event.currentTarget.dataset.index;
const url=this.data.list2[index].pdfUrl;
console.log(url)
wx.setStorage({
key:'pdfUrl',data:url
}),
wx.navigateTo({
url: '../../pages/test/test',
})
}4.1.4. 演習ページのデザイン
図 4-4 練習ページ
このページでは、さまざまな章をクリックして、さまざまな章の問題を練習できます。間違ったトピックを選択した場合は、プロンプト機能が表示されます。質問を完了した後、[送信] をクリックすると、正解した質問の数が表示されます。コアコードは次のとおりです。
radioChange:function(e){
let index = e.currentTarget.dataset.index
let id = e.currentTarget.dataset.id
let detail = this.data.detail
if(detail[id-1].answer!=index+1){
wx.showToast({
title: '答案错误',
icon: 'none',
duration: 1000
})
}
for(let i = 0;i<detail.length;i++){
if(detail[i].id == id){
detail[i].array[index].usname = true
for(let j = 0;j<detail[i].array.length;j++){
if (j != index){
detail[i].array[j].usname = false
}
}
}
}
this.setData({
detail:detail
})
}4.1.5. ビデオページのデザイン
図 4-5 ビデオページ
このページでは、さまざまなチャプターセクションをクリックしてさまざまなビデオを再生できます。また、さまざまなチャプター セクションに対応するビデオ アドレスを配列に格納し、さまざまなセクションをクリックして配列内の対応するビデオ アドレスを取得し、対応するインデックス値を取得します。同時に、この部分はメモを取る機能も実行でき、メモのアイコンをクリックすると入力ボックスが表示され、メモのタイトルとメモの内容を出力し、保存ボタンをクリックして保存します。それを対応するノートデータベーステーブルに追加します。コアコードは次のとおりです。
onTapVideo(event) {
const index = event.currentTarget.dataset.index;
const videoSrc=this.data.videoList[index].src;
this.setData({videoSrc})
},
db2.add({
data:{
username:user,
noteContent:this.data.noteContent,
noteTitle:this.data.noteTitle
},
success(res){
wx.showToast({
title: '保存成功',
// icon: 'none',
duration: 1000
})
}
}4.1.6. ノートページのデザイン
図 4-6 「メモ」ページ
このページには、ログインしたユーザーが作成したメモが表示されます。ページは、ログインしているユーザーのユーザー名を取得し、対応するメモ テーブルで対応するユーザーを見つけて、ページが読み込まれるときにページ上に表示します。コアコードは次のとおりです。
onLoad(){
const user=wx.getStorageSync('user')
db2.where({
username:user
}).get().then(res=>{
this.setData({
list:res.data,
})
console.log(this.data.list)
}).catch(err=>{
console.log('查询失败')
})
}4.1.7. リストページのデザイン
図 4-7 リストページ
このページはリストを追加するためのページです。ログイン後、リストを追加し、完了するタスクを書き込み、対応する時間を選択できます。追加をクリックすると、追加されたリストの内容がページに表示されます対応するタスクを完了した後、対応する削除アイコンをクリックすると、対応するリストを削除できます。主にクラウドデータベースへの操作の追加や削除に使用されます。コアコードは次のとおりです。
saveList:function(e){
const user=wx.getStorageSync('user')
db3.add({
data:{
username:user,
listContent:this.data.listContent,
listDate:this.data.checkTime
},
success(res){
wx.showToast({
title: '添加成功',
duration: 1000
})
}
})
}4.1.8. カレンダーページのデザイン
図 4-8 カレンダー ページ
このページにはカレンダーが表示され、次の試験の時間がマークされ、カレンダー上でカウントダウンされます。コアコードは次のとおりです。
setMonth(setYear, setMonth, setDay) {
const day = Math.min(new Date(setYear, setMonth, 0).getDate(), this.data.selectDay.day)
if (this.data.selectDay.year !== setYear || this.data.selectDay.month !== setMonth) {
const data = {
selectDay: {
year: setYear,
month: setMonth,
day: setDay ? setDay : day
},
}
if (!setDay) {
data.open = true
}
this.setData(data, () => {
this.triggerEvent("selectDay", this.data.selectDay)
})
} else {
const data = {
selectDay: {
year: setYear,
month: setMonth,
day: setDay ? setDay : day
},
}
this.setData(data, () => {
this.triggerEvent("selectDay", this.data.selectDay)
})
}
}4.1.9. マシンチャットページのデザイン
図 4-9 チャットページ
このページは、対応するマシン チャット API を呼び出し、質問パラメーターをそれに渡し、その回答を取得することによって、マシンとチャットする機能を実現します。そしてそれをチャットデザインの方法でページに表示します。コアコードは次のとおりです。
wx.request({
url: 'https://apis.tianapi.com/robot/index?key=b56666e36a7f1322226965fa221842c3&question='+this.message,
method:'POST',
success:(res)=>{
if(res.data.code == 200){
var ans={}
ans.id = this.id++
ans.content=res.data.result.reply
ans.role = 'server'
var list = this.data.list
list.push(ans)
this.setData({
list: list
});
this.rollingBottom()
this.message=''
}},
fail: function (err) {
console.log(err)
}
})4.2 情報ページモジュール
4.2.1 質問の部分設計
図4-10 質問タイプ配布ページ
このページは、質問タイプ分析と人気の質問という 2 つの小さなページで構成されています。質問タイプ分析では、対応する円グラフとヒストグラムを描画するための echarts チャートが導入されています。この部分では、公式 Web サイトからダウンロードした echarts.min.js ファイルの簡潔なバージョンをページの Index.js 部分に導入する必要があります。Index.js にコードとデータを追加し、wxml ページで宣言されたチャート コンテナーに必要な情報をバインドします。そのコアコードは次のとおりです。
function initChart2(canvas, width, height, dpr) {
const chart2 = echarts.init(canvas, null, {
width: width,
height: height,
devicePixelRatio: dpr
});
canvas.setChart(chart2);
var option = {
xAxis: {
type: 'category',
data: ['DF', 'RE', 'UML', '算法', 'Java']
},
yAxis: {
type: 'value'
},
series: [
{
data: [15,15,15,15,15],
type: 'bar',
showBackground: true,
backgroundStyle: {
color: 'rgba(180, 180, 180, 0.2)'
}
}
]
};
chart2.setOption(option);
return chart2;
}4.2.2 よくある質問ページ
図 4-11 情報ページ
「よくある質問」ページには、検索ボックスとリストが含まれています。検索ボックスには検索機能があり、ユーザーが入力した内容を動的に取得し、以下のリストのタイトルと照合することで、該当するリストが表示され、その他のリストは非表示になります。この処理ではフィルターフィルターを使用します。リストの部分は、wx:forを使用してタイトルと画像をレンダリングしますが、同時に、各リストのコンテンツページに相当するページがあまりにも多く生成されることを避けるために、この部分ではページ再構築という設計手法を採用して、リストごとにコンテンツページを格納します。全ページの内容 json ファイルでは、別のリストをクリックすることで対応するページのインデックス値も取得され、その値が json ファイル内の配列の添字と照合されて、対応するデータが要求されます。そのコアコードは次のとおりです。
onSearchInput:function(e){
var keyword=e.detail.value
console.log(keyword)
if(keyword){
var filtered=this.data.contents.filter(function(item){
return item.article.indexOf(keyword)>=0
})
this.setData({filtereds:filtered})
}else{
this.setData({
filtereds:this.data.contents
})
}
},
onTapModule(event){
const moduleId = event.currentTarget.dataset.index;
wx.request({
url: 'http://127.0.0.1:3000/question.json',
method:'GET',
header:{
"content-type":'application/json'
},
success(res){
const{title,content}=res.data[moduleId]
console.log(title)
wx.navigateTo({
url: '../../pages/question/question?title='+encodeURIComponent(title) + '&content=' + encodeURIComponent(content),
})
},
fail(error){
console.error('error:',error)
}
})
}4.3. パーソナルセンターページモジュール
4.3.1 パーソナル センター ページのデザイン
図 4-12 パーソナル センター ページ
この部分はアバターをクリックすることでログイン・登録が可能となり、ページ上にログインユーザーのユーザー名と携帯電話番号が表示されます。同時に QR コード アイコンもあり、対応するアイコンをクリックすると、対応する学習グループの QR コードがポップアップ表示されます。この部分は主にイベントをアイコンにバインドしており、まず学習グループ部分のモジュールを非表示にし、アイコンをクリックすると非表示の値にtrueを代入して学習グループのモジュールを表示します。
hideImage(){
this.setData({
isModalShow: false
});
},このページには、ログインしているユーザーのユーザー名と携帯電話番号が表示されます。この部分では、キャッシュ機構を使用してログインしているユーザーのユーザー名を取得し、対応するユーザー テーブルから対応するユーザーを検索し、対応するユーザーを検索します。ユーザー名と携帯電話番号の番号がページに表示されます。そのコアコードは次のとおりです。
onShow(options){
const user=wx.getStorageSync('user')
db.where({
username:user
}).get().then(res=>{
this.setData({
username:res.data[0].username,
phone:res.data[0].phone
})
}).catch(err=>{
console.log('查询失败')
})
}
顧客連絡先部分は公式Webサイトが提供するダイヤルプラグインを使用しており、具体的なコアコードは以下の通りです。
contact: function (e) {
wx.makePhoneCall({
phoneNumber: '0663-3213125'
})
},4.3.2. ログインおよび登録ページのデザイン
(なぜ WeChat ミニ プログラムをまだ登録する必要があるのかは聞かないでください。先生にそうするように言われたのですが、私も非常に無力です。)
図 4-13 登録インターフェイス
アバターをクリックすると、最初にログイン インターフェースが表示されます。ユーザーが以前に登録していない場合は、ログインできません。最初に下のフォントをクリックする必要があります。ページは、ログイン インターフェースから登録ページ。ログインと登録では、v-if と v-else を使用してログインと登録を切り替えます。登録部分では、ユーザーが出力したコンテンツの形式を検証します。コアコードは次のとおりです。
db.get({
success:(res)=>{
let user=res.data;
for(let i=0;i<user.length;i++){
if(this.data.username===user[i].username){
flag=true;
break;
}
}
if(flag===true){
wx.showToast({
title: '账号已存在',
icon:'error',
duration:1000
})
}
else{
db.add({
data:{
username:this.data.username,
password:this.data.password,
phone:this.data.phone
},
success(res){
wx.showToast({
title: '注册成功',
duration: 1000
})
}
})
setTimeout(()=>{
this.setData({
isLoginShow:true
})
},2000)
}
}
})
submit:function(e){
let flag=false
if(this.data.usernameLogin==''||this.data.passwordLogin==''){
wx.showToast({
title: '账号或密码为空',
icon:'error',
duration:1000
})
}else{
db.get({
success:(res)=>{
let user=res.data;
for(let i=0;i<user.length;i++){
if(this.data.usernameLogin===user[i].username){
flag=true;
if(this.data.passwordLogin!==user[i].password){
wx.showToast({
title: '密码错误!',
icon:'error',
duration:1000
});
break;
}else{
wx.showToast({
title: '登录成功',
icon:'success',
duration:1000
})
flag=true;
wx.setStorageSync('user',this.data.usernameLogin)
setTimeout(()=>{
wx.switchTab({
url: '../../pages/person/person',
})
},1000)
break;
}
}
};
if(flag==false){
wx.showToast({
title: '用户不存在',
icon:'error',
duration:1000
})
}
}
})
}
}4.3.3. アカウント設定ページ
図 4-14 アカウント設定ページ
アカウント設定 この部分では、ユーザーのパスワードと携帯電話番号を変更したり、ユーザーをログアウトしたりすることができます。この部分では、パスワードと携帯電話番号の横にある編集アイコンをクリックすると、入力ボックスがポップアップ表示され、新しく変更したパスワードまたは携帯電話番号を入力して、対応する情報を変更します。そのコアコードは次のとおりです。
savePh:function(e){
const user=wx.getStorageSync('user')
db.where({
username:user
}).update({
data:{
phone:this.data.phoneNew
}
}).then(res=>{
this.setData({
phone:this.data.phoneNew
})
wx.showToast({
title: '修改成功',
icon:'success',
duration:1000
})
}).catch(err=>{
console.log("更新失败",err)
})
}
handleLogout(){
const user=wx.getStorageSync('user')
if(!user){
console.log('获取到不到对应用户')
return
}
db.where({
username:user,
}).remove({
success:res=>{
console.log("注销成功",res)
wx.showToast({
title: '注销成功',
icon:'success',
duration:1000
})
setTimeout(()=>{
wx.reLaunch({
url: '../../pages/login/login',
})
},1500)
const exit=''
wx.setStorageSync('user',exit)
},
fail:err=>{
console.log("注销失败")
}
})
}この記事はこれで終わりです。一部の WeChat アプレット インターフェイス、API 呼び出し、クラウド データ操作、ページの再利用、ローカル サーバーのセットアップなどがこの記事で使用されています。興味があれば、後で対応するものを公開できます。記事の説明。この記事ではコードのほんの一部のみを示しています。必要な場合は、ソース コードについてプライベート メッセージを送ってください。！！