微信小程序期末大作业-简单日记微信小程序(附下载链接)

小程序 0

微信小程序期末大作业-简单日记小程序

微信小程序期末大作业,很简单的一个小程序,初学者可以学习学习,代码有注释,代码量也不多,二次开发比较简单,导入即可使用。

源码下载链接:https://download.csdn.net/download/weixin_43474701/88626660
页面展示如下:
请添加图片描述
请添加图片描述
请添加图片描述
请添加图片描述
请添加图片描述
部分代码展示:

<!-- dairy.wxml --><!-- 单条内容 --><template name="content-item">  <block wx:if="{{content.type == 'TEXT'}}">    <view style="margin-top:30rpx">      <text wx:if="{{content.type == 'TEXT'}}" class="text">{{content.content}}</text>    </view>  </block>  <block wx:if="{{content.type == 'IMAGE'}}">    <image class="media" mode="aspectFill" src="{{content.content}}" bindtap="enterPreviewMode" data-src="{{content.content}}"></image>    <view style="margin-top: 10rpx">{{content.description}}</view>  </block>  <block wx:if="{{content.type == 'VIDEO'}}">    <video class="media" src="{{content.content}}"></video>    <view style="margin-top: 10rpx">{{content.description}}</view>  </block>  <template is="content-footer" data="{{content}}"></template></template><!-- 日记正文footer --><template name="content-footer">  <view class="footer">    <view class="left">      <image mode="aspectFit" src="../../images/icons/poi.png"></image>      <text style="margin-left:10rpx;">{{content.poi.name}}</text>    </view>    <view class="right">      <image mode="aspectFit" src="../../images/icons/comment.png"></image>      <view>{{content.commentNum}}</view>    </view>    <view class="right">      <image mode="aspectFit" src="../../images/icons/like.png"></image>      <view>{{content.likeNum}}</view>    </view>  </view></template><view class="container">  <view class="header" style="background-image:url({{diary.meta.cover}})">    <!--顶部固定工具栏-->    <view class="toolbar">      <image class="item" mode="aspectFit" wx:for="{{toolbar}}" src="{{item}}"></image>    </view>    <!--日记meta信息区-->    <view class="title">      <image class="avatar" mode="aspectFit" src="{{diary.meta.avatar}}"> </image>      <view class="desc">          <view class="item">{{diary.meta.title}}</view>          <view class="item">{{diary.meta.meta}}</view>      </view>    </view>  </view>  <!--日记正文-->  <view wx:for="{{diary.list}}" wx:for-item="content" class="content">    <template is="content-item" data="{{content}}"></template>  </view>  <view id="footer">    <view class="container">      <view class="item" style="font-size:50rpx;">        <view style="display:inline-block">THE</view>        <view style="display:inline-block;margin-left:10rpx;color:#2EA1CA;">END</view>      </view>      <view class="item" style="font-size:24rpx;color:gray">DESIGNED BY 编程ID</view>    </view>  </view></view><!-- 预览模式 --><swiper class="swiper-container" duration="400" current="{{previewIndex}}" bindtap="leavePreviewMode" style="display:{{previewMode ? 'block' : 'none'}};">  <block wx:for="{{mediaList}}" wx:for-item="media">    <swiper-item>      <image src="{{media.content}}" mode="aspectFit"></image>    </swiper-item>  </block></swiper>

也许您对下面的内容还感兴趣: