微信小程序开发日志页面模板制作设计模板下载

今天给大家带来微信小程序开发日志页面模板制作设计模板教程，适合经常更新类日志客户使用，能够具体展现小程序升级优化进度流程时间。制作完毕以后效果图如下：

一、wxml页面代码如下：

<!--about.wxml-->
<view class="container">
  <view class="header">
    <view class="black-cover"></view>
    <image class="logo" src="/static/images/more/logo.png"></image>
    <image class="title" src="/static/images/more/title8.png"></image>
  </view>
  <view class="content">
    <view class="version">
      <view class="version-title">
        <text class="title-name">出发吧一起</text>
        <text class="version-text">{{version}}</text>
        <text class="version-text">公测</text>
      </view>
      <view>
        <text class="version-log-link update-log">开发日志</text>
      </view>
    </view>
    <view class="log-list">
      <view class="describe">
        <view class="desc-title">
          <text class="desc-v">v2.2.4 公测版</text>
          <text class="desc-time">2017.12.03</text>
        </view>
        <text class="desc-content">修复BUG</text>
        <view class="desc-list">
          <text class="desc-list-item">修复我的收藏，我的发起，界面不能加入与收藏活动</text>
          <text class="desc-list-item">修复模板消息问题</text>
        </view>
        <text class="desc-content">优化完善</text>
        <view class="desc-list">
          <text class="desc-list-item">添加发起修改功能，联系方式修改功能</text>
          <text class="desc-list-item">添加发起群二维码上传，显示功能</text>
          <text class="desc-list-item">添加发起者与加入者联系信息可以点击复制功能</text>
          <text class="desc-list-item">优化了微信号，手机号，QQ号以及真实姓名的校验</text>
          <text class="desc-list-item">添加修改发起状态功能</text>
          <text class="desc-list-item">添加发起撤离首页和公开发起功能</text>
          <text class="desc-list-item">删除点赞与取消赞的提示消息，换成动画效果</text>
          <text class="desc-list-item">优化动态消息提示机制</text>
        </view>
      </view>
      <view class="describe">
        <view class="desc-title">
          <text class="desc-v">v2.1.4 公测版</text>
          <text class="desc-time">2017.11.30</text>
        </view>
        <text class="desc-content">修复BUG</text>
        <view class="desc-list">
          <text class="desc-list-item">修复我的发起,我的收藏无法点击进入详细界面的问题</text>
          <text class="desc-list-item">修复我的发起,我的收藏进入详细界面加入与收藏按钮状态问题</text>
        </view>
        <text class="desc-content">优化完善</text>
        <view class="desc-list">
          <text class="desc-list-item">修改开发日志中的错误</text>
          <text class="desc-list-item">添加最新公测版的开发日志记录</text>
        </view>
      </view>
      <view class="describe">
        <view class="desc-title">
          <text class="desc-v">v2.1.0 公测版</text>
          <text class="desc-time">2017.11.26</text>
        </view>
        <text class="desc-content">修复BUG</text>
        <view class="desc-list">
          <text class="desc-list-item">全面替换 webp 格式图片，修复无法显示的问题</text>
        </view>
        <text class="desc-content">优化完善</text>
        <view class="desc-list">
          <text class="desc-list-item">添加反馈建议功能</text>
          <text class="desc-list-item">添加更多信息模块，加入开发日志以及启动画面选项</text>
          <text class="desc-list-item">提交审核，开启公测</text>
        </view>
      </view>
      <view class="describe">
        <view class="desc-title">
          <text class="desc-v">v2.0.9 内测版</text>
          <text class="desc-time">2017.11.25</text>
        </view>
        <text class="desc-content">修复BUG</text>
        <view class="desc-list">
          <text class="desc-list-item">修复消息提醒出现错误的问题</text>
        </view>
        <text class="desc-content">优化完善</text>
        <view class="desc-list">
          <text class="desc-list-item">压缩程序所有的静态图片，添加 webp 格式图片</text>
          <text class="desc-list-item">全面优化界面颜色的统一，图标大小的统一</text>
        </view>
      </view>
      <view class="describe">
        <view class="desc-title">
          <text class="desc-v">v2.0.8 内测版</text>
          <text class="desc-time">2017.11.24</text>
        </view>
        <text class="desc-content">修复BUG</text>
        <view class="desc-list">
          <text class="desc-list-item">修复我的加入，我的发起，我的收藏三个界面的分页</text>
        </view>
        <text class="desc-content">优化完善</text>
        <view class="desc-list">
          <text class="desc-list-item">搜索的搜索关键字和热门搜索的自动显示</text>
          <text class="desc-list-item">使用js 完成模糊查询</text>
          <text class="desc-list-item">消息通知模块实现下拉刷新</text>
        </view>
      </view>
      <view class="describe">
        <view class="desc-title">
          <text class="desc-v">v2.0.7 内测版</text>
          <text class="desc-time">2017.11.23</text>
        </view>
        <text class="desc-content">修复BUG</text>
        <view class="desc-list">
          <text class="desc-list-item">修复首页无法刷新</text>
          <text class="desc-list-item">修改首页轮播图的切换bug</text>
        </view>
        <text class="desc-content">优化完善</text>
        <view class="desc-list">
          <text class="desc-list-item">加入分享功能，只能在活动详情页面</text>
        </view>
      </view>
      <view class="describe">
        <view class="desc-title">
          <text class="desc-v">v2.0.6 内测版</text>
          <text class="desc-time">2017.11.21</text>
        </view>
        <text class="desc-content">修复BUG</text>
        <view class="desc-list">
          <text class="desc-list-item">启动动画的修改</text>
          <text class="desc-list-item">修改消息按照时间先后显示</text>
        </view>
        <text class="desc-content">优化完善</text>
        <view class="desc-list">
          <text class="desc-list-item">实现地图模式查看</text>
          <text class="desc-list-item">修改发布时间显示为几秒前</text>
        </view>
      </view>
      <view class="describe">
        <view class="desc-title">
          <text class="desc-v">v2.0.5 内测版</text>
          <text class="desc-time">2017.11.20</text>
        </view>
        <text class="desc-content">修复BUG</text>
        <view class="desc-list">
          <text class="desc-list-item">启动动画的标题修改</text>
          <text class="desc-list-item">修复消息为空的界面显示</text>
        </view>
        <text class="desc-content">优化完善</text>
        <view class="desc-list">
          <text class="desc-list-item">实现搜索功能</text>
          <text class="desc-list-item">更新活动类型颜色</text>
          <text class="desc-list-item">修复地图显示点的问题</text>
        </view>
      </view>
      <view class="describe">
        <view class="desc-title">
          <text class="desc-v">v2.0.4 内测版</text>
          <text class="desc-time">2017.11.18</text>
        </view>
        <text class="desc-content">修复BUG</text>
        <view class="desc-list">
          <text class="desc-list-item">首页轮播图为点赞数最多的前3个</text>
          <text class="desc-list-item">用户表删除详细地址，增加经度与纬度</text>
          <text class="desc-list-item">修复图片未添加的情况,显示默认图片</text>
          <text class="desc-list-item">默认自己不能加入自己的发起</text>
        </view>
        <text class="desc-content">优化完善</text>
        <view class="desc-list">
          <text class="desc-list-item">活动表进行调整</text>
          <text class="desc-list-item">用户表删除详细地址，增加经度与纬度</text>
        </view>

      </view>
      <view class="describe">
        <view class="desc-title">
          <text class="desc-v">v2.0.3 内测版</text>
          <text class="desc-time">2017.11.16</text>
        </view>
        <text class="desc-content">修复BUG</text>
        <text class="desc-content">优化完善</text>
        <view class="desc-list">
          <text class="desc-list-item">活动表加入参加人数，参加人数集合的字段，方便活动管理</text>
        </view>
      </view>
      <view class="describe">
        <view class="desc-title">
          <text class="desc-v">v2.0.2 内测版</text>
          <text class="desc-time">2017.11.14</text>
        </view>
        <text class="desc-content">修复BUG</text>
        <text class="desc-content">优化完善</text>
        <view class="desc-list">
          <text class="desc-list-item">完成联系表录入功能</text>
          <text class="desc-list-item">实现收藏与加入功能</text>
        </view>
      </view>
      <view class="describe">
        <view class="desc-title">
          <text class="desc-v">v2.0.1 内测版</text>
          <text class="desc-time">2017.11.11</text>
        </view>
        <text class="desc-content">修复BUG</text>
        <view class="desc-list">
          <text class="desc-list-item">修复点赞无法更新点赞数的bug</text>
        </view>
        <text class="desc-content">优化完善</text>
        <view class="desc-list">
          <text class="desc-list-item">加入联系功能</text>
        </view>
      </view>
      <view class="describe">
        <view class="desc-title">
          <text class="desc-v">v2.0.0 内测版</text>
          <text class="desc-time">2017.11.10</text>
        </view>
        <text class="desc-content">第二版开启内测</text>
        <view class="desc-list">
          <text class="desc-list-item">变更程序的部分业务逻辑</text>
          <text class="desc-list-item">全面更新界面显示效果</text>
          <text class="desc-list-item">将 Bmob 后端云作为数据存储和处理平台</text>
        </view>
      </view>
      <view class="describe">
        <view class="desc-title">
          <text class="desc-v">v1.1.2 内测版</text>
          <text class="desc-time">2017.7.12</text>
        </view>
        <text class="desc-content">修复BUG</text>
        <view class="desc-list">
          <text class="desc-list-item">修复美好回忆无法显示问题</text>
        </view>
        <text class="desc-content">优化完善</text>
        <view class="desc-list">
          <text class="desc-list-item">更多其他细节优化</text>
        </view>
      </view>
      <view class="describe">
        <view class="desc-title">
          <text class="desc-v">v1.1.0 公测版</text>
          <text class="desc-time">2017.7.11</text>
        </view>
        <text class="desc-content">优化完善</text>
        <view class="desc-list">
          <text class="desc-list-item">优化代码</text>
          <text class="desc-list-item">静态图片进行压缩处理</text>
          <text class="desc-list-item">提交审核，上线公测</text>
        </view>

      </view>
      <view class="describe">
        <view class="desc-title">
          <text class="desc-v">v1.0.2 内测版</text>
          <text class="desc-time">2017.7.10</text>
        </view>
        <text class="desc-content">优化完善</text>
        <view class="desc-list">
          <text class="desc-list-item">更新关于界面并实现其功能</text>
          <text class="desc-list-item">添加通知界面忙，目前为静态</text>
        </view>
      </view>
      <view class="describe">
        <view class="desc-title">
          <text class="desc-v">v1.0.1 内测版</text>
          <text class="desc-time">2017.7.5</text>
        </view>
        <text class="desc-content">开启内测</text>
      </view>
    </view>
  </view>
  <view class="footer">
    <text>石家庄铁道大学 SmartCoder 团队</text>
    <text>Copyright @ {{year}} All Rights Reserved</text>
  </view>
