微信小程序 | 小Demo_学生资讯 | 系统性学习 | 无知的我费曼笔记

无知的人_

已于 2022-12-23 15:14:48 修改

阅读量174

点赞数 1

分类专栏：前端 systemic Learning 文章标签： javascript 前端 vue.js

于 2022-12-18 14:08:03 首次发布

本文链接：https://blog.csdn.net/weixin_52604552/article/details/128361846

版权

前端 systemic Learning 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

无知的我正在复盘微信小程序

下图是我总结的 uniapp 思维导图，后续会不断补充
请添加图片描述
在这里插入图片描述

在这里插入图片描述

微信小程序

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2qtltB6i-1671343240236)(微信小程序.assets/image-20220211210121704.png)]

项目框架

项目目录图解

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-42K4LUlj-1671343240237)(微信小程序.assets/基本的项目目录图例.png)]

以app开头的文件是应用程序级别的文件,更改一处全局生效。而页面pages的配置优先级高于全局配置(就近原则)
小程序是允许你修改文件目录名的
不可在同一文件同时写html和css

app.json

{
  "pages":[ // 可自动创建小程序页面项目
    "pages/index/index", // 小程序显示的页面；注意-不可写文件后缀
    "pages/logs/logs" // 若放在前一行，则该页面是小程序显示的页面
  ],
  "window":{ // 全局的默认窗口表现
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle":"black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

具体看官方文档

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HVnVdKZ8-1671343240238)(微信小程序.assets/image-20220129130159484.png)]

配置全局

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarTitleText": "新视觉实训",
    "navigationBarTextStyle":"white"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

// @style 版本号

初始化文件

清空文件内容

清空index的所有文件内容；其中对index.js 使用page 关键字生成基本框架
清空app样式文件内容

全局配置

app.json

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarTitleText": "新视觉实训",
    "navigationBarTextStyle":"white"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

所有页面内边距

app.wxss

.container{ padding: 0 26rpx; box-sizing: border-box;}

导航栏

编写代码

index.wxml

<view class="header">
<!-- 1 导航栏 -->
  <view class="container hdCon">
  <!-- 新视觉图标跳转 -->
    <navigator class="logo" open-type="switchTab" url="/pages/index/index">
      <image mode="heightFix" src="/images/logo.png"></image>
      <!--@open-type 启动导航栏跳转 @url 跳转到的页面  @heightFix 宽度自适应-->
    </navigator>
    <!-- 客服图标跳转 -->
    <view class="kefu">
      <button class="btn" open-type="contact"></button>
      <!--@open-type 打开客服服务 -->
      <image mode="heightFix" src="/images/xiaoxi.png"></image>
    </view>
  </view>
</view>

index.wxss

.header{ width: 750rpx; height: 90rpx; border: 1px solid red;}
.hdCon{ display: flex; justify-content: space-between; align-items: center; height: 100%;}
/* @内容两端对齐；内容居中对齐，若要垂直居中，需要指定高度(高度不继承父元素) */
.hdCon navigator, .hdCon .kefu{ height: 50rpx;}
.hdCon image{ height: 100%;}
.kefu{ position: relative; animation: dh linear 1s infinite alternate;}
/* @设置名为dh的动画，匀速，每1秒，重复，逆序 */
.kefu .btn{ position: absolute; width: 100%; height: 100px; top: 0; left: 0; opacity: 0;}
/* @透明度为0 */

app.wxss

@keyframes dh{
  0%,50%,100%{opacity: 1;}
  25%{opacity: 0;}
}
/* 配置名为dh的动画，当...透明度为1，当...透明度为0 */

运行效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7u2D18ZG-1671343240238)(微信小程序.assets/image-20220129142138160.png)]

客服图标闪烁显示方法-利用button标签绝对定位

轮播图

编写代码

html

<view class="banner">
  <swiper indicator-dots indicator-color="rgb(255,255,255,.5)" indicator-active-color="#fff" circular autoplay interval="4000">
  <!-- @开启小点；小点颜色；被选中的颜色；衔接播放；自动播放；每4秒播放 -->
    <swiper-item><image src="/images/banner1.jpg"/></swiper-item>
    <swiper-item><image src="/images/banner2.jpg"/></swiper-item>
    <swiper-item><image src="/images/banner3.jpg"/></swiper-item>
  </swiper>
