设计一个实用的小程序，在程序中合理的融入下列所有知识点： 1.有3-5个tabBar页面 2.有全局变量的定义和使用 3.有模板的定义和使用 4.有wx:if 或者 wx:for的使用 5.有页面弹性布局的使用 6.有swiper视图容器 7.有导航组件navigator的使用 8.有2-3个表单组件的使用 9.有媒体组件的使用 10.小程序每个页面有统一的页脚

好的，我来设计一个实用的小程序，它是一个日记应用，名字叫做“小日记”。下面是它的功能及实现：

1. 有3-5个tabBar页面
小日记的tabBar页面有：首页、日记列表、添加日记、我的。

2. 有全局变量的定义和使用
在app.js中定义全局变量globalData，用于保存用户信息。

   App({
     globalData: {
       userInfo: null
     }
   })

在其他页面中可以通过`getApp().globalData`来访问globalData。

3. 有模板的定义和使用
小日记中定义了两个模板：日记列表项和日记详情页。

   <template name="diary-item">
     <view class="diary-item" bindtap="goToDetail">
       <view class="diary-title">{{title}}</view>
       <view class="diary-date">{{date}}</view>
     </view>
   </template>

   <template name="diary-detail">
     <view class="diary-detail">
       <view class="diary-title">{{title}}</view>
       <view class="diary-date">{{date}}</view>
       <view class="diary-content">{{content}}</view>
     </view>
   </template>

在日记列表页和日记详情页中使用模板：

   <template is="diary-item" data="{{...item}}"></template>

   <template is="diary-detail" data="{{...diary}}"></template>

4. 有wx:if 或者 wx:for的使用
在日记列表页中，使用`wx:for`来渲染日记列表：

   <scroll-view class="diary-list" scroll-y="true">
     <view wx:for="{{diaryList}}" wx:key="{{index}}">
       <template is="diary-item" data="{{...item}}"></template>
     </view>
   </scroll-view>

在我的页面中，使用`wx:if`来判断用户是否已登录：

   <view wx:if="{{userInfo}}">
     <view class="user-info">
       <image class="avatar" src="{{userInfo.avatarUrl}}"></image>
       <view class="nick-name">{{userInfo.nickName}}</view>
     </view>
     <button class="logout-btn" bindtap="logout">退出登录</button>
   </view>
   <view wx:else>
     <button class="login-btn" open-type="getUserInfo" bindgetuserinfo="login">点击登录</button>
   </view>

5. 有页面弹性布局的使用
在日记详情页中，使用`flex`布局来实现页面弹性布局：

   .diary-detail {
     display: flex;
     flex-direction: column;
     align-items: center;
     padding: 20rpx;
     box-sizing: border-box;
   }
   .diary-title {
     font-size: 28rpx;
     font-weight: bold;
     margin-bottom: 20rpx;
   }
   .diary-date {
     font-size: 24rpx;
     color: #999;
     margin-bottom: 40rpx;
   }
   .diary-content {
     font-size: 26rpx;
     line-height: 1.5;
     text-align: justify;
   }

6. 有swiper视图容器
在首页中，使用`swiper`来展示最新的5篇日记：

   <swiper class="swiper" indicator-dots="true" indicator-color="#ccc" indicator-active-color="#333">
     <swiper-item wx:for="{{latestDiaryList}}" wx:key="{{index}}">
       <template is="diary-item" data="{{...item}}"></template>
     </swiper-item>
   </swiper>

7. 有导航组件navigator的使用
在日记列表页中，使用`navigator`来跳转到日记详情页：

   <template is="diary-item" data="{{...item}}">
     <navigator url="../detail/detail?id={{id}}"></navigator>
   </template>

8. 有2-3个表单组件的使用
在添加日记页中，使用`input`和`textarea`组件来输入日记标题和内容：

   <view class="form-item">
     <text class="form-label">标题：</text>
     <input class="form-input" placeholder="请输入标题" value="{{title}}" bindinput="onTitleInput"></input>
   </view>
   <view class="form-item">
     <text class="form-label">内容：</text>
     <textarea class="form-textarea" placeholder="请输入内容" value="{{content}}" bindinput="onContentInput"></textarea>
   </view>

9. 有媒体组件的使用
在日记详情页中，使用`image`组件来展示日记中的图片：

   <view wx:for="{{images}}">
     <image class="diary-image" src="{{item}}"></image>
   </view>

10. 小程序每个页面有统一的页脚
在app.wxss中定义统一的页脚样式：

    .page-footer {
      height: 100rpx;
      background-color: #f5f5f5;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 24rpx;
      color: #999;
    }

在每个页面中都引入页脚组件，并传入不同的参数：

    <footer text="© 2021 小日记"></footer>