第一節：微信ミニプログラムの構成と作成
第二節：微信開発者ツール使用チュートリアル
第三節：ミニプログラムの主要コンポーネントの深い理解とマスター
第四節：クラウド関数とデータベースの初期化
第五節：クラウドデータベースのCRUD操作
第七節：活動申請ページの作成
第八節：活動申請ページの補足
第九節：「マイページ」の作成
第十節：活動詳細ページの作成
第十一節：活動履歴ページの作成
第十二節：講師予約ページの作成
第十三節：予約履歴ページの作成
第十四節：活動承認端の作成
第十五節：予約承認端の作成
プロジェクトのGitHubリポジトリ プロジェクトのオンラインドキュメント このプロジェクトは、大学1年生と2年生の時にフロントエンドを独学で学んで作成した比較的大規模なプロジェクトで、主な原型は汕頭大学校团委の微信ミニプログラムです。この微信ミニプログラムは微信のネイティブ構文とテンセントクラウド開発フレームワークを使用して開発され、汕頭大学校团委の教員予約申請と活動申請の承認プロセスを簡素化することを目的としています。すべてのコードとフレームワークはゼロから構築され、数バージョンの反復と試行錯誤を経て、約2年間安定して運用されています。そのため、このシリーズの記事を書きたいと思っています。一方で開発経験や心得を共有し、もう一方で学校組織に少しでも貢献したいと思っています。
このシリーズのブログを通じて、「汕頭大学校团委微信ミニプログラム」の開発プロセス、機能実装、技術的な詳細を深く紹介し、より多くの開発者やユーザーがこのミニプログラムを理解し使用できるように助けたいと思います。また、このオープンソースプロジェクトに貢献してくれる開発者も歓迎します。PRの提出や質問を残してくれても大歓迎です。このプロジェクトは純粋に愛の発電なので、金銭的な利益は一切ありません。このプロジェクトがあなたの役に立った場合は、星を一つ付けていただけますか？
序章
第九節で「マイページ」を作成しました。この節では「活動履歴」ページを作成します。このページでは「活動総括審査中」と「終了済み」の2つの状態の活動を表示します。つまり、state値が3と4の活動です。具体的なスタイルは以下の図のようになります。
「活動履歴」の思考マップ
完成図
核心思想
「マイページ」の作成思路と基本的に同じですが、ボックスのスタイルが異なります！
実装手順
history.wxml：
<view class="container">
<view class="userinfo">
<view class="activity_history">
<view class="history_title">
終了した活動
</view>
<view class="history_content" wx:for="{{records}}">
<view class="event_card" bindtap="navigateToDetail" data-id="{{item._id}}">
<view>活動名：{{item.activityName}}</view>
<view class="event_time"> 活動開始時間：{{item.startTime}}</view>
</view>
<!-- stateが4は活動総括報告が承認済み、3は活動総括報告が提出済み -->
<block wx:if="{{item.status==3}}">
<!-- 承認済み -->
<view class="status_pending">
<view class="status_text">承認済み</view>
</view>
<!-- 活動下の小さな点 -->
<image src="../../icon/green.png" style="width: 11px;height: 11px;position: absolute;left: 15px;bottom: 15px;"></image>
<view class="action_button">
<button class="detail_button" size="mini">
<view>
活動総括審査中..
</view>
</button>
</view>
</block>
<block wx:if="{{item.status==4}}">
<!-- 活動報告が承認済み -->
<view class="status_completed">
<view class="status_text">終了済み</view>
</view>
<!-- 活動下の小さな点 -->
<image src="../../icon/grey.png" style="width: 11px;height: 11px;position: absolute;left: 15px;bottom: 15px;"></image>
</block>
</view>
</view>
</view>
</view>
history.wxss：
.detail_button{
border-radius: 80rpx;
margin-top: 55%;
color:#FFFFFF;
background-color: #D43030;
box-shadow: 16rpx 8rpx 24rpx rgba(212,48,48, 0.35);
}
.activity_history{
margin-left: 15px;
margin-right: 15px;
}
.history_title{
border-bottom: 5rpx solid #A6A6A6;
font-size: 28px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.history_content{
height: 150px;
width: 100%;
display: flex;
position: relative;
box-shadow: 16rpx 8rpx 24rpx rgba(212,48,48, 0.1);
margin-top: 15px;
border-radius: 15px;
}
.event_card{
font-size: 20px;
font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
position: relative;
margin:15px;
width: 90%;
flex:1;
}
.event_time{
margin-top: 5px;
font-size: 14px;
color:#A0A9BD;
}
.status_text{
position:relative;
margin-top: 10px;
margin-left: 10px;
font-size:12;
color:white;
}
.detail_button{
background-color: white;
color:#727885;
}
.action_button{
width:150px;
height:40px;
position: absolute;
z-index: 1;
bottom: 0px;
right: 0px;
}
.status_pending{
width: 80px;
height: 40px;
background-color:#43CF7C;
border-radius: 0 15px 0 15px;
z-index: 2;
}
.status_text{
position: relative;
margin-top:10px ;
margin-left: 15px;
font-size: 12;
color: white;
}
.status_completed{
float: right;
width:80px;
height:40px;
background-color:#CCCCCC;
border-radius:0 15px 0 15px;
z-index: 2;
flex-direction: row;
position: relative;
margin-left: 20px;
}
history.js：
const cloudDB = wx.cloud.database()
const app = getApp()
const dbCommand = db.command
Page({
data: {
records:[],
},
//活動リストを取得
fetchActivityList(){
//ユーザーのopenidを取得するためのクラウド関数を呼び出す
wx.cloud.callFunction({
name:'getUserData'
})
.then(res=>{
console.log("ユーザーopenid",res.result.openid)
cloudDB.collection("activities")
.where({
//ユーザーのopenidで活動をフィルタリング
_openid:res.result.openid,
status:dbCommand.or(3,4)
})
.get()
.then(res=>{
console.log('データベースクエリ成功',res.data)
wx.stopPullDownRefresh()
//返されたres.dataの値をlistに割り当てる
this.setData({
records:res.data
})
})
})
.catch(err=>{
console.log("クラウド関数リクエスト失敗",err)
})
},
onLoad() {
wx.startPullDownRefresh()
this.fetchActivityList()
},
//プルダウンリフレッシュを監視
onPullDownRefresh:function(){
console.log('ユーザーがページをリフレッシュしました')
//ページデータをリフレッシュ
this.fetchActivityList()
},
//活動詳細ページに遷移
navigateToDetail(e){
console.log("詳細ページをクリックしました、活動のidを表示します",e)
wx.navigateTo({
// 活動詳細ページに遷移し、活動idを渡す
url: '/pages/eventDetail/eventDetail?id=' +e.currentTarget.dataset.id
})
},
})
余談
このシリーズの記事は継続的に更新されます。手取り足取りでゼロからミニプログラムプロジェクトを作成する方法を教えます！そして無料でソースコードを提供します。何か質問があれば、ぜひ下のコメント欄で議論してください！あなたの「いいね」と保存が私の最大の動力です！！