</view>

css

/*2 banner 轮播图 */
.banner{height: 295rpx; width: 100%; border: 1px solid green;}
.banner swiper{height: 100%; width: 100%;}
.banner swiper image{height: 100%; width: 100%;}

运行效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DdmtZSKl-1671343240239)(微信小程序.assets/image-20220129143812915.png)]

课程分类

编写代码

HTML

<!-- 3 课程分类 -->
<scroll-view class="major" scroll-x>
<!-- @scroll-x 横向滚动 -->
  <navigator class="box" url="">
    <image class="pic" src="/images/kecheng1.png"></image>
    <view class="text">平面设计</view>
  </navigator>
  <navigator class="box" url="">
    <image class="pic" src="/images/kecheng2.png"></image>
    <view class="text">平面设计</view>
  </navigator>
  <navigator class="box" url="">
    <image class="pic" src="/images/kecheng3.png"></image>
    <view class="text">平面设计</view>
  </navigator>
  <navigator class="box" url="">
    <image class="pic" src="/images/kecheng4.png"></image>
    <view class="text">平面设计</view>
  </navigator>
  <navigator class="box" url="">
    <image class="pic" src="/images/kecheng5.png"></image>
    <view class="text">平面设计</view>
  </navigator>
</scroll-view>

CSS

/*3 课程分类 */
.major{ white-space: nowrap; padding: 20rpx 0;}
.major .box {display: inline-block; text-align: center; width: 165rpx;}
.major .pic{width: 100rpx; height: 100rpx;}
.major .text{ font-size: 26rpx; margin-top: 10rpx;}

运行效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UH08R27L-1671343240240)(微信小程序.assets/image-20220129152013959.png)]

学生作品

编写代码

HTML

<!-- 4 学生作品 -->
<view class="works">
  <view class="container">
    <view class="pubTitle">
      <view class="txt">学生作品</view>
      <navigator class="more">更多></navigator>
    </view>
    <view class="wkMain">
      <navigator class="box">
        <image class="pic" src="/images/xszp1.jpg"></image>
        <view class="ceng">
          <view class="tit">UI设计作品</view>
          <view class="line"></view>
          <view class="des">UI design works</view>
        </view>
      </navigator>
      <navigator class="box">
        <image class="pic" src="/images/xszp2.jpg"></image>
        <view class="ceng">
          <view class="tit">UI设计作品</view>
          <view class="line"></view>
          <view class="des">UI design works</view>
        </view>
      </navigator>
      <navigator class="box">
        <image class="pic" src="/images/xszp3.jpg"></image>
        <view class="ceng">
          <view class="tit">UI设计作品</view>
          <view class="line"></view>
          <view class="des">UI design works</view>
        </view>
      </navigator>
      <navigator class="box">
        <image class="pic" src="/images/xszp4.jpg"></image>
        <view class="ceng">
          <view class="tit">UI设计作品</view>
          <view class="line"></view>
          <view class="des">UI design works</view>
        </view>
      </navigator>
      <navigator class="box">
        <image class="pic" src="/images/xszp5.jpg"></image>
        <view class="ceng">
          <view class="tit">UI设计作品</view>
          <view class="line"></view>
          <view class="des">UI design works</view>
        </view>
      </navigator>
      <navigator class="box">
        <image class="pic" src="/images/xszp6.jpg"></image>
        <view class="ceng">
          <view class="tit">UI设计作品</view>
          <view class="line"></view>
          <view class="des">UI design works</view>
        </view>
      </navigator>
      <navigator class="box">
        <image class="pic" src="/images/xszp7.jpg"></image>
        <view class="ceng">
          <view class="tit">WEB设计作品</view>
          <view class="line"></view>
          <view class="des">WEB FRONT END WORKS</view>
        </view>
      </navigator>
      <navigator class="box">
        <image class="pic" src="/images/xszp8.jpg"></image>
        <view class="ceng">
          <view class="tit">UI设计作品</view>
          <view class="line"></view>
          <view class="des">UI design works</view>
        </view>
      </navigator>
    </view>
  </view>
</view>

CSS

