WeChat Mini Program Final Homework-Simple Diary Mini Program
The WeChat mini program is a final assignment. It is a very simple mini program that beginners can learn. The code is commented and the amount of code is not large. Secondary development is relatively simple, and you can import it and use it.
Source code download link: https://download.csdn.net/download/weixin_43474701/88626660
The page is displayed as follows:
Part of the code is displayed:
<!-- 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>