</view>

二、wxss样式页面代码如下：

/**about.wxss**/
.container{
    background: #f4f4f4;
    padding: 0;
    font-size: 11pt;
}
.header{
    position: relative;
    width: 100%;
    height: 400rpx;
    text-align: center;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.header .title{
    position: relative;
    width: 600rpx;
    height: 200rpx;
    z-index: 3;
    opacity: .95;
}
.black-cover{
    position: absolute;
    z-index: 2;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #888;
    opacity: .18;
}
.logo{
    position: absolute;
    top:0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 750rpx;
    border-radius: 10rpx;
    margin-top: -175rpx;
    filter: blur(6px);
}
.content{
    flex: 1;
}
.version{
    height: 100rpx;
    background: #fff;
    display: flex;
    align-items: center;
    padding: 0 45rpx;
    box-sizing: border-box;
    font-size: 13pt;
    color: #666;
    border-bottom: 1px #e5e5e5 solid;
}
.version-title{
    flex: 1;
    display: flex;
    align-items: center;
}
.title-name{
    padding-right: 10rpx;
}
.version-text{
    font-size: 10pt;
    line-height: 100%;
    color: #118fff;
    border: 1px solid #118fff;
    padding: 5rpx 10rpx;
    border-radius: 5rpx;
    margin-left: 10rpx;
    text-align: center;
}
.version-log-link{
    position: relative;
    font-size: 12pt;
    color: #118fff;
}
.version-log-link:active{
    opacity: .8;
}
.update-log::after{
    content: '';
    position: absolute;
    right: -3px;
    top: -1px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #e55c5c;
}
.log-list{
    display: flex;
    flex-direction: column;
    align-items: stretch;
}
.describe{
    width: 100%;
    box-sizing: border-box;
    padding: 20rpx 45rpx 30rpx;
    display: flex;
    flex-flow: column nowrap;
    color: #545454;
    line-height: 175%;
    background: #fff;
    margin-top: 15rpx;
    border-top: 1px #e5e5e5 solid;
    border-bottom: 1px #e5e5e5 solid;
}
.desc-title{
    display: flex;
    font-size: 13pt;
    line-height: 200%;
    margin-bottom: 15rpx;
}
.desc-v{
    flex: 1;
}
.desc-time{
    font-size: 11pt;
    color: #888;
}
.desc-list{
    display: flex;
    flex-direction: column;
    border-left: 8rpx solid #ddd;
    padding-left: 15rpx;
    color: #777;
    margin-bottom: 15rpx;
    font-size: 10pt;
}
.desc-content{
    padding-bottom: 15rpx;
}
.footer{
    display: flex;
    flex-direction: column;
    font-size: 9pt;
    line-height: 150%;
    text-align: center;
    padding: 100rpx 0 15rpx;
    color: #c2c2c2;
}
.footer-lanshan{
    font-size: 10pt;
    height: 10pt;
    line-height: 10pt;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8rpx;
}
.footer-lanshan image{
    width: 10pt;
    height: 10pt;
    margin-right: 5rpx;
}

三、js页面代码如下：

var app = getApp();
Page({
  data: {
    version: '',
  },
  onLoad: function () {
    this.setData({
      version: app.version,
      year: new Date().getFullYear()
    });
  },
});

模板简介：该模板名称为【微信小程序开发日志页面模板制作设计模板下载】，大小是，文档格式为.，推荐使用打开，作品中的图片，文字等数据均可修改，图片请在作品中选中图片替换即可，文字修改直接点击文字修改即可，您也可以新增或修改作品中的内容，该模板来自用户分享，如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。