微信小程序项目实例——印记

简介: 微信小程序项目实例——印记

微信小程序项目实例——印记

文章目录

项目代码见文字底部,点赞关注有惊喜


一、项目展示

印记是一款简洁便利的日记本,用户可以在其中发布自己的日记本,同时也可以查看、点赞和收藏别人的日记本

二、日记列表

日记列表展示所有的日记本,用户可以点击查看别人的日记

首页采用scroll-view组件实现页面滑动

<!--list.wxml-->
<scroll-view scroll-y="true">
  <view wx:for="{{diaries}}" wx:for-index="idx" class="item-container" bindtap="showDetail" id="{{idx}}">
    <image mode="aspectFill" src="{{item.meta.cover}}" class="cover"></image>
    <view class="desc">
      <view class="left">
        <view style="font-size:32rpx;margin:10rpx 0;">{{item.meta.title}}</view>
        <view style="font-size:24rpx;color:darkgray">{{item.meta.meta}}</view>
      </view>
      <view class="right">
        <image mode="aspectFit" src="{{item.meta.avatar}}"></image>
        <text style="font-size:24rpx;margin-top:10rpx;color:darkgray">{{item.meta.nickName}}</text>
      </view>
    </view>
  </view>
</scroll-view>
/** list.wxss **/
.item-container {
  margin: 10rpx 20rpx;
  position: relative;
}
.cover {
  width: 100%;
  height: 400rpx; 
  display: block;
}
.desc {
  margin: 10rpx 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 20rpx;
  border-bottom: 1px solid #E5E7ED;
}
.desc .left {
}
.desc .right {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.right image{
  display: block;
  width: 60rpx;
  height: 60rpx;
  border-radius: 30rpx;
}

实现效果如下:


三、日记发布

用户可以发布个人日记

日记的内容可以以文字、图片和视频组成

<!--new.wxml-->
<template name="common">
  <scroll-view class="container" scroll-y="true">
    <view class="common-container">
      <view class="item-group" wx:for="{{layoutList}}" wx:for-item="group">
        <block wx:for="{{group}}" wx:for-item="item">
          <block wx:if="{{item.type == 'TEXT'}}">
            <view class="album-item content-text">
              <view>{{item.content}}</view>
            </view>
          </block>
          <block wx:elif="{{item.type == 'IMAGE'}}">
            <image src="{{item.content}}" class="album-item" mode="aspectFill"></image>
          </block>
          <block wx:elif="{{item.type == 'VIDEO'}}">
            <video class="album-item" src="{{item.content}}"></video>
          </block>
        </block>
      </view>
    </view>
  </scroll-view>
  <view class="tabbar" style="display:{{showTab ? 'flex' : 'none'}};">
    <view class="item" bindtap="inputTouch">
      <image class="icon" mode="aspectFit" src="../../images/tabbar/text.png"></image>
    </view>
    <view class="item" bindtap="mediaTouch">
      <image class="icon" mode="aspectFit" src="../../images/tabbar/image.png"></image>
    </view>
    <view class="item">
      <image class="icon" mode="aspectFit" src="../../images/tabbar/more.png"></image>
    </view>
  </view>
  <action-sheet hidden="{{mediaActionSheetHidden}}" bindchange="mediaActionSheetChange">
    <block wx:for-items="{{mediaActionSheetItems}}" wx:for-index="id">
      <action-sheet-item class="action-item" bindtap="{{mediaActionSheetBinds[id]}}">
        {{item}}
      </action-sheet-item>
    </block>
    <action-sheet-cancel class='action-cacel'>取消</action-sheet-cancel>
  </action-sheet>
</template>
<template name="inputText">
  <view class="input-container">
    <view style="height:47rpx" wx:for="{{inputStatus.lines}}" wx:for-index="idx">
      <input type="text" data-index="{{idx}}" placeholder="" bindinput="textInput" bindchange="textInputChange" value="{{item}}" auto-focus="{{idx == inputStatus.row ? true : false}}" bindfocus="focusInput"/>
    </view>
  </view>
  <view class="tabbar">
    <view class="item" style="width:50%" bindtap="inputCancel">
      <image class="icon" mode="aspectFit" src="../../images/tabbar/cancel.png"></image>
    </view>
    <view class="item" style="width:50%" bindtap="inputDone">
      <image class="icon" mode="aspectFit" src="../../images/tabbar/ok.png"></image>
    </view>
  </view>
</template>
<view style="width:100%;height:100%">
  <block wx:if="{{showMode == 'common'}}">
    <template is="{{showMode}}" data="{{showTab: showTab, mediaActionSheetHidden: mediaActionSheetHidden, mediaActionSheetItems: mediaActionSheetItems, mediaActionSheetBinds: mediaActionSheetBinds, layoutList: layoutList}}"></template>
  </block>
  <block wx:if="{{showMode == 'inputText'}}">
    <template is="{{showMode}}" data="{{inputStatus}}"></template>
  </block>
  <loading hidden="{{!showLoading}}" bindchange="hideLoading">
    {{loadingMessage}}
  </loading>
</view>
/** new.wxss **/
.container {
  height: 91%;
}
.common-container {
  margin: 0.1rem;
}
.item-group {
  display: flex;
  align-items: center;
}
.album-item {
  flex-direction: column;
  margin: 0.1rem;
  background: white;
  width: 6.4rem;
  height: 6.4rem;
}
.content-text{
  justify-content: center;
  align-items: center;
  display: flex;
}
.content-text view {
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 10px;
  line-height: 15px;
}
.tabbar {
  position: fixed;
  width: 100%;
  height: 8%;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: white;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.tabbar .item {
  width: 33.33%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.item .icon {
  width: 50rpx;
  height: 50rpx;
}
.input-container {
  height: 80%;
  background-color: #eceff4;
  background-image: linear-gradient(#E1E6EA .1em, transparent .1em);
  background-size: 100% 48rpx;
  padding: 0;
  box-sizing: border-box;
  margin: 0 10rpx;
}
.input-container input{
  height: 47rpx;
  max-height: 47rpx;
  font-size: 28rpx;
  margin: 0px;
}
.action-item, .action-cacel {
  font-size: 30rpx;
  color: #39b5de;
}

效果如下:

文末

具体的介绍就到这里了

印记包含了当下流行的日记类软件该有的功能

有兴趣的同学可以继续研究

代码放到下面链接里了

点击下载 小程序

相关文章
|
1月前
|
监控 小程序 安全
【微信小程序开发实战项目】——如何制作一个属于自己的花店微信小程序(2)
小程序提供便捷的鲜花选购和配送服务,汇聚全球优质鲜花品种,确保新鲜送达。用户可轻松挑选花束,享受个性化配送,并通过地图功能查看配送位置。此外,物流功能实时更新,保证鲜花安全快速到达。代码示例展示了地图和物流信息的页面布局与交互实现。 ### 配送与物流功能亮点 1. **地图功能**:使用`map.wxml`, `map.wxss`, 和 `map.js` 实现定位与导航,确保精准配送。 2. **物流追踪**:通过`logistics.wxml`, `logistics.wxss`, 和 `logistics.js` 显示详细物流状态,提供流畅的用户体验。
47 1
【微信小程序开发实战项目】——如何制作一个属于自己的花店微信小程序(2)
|
18天前
|
移动开发 开发框架 小程序
开发H5程序或者小程序的时候,后端Web API项目在IISExpress调试中使用IP地址,便于开发调试
开发H5程序或者小程序的时候,后端Web API项目在IISExpress调试中使用IP地址,便于开发调试
|
7天前
|
前端开发 JavaScript API
微信公众号项目,实现微信支付(具体流程和参数)
微信公众号项目,实现微信支付(具体流程和参数)
|
1月前
|
小程序 安全 搜索推荐
【微信小程序开发实战项目】——个人中心页面的制作
本文介绍了如何设计和实现一个网上花店的微信小程序,包括个人中心、我的订单和我的地址等功能模块。个人中心让用户能够查看订单历史、管理地址和与客服互动。代码示例展示了`own.wxml`、`own.wxss`和`own.js`文件,用于构建个人中心界面,包括用户信息、订单链接、收藏、地址、客服和版本信息。我的订单部分展示了订单详情,包括商品图片、名称、销量、价格和订单状态,用户可以查看和管理订单。我的地址功能允许用户输入和编辑收货信息,包括联系人、性别、电话、城市和详细地址。每个功能模块都附有相应的WXML和WXSS代码,以及简洁的样式设计。
72 0
【微信小程序开发实战项目】——个人中心页面的制作
|
1月前
|
小程序 安全 搜索推荐
【微信小程序开发实战项目】——如何制作一个属于自己的花店微信小程序(3)
这是一篇关于微信小程序开发的文章摘要,作者介绍了如何创建一个网上花店小程序,旨在提供便捷的购花体验。小程序包含鲜花分类功能,允许用户按品种、颜色和用途筛选,确保快速找到合适的鲜花。它还提供了配送服务,保证鲜花的新鲜度。文章展示了`cash.wxml`、`cash.wxss`和`cash.js`的部分代码,用于实现分类和商品展示,以及`qin.wxml`、`qin.wxss`和`qin.js`,涉及商品详情和购买付款流程。代码示例展示了商品列表渲染和交互逻辑,包括页面跳转、数据传递和点击事件处理。文章最后提到了购买付款界面,强调了安全和便捷的支付体验。
68 0
【微信小程序开发实战项目】——如何制作一个属于自己的花店微信小程序(3)
|
2月前
|
程序员 开发者
黑马程序员 苍穹外卖项目 Day微信支付问题解决与生成订单号超出上限问题
黑马程序员 苍穹外卖项目 Day微信支付问题解决与生成订单号超出上限问题
38 5
|
29天前
|
小程序 API
跨端技术问题之哪些形态可以通过getApp()获取全局App实例
跨端技术问题之哪些形态可以通过getApp()获取全局App实例
|
2月前
|
小程序 前端开发 JavaScript
计算机Python项目|django傣族节日及民间故事推广小程序
计算机Python项目|django傣族节日及民间故事推广小程序
|
1月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的业财票务一体项目管理系统 附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的业财票务一体项目管理系统 附带文章源码部署视频讲解等
28 0
|
1月前
|
XML Java 数据格式
支付系统----微信支付20---创建案例项目--集成Mybatis-plus的补充,target下只有接口的编译文件,xml文件了,添加日志的写法
支付系统----微信支付20---创建案例项目--集成Mybatis-plus的补充,target下只有接口的编译文件,xml文件了,添加日志的写法