/*4 学生作品模块 */
.works{ background: #f0f3f8; padding: 90rpx 0 70rpx;}
.wkMain{ display: flex; flex-wrap: wrap; justify-content: space-between;}
.wkMain .box{ width: 344rpx; height: 214rpx; margin-bottom: 10rpx; position: relative;}
.wkMain .pic{ width: 100%; height: 100%;}
.wkMain .ceng{display: flex; width: 100%; height: 100%; background: rgb(0, 0, 0,0.5); position: absolute; top: 0; left: 0; color: #fff; flex-direction: column; justify-content: center; align-items: center; padding: 0 20rpx; box-sizing: border-box; text-align: center;}
/*@text-align 内部元素文字居中 align-items 元素居中 */
 /*@box-sizing 解决外边距圹大问题  */
.wkMain .ceng .tit{ font-size: 34rpx;}
.wkMain .ceng .line{ width: 50rpx; height: 2rpx; background-color: #fff; margin: 10rpx 0 20rpx; }
.wkMain .ceng .des{ opacity: 0.6; text-transform: uppercase; font-size: 26rpx; letter-spacing: 5rpx;}

运行效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iqRgvV6F-1671343240241)(微信小程序.assets/image-20220129202146579.png)]

行业动态

编写代码

HTML

<!-- 5 行业 -->
<view class="dynamic">
  <view class="container">
    <view class="pubTitle">
      <view class="txt">行业动态</view>
      <view class="more">更多></view>
    </view>
      <view class="dyMain">
        <navigator class="dyItem" wx:for="{{8}}">
          <view class="pic">
            <image src="/images/xszp1.jpg"></image>
          </view>
          <view class="txt">
            <view class="title">这是标题</view>
            <view class="info">作者：无知的人<text space="ensp"> - </text>时间：2022</view>
          </view>
        </navigator>
      </view>
  </view>
</view>

CSS

/*5 行业动态 */
.dynamic{ padding: 90rpx 0 70rpx; }
.dyItem{ display: flex; padding:15rpx 0;border:1rpx dashed #f4f4f4; justify-content: space-between;}
.dyItem .pic{width:230rpx; height: 150rpx;}
.dyItem .pic image{ width:100%; height: 100%;}
.dyItem .txt{width:440rpx; display: flex; flex-direction:column; justify-content: space-between;}
.dyItem .title{ font-size: 34rpx;}
.dyItem .info{ font-size: 26rpx; color:#888}
.dyItem .info text{font-size:22rpx;}

运行效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-joHTptKN-1671343240242)(微信小程序.assets/image-20220129220841598.png)]

尾部模块

HTML

<!-- 6 尾部 -->
<view class="footer">
  <image class="pic" src="/images/logo.png" mode="widthFix"></image>
  <view class="text">- 高端实训品牌</view>
</view>

CSS

/* 6 尾部 */
.footer{ padding: 50rpx 0; background: #f2f2f2; text-align: center;}
.footer .pic{ width: 180rpx;}
.footer .text{ font-size: 25rpx; color: #666;}

底部导航栏

编写代码

app.json

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs",
    "pages/works/works",
    "pages/dynamic/dynamic",
    "pages/ps/ps",
    "pages/show/show"
    
  ],
  "window":{        
    "navigationBarTitleText": "新视觉实训",
    "navigationBarTextStyle":"white"
  },
  "tabBar":{
    "color":"#B6B6B6",
    "selectedColor":"#FE9132",
    "list":[
      {
        "pagePath":"pages/index/index",
        "text":"首页",
        "iconPath":"images/home.png",
        "selectedIconPath":"images/home-h.png"
      },{
        "pagePath":"pages/works/works",
        "text":"作品",
        "iconPath":"images/user.png",
        "selectedIconPath":"images/user-h.png"
      },{
        "pagePath":"pages/dynamic/dynamic",
        "text":"动态",
        "iconPath":"images/list.png",
        "selectedIconPath":"images/list-h.png"
      }
    ]
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

运行效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UfT89t4N-1671343240242)(微信小程序.assets/image-20220129220702064.png)]

课程分类内页

元素选择器
虚线边框

HTML

<view class="header">
<!-- 1 导航栏 -->
  <view class="container hdCon">
  <!-- 新视觉图标跳转 -->
    <navigator class="logo" open-type="switchTab" url="/pages/index/index">
      <image mode="heightFix" src="/images/logo.png"></image>
      <!--@open-type 启动导航栏跳转 @url 跳转到的页面  @heightFix 宽度自适应-->
    </navigator>
    <!-- 客服图标跳转 -->
    <view class="kefu">
      <button class="btn" open-type="contact"></button>
      <!--@open-type 打开客服服务 -->
      <image mode="heightFix" src="/images/xiaoxi.png"></image>
    </view>
  </view>
</view>

<view class="banner">
  <image src="/images/psbanner.jpg1 (1).jpg" mode="widthFix"></image>
</view>

<view class="psBox">
  <view class="psBoxTit">
    专业转件技能
  </view>
  <view class="psBoxConOne">
      <view class="item">
        <image src="/images/photoshop.png1.png"></image>
        <view>photoshop</view>
      </view>

      <view class="item">
        <image src="/images/photoshop.png1.png"></image>
        <view>photoshop</view>
      </view>

      <view class="item">
        <image src="/images/photoshop.png1.png"></image>
        <view>photoshop</view>
      </view>

      <view class="item">
        <image src="/images/photoshop.png1.png"></image>
        <view>photoshop</view>
      </view>

      <view class="item">
        <image src="/images/photoshop.png1.png"></image>
        <view>photoshop</view>
      </view>      
  </view>
</view>



<view class="psBox">
  <view class="psBoxTit">
    专业转件技能
  </view>
  <view class="psBoxCon">
    <image src="/images/psmajor02.jpg2.jpg" mode="widthFix" class="pic"></image>
    <view class="text">        
        <view>人像精修</view>
        <view>商业广告片调色</view>
        <view>商业海报级视觉精修</view>
        <view>卡通人物制作</view>
        <view>2.5D插画制作</view>
        <view>3D文字视觉特效制作</view>
        <view>平面广告创意</view>
        <view>合成特效制作</view>        
    </view>
  </view>
</view>


<view class="psBox">
  <view class="psBoxTit">
    专业转件技能
  </view>
  <view class="psBoxCon">
    <image src="/images/psmajor02.jpg2.jpg" mode="widthFix" class="pic"></image>
    <view class="text">        
        <view>人像精修</view>
        <view>商业广告片调色</view>
        <view>商业海报级视觉精修</view>
        <view>卡通人物制作</view>
        <view>2.5D插画制作</view>
        <view>3D文字视觉特效制作</view>
        <view>平面广告创意</view>
        <view>合成特效制作</view>        
    </view>
  </view>
</view>


<view class="psBox">
  <view class="psBoxTit">
    专业转件技能
  </view>
  <view class="psBoxCon">
    <image src="/images/psmajor02.jpg2.jpg" mode="widthFix" class="pic"></image>
    <view class="text">        
        <view>人像精修</view>
        <view>商业广告片调色</view>
        <view>商业海报级视觉精修</view>
        <view>卡通人物制作</view>
        <view>2.5D插画制作</view>
        <view>3D文字视觉特效制作</view>
        <view>平面广告创意</view>
        <view>合成特效制作</view>        
    </view>
  </view>
</view>


<view class="psBox">
  <view class="psBoxTit">
    专业转件技能
  </view>
  <view class="psBoxCon">
    <image src="/images/psmajor02.jpg2.jpg" mode="widthFix" class="pic"></image>
    <view class="text">        
        <view>人像精修</view>
        <view>商业广告片调色</view>
        <view>商业海报级视觉精修</view>
        <view>卡通人物制作</view>
        <view>2.5D插画制作</view>
        <view>3D文字视觉特效制作</view>
        <view>平面广告创意</view>
        <view>合成特效制作</view>        
    </view>
  </view>
</view>



<view class="psBox">
  <view class="psBoxTit">
    专业转件技能
  </view>
  <view class="psBoxCon">
    <image src="/images/psmajor02.jpg2.jpg" mode="widthFix" class="pic"></image>
    <view class="text">        
        <view>人像精修</view>
        <view>商业广告片调色</view>
        <view>商业海报级视觉精修</view>
        <view>卡通人物制作</view>
        <view>2.5D插画制作</view>
        <view>3D文字视觉特效制作</view>
        <view>平面广告创意</view>
        <view>合成特效制作</view>        
    </view>
  </view>
</view>

CSS

.header{ width: 750rpx; height: 90rpx; border: 1px solid red;}
.hdCon{ display: flex; justify-content: space-between; align-items: center; height: 100%;}
/* @内容两端对齐；内容居中对齐，若要垂直居中，需要指定高度(高度不继承父元素) */
.hdCon navigator, .hdCon .kefu{ height: 50rpx;}
.hdCon image{ height: 100%;}
.kefu{ position: relative; animation: dh linear 1s infinite alternate;}
/* @设置名为dh的动画，匀速，每1秒，重复，逆序 */
.kefu .btn{ position: absolute; width: 100%; height: 100px; top: 0; left: 0; opacity: 0;}
/* @透明度为0 */

.banner{ width:100%}
.banner image{ width:750rpx; display: block; }

.psBox{ padding:80rpx 0; background:#1C356E}
.psBox:nth-child(2n){ background:#fff;}

/* 圆角边框 */
.psBoxTit{ width:490rpx; height: 70rpx; background: #DE2E05; border-radius: 70rpx; color:#fff; text-align: center; line-height: 70rpx;margin:0 auto; font-size:40rpx;  position: relative;margin-bottom: 40rpx;}
.psBoxTit::before{ display: block; content: ""; width:100%; height: 100%; border:2px dotted #DE2E05; position: absolute; top:0; left: 0;box-sizing: border-box; border-radius: 70rpx; transform: scale(1.03,1.2);}

/* 大图以及小圆点 */
.psBoxCon .pic{ width:100%; }
.psBoxCon .text{ padding:40rpx 26rpx 0; box-sizing: border-box; display: flex; flex-wrap: wrap;}
.psBoxCon .text view{width:50%; font-size:30rpx; line-height: 1.8em;position: relative; padding-left:18rpx; box-sizing: border-box;}
.psBoxCon .text view::before{ content: ""; display: block;width:10rpx; height: 10rpx; border-radius: 50%; background:#000; position: absolute; left:0; top:50%; margin-top:-5rpx;}
.psBox:nth-child(2n-1) .psBoxCon .text{ color:#fff;}
.psBox:nth-child(2n-1) .text view::before{ background:#fff}

/* 圆形图标 */
.psBoxConOne{ color:#fff; display: flex; flex-wrap: wrap; justify-content: center;}
.psBoxConOne .item{ text-align: center; padding:20rpx;}
.psBoxConOne image{width:180rpx; height: 180rpx;}
.psBoxConOne .item view{ text-transform: uppercase;font-size: 28rpx; padding-top:5rpx;}

/* 6 尾部 */
.footer{ padding: 50rpx 0; background: #f2f2f2; text-align: center;}
.footer .pic{ width: 180rpx;}
.footer .text{ font-size: 25rpx; color: #666;}

运行效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-x9GuNjgR-1671343240243)(微信小程序.assets/image-20220129233851075.png)]

跳转功能

<!-- 3 课程分类 -->
<scroll-view class="major" scroll-x>
<!-- @scroll-x 横向滚动 -->
  <navigator open-type="navigate" class="box" url="/pages/ps/ps">
    <image class="pic" src="/images/kecheng1.png"></image>
    <view class="text">平面设计</view>
  </navigator>
  <!--@navigate 这是默认值，可以省略 -->
   <navigator open-type="switchTab" class="box" url="/pages/works/works">
  <!--@switchTab 当跳转到底部导航栏页面需要 -->
    <image class="pic" src="/images/kecheng2.png"></image>
    <view class="text">平面设计</view>
  </navigator>

传递组件数据

配置组件

配置组件页面

HTML

<view class="pubTitle">
    <view class="txt">{{myTitle}}</view>
    <navigator open-type="reLaunch" url="{{myUrl}}" class="more">更多 ></navigator>   
     <!--reLaunch 跳转到导航页面  -->
</view>

CSS

.pubTitle{ display: flex; justify-content: space-between;height: 60rpx;  align-items: center; margin-bottom:40rpx;}
.pubTitle .txt{ font-size:40rpx; height: 100%; position: relative; padding-left:20rpx;}
.pubTitle .txt::before{ display: block; width:8rpx; height: 34rpx; background: #c8020b; content: ""; position: absolute; left: 0; top:50%; margin-top:-15rpx;}
.pubTitle .more{ font-size:34rpx; color:#666}

定义Vue属性

// components/PubTitle/PubTitle.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {

    myTitle:{
      type:String,
      value:""
    },
    myUrl:{
      type:String,
      value:""
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    
  },

  /**
   * 组件的方法列表
   */
  methods: {

  }
})

配置HTML页面

绑定组件

{
  "usingComponents": {
    "HdView":"/components/HdView/HdView",
    "FtView":"/components/FtView/FtView",
    "PubTitle":"/components/PubTitle/PubTitle"
  }
}

为组件属性赋值

有略…

<PubTitle myTitle="学生作品" myUrl="/pages/works/works"/>    
<PubTitle myTitle="行业动态" myUrl="/pages/ps/ps"/>

调用数据接口

请求数据

Page({

  /**
   * 页面的初始数据
   */
  data: {
    dataList:[]
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {    
    wx.request({
      url: 'https://ku.qingnian8.com/school/list.php',
      success:res=>{ 
        res.data.forEach(item=>{
            // 毫秒化秒
            var time = item.posttime*1000;
            var d = new Date(time);
            var year = d.getFullYear();
            var month = (d.getMonth() + 1 < 10 ? "0" + (d.getMonth() + 1) : (d.getMonth() + 1));
            var day = d.getDate();
            var posttime = year + "-" + month + "-" +day;
            item.posttime = posttime;
        }),
        this.setData({
          dataList:res.data
        }) 
      }
    })

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    
  }
})

载入数据

<!-- 5 行业 -->
<view class="dynamic">
  <view class="container">
    <PubTitle myTitle="行业动态" myUrl="/pages/ps/ps"/>
    <view class="dyMain" >
      <navigator class="dyItem" wx:for="{{dataList}}">
        <view class="pic">
          <image src="{{item.picurl}}"></image>
        </view>
        <view class="txt">
          <view class="title">{{item.title}}</view>
          <view class="info">
          <text>作者：</text>{{item.author}}
          <text space="ensp"> - </text>
          时间：{{item.posttime}}
          </view>
        </view>
      </navigator>
    </view>
  </view>
</view>

运行效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-92y8Bhbq-1671343240243)(微信小程序.assets/image-20220130221619295.png)]

ES6封装方法

utils\public.js

var common={
  getStrLen:function(str,len){

    if(str.length>len){
      return str.substr(0,len)+"..."
    }else{
      return str
    }

  },
  getMyData:function (timestamp, formats) {
    // formats格式包括
    // 1. Y-m-d
    // 2. Y-m-d H:i:s
    // 3. Y年m月d日
    // 4. Y年m月d日 H时i分
    formats = formats || 'Y-m-d';

    var zero = function (value) {
        if (value < 10) {
            return '0' + value;
        }
        return value;
    };

    var timestamp=timestamp*1000;
    var myDate = timestamp? new Date(timestamp): new Date();

    var year = myDate.getFullYear();
    var month = zero(myDate.getMonth() + 1);
    var day = zero(myDate.getDate());

    var hour = zero(myDate.getHours());
    var minite = zero(myDate.getMinutes());
    var second = zero(myDate.getSeconds());

    return formats.replace(/Y|m|d|H|i|s/ig, function (matches) {
        return ({
            Y: year,
            m: month,
            d: day,
            H: hour,
            i: minite,
            s: second
        })[matches];
    });
  }

}

module.exports=common

index.js

import common from "../../utils/public.js";

Page({

  /**
   * 页面的初始数据
   */
  data: {
    dataList:[]
  },

  //发送网络请求获取真实的行业动态列表
  getRequest(){
    
    wx.request({
      url: 'https://ku.qingnian8.com/school/list.php',
      data:{
        num:5        
      },
      success:res=>{ 
        res.data.forEach(item=>{
          item.posttime=common.getMyData(item.posttime,"Y-m-d")
          item.title=common.getStrLen(item.title,25)
        })  
        this.setData({
          dataList:res.data
        }) 
      }
    })
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {    
    this.getRequest();

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    
  }
})