WeChat ミニプログラム 最後の宿題 - シンプルな日記ミニプログラム
最終課題の WeChat ミニプログラムです。初心者でも学べる非常にシンプルなミニプログラムです。コードはコメント化されており、コード量は多くありません。二次開発は比較的簡単で、インポートして使用できます。
ソース コードのダウンロード リンク: 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>