领购物优惠券9块9包邮
首页 > 编程语言 > 小程序文章/教程

微信小程序新闻列表功能（读取文件、template模板使用）

   2023-02-09 学习力0
核心提示：　　不忘初心，方得始终。初心易得，始终难守。　　在之前的项目基础上进行修改，实现读取文件内容作为新闻内容进行展示。首先，修改 post.wxml 文件，和 post.js 文件中，某些键值对键的名称。 post.wxml修改后代码如下viewswiper vertical='true' indicato

　　不忘初心，方得始终。初心易得，始终难守。　　

在之前的项目基础上进行修改，实现读取文件内容作为新闻内容进行展示。

首先，修改 post.wxml 文件，和 post.js 文件中，某些键值对键的名称。

 

post.wxml修改后代码如下

<view>
  <swiper vertical='true' indicator-dots='true' autoplay='true' interval='5000'>
    <swiper-item>
      <image src='/images/01.jpg'></image>
    </swiper-item>
    <swiper-item>
      <image src='/images/02.jpg'></image>
    </swiper-item>
    <swiper-item>
      <image src='/images/03.jpg'></image>
    </swiper-item>
  </swiper>

  <block wx:for = "{{posts_key}}" wx:for-item = 'item'>
    <view class='post-container'>
      <view class='post-author-date'>
        <image src='{{item.img.avatar}}' class='post-author'></image>
        <text class='post-date'>{{item.date}}</text>
      </view>
      <text class='post-title'>{{item.title}}</text>
      <image wx:if='{{item.img_condition}}' class='post-image' src='{{item.img.imgSrc}}'></image>
      <text class='post-content'>{{item.content}}</text>
      <view class='post-like'>
        <image class='post-like-image' src='../../images/z.jpg'></image>
        <text class='post-like-font'>{{item.reading}}</text>
        <image class='post-like-image' src='../../images/c.jpg'></image>
        <text class='post-like-font'>{{item.collection}}</text>
      </view>
    </view>
  </block>
</view>

 

 post.js 文件修改后代码如下

Page({
  // 数据绑定
  data: {

  },

  onLoad: function(options) {

    // 页面初始化,options为页面跳转所带来的参数
    // 向服务器请求数据
    

    this.setData(
      { posts_key: posts_content}
    );
  },
})

 

修改完成以后，在根目录新建 data 文件夹，在 data 文件夹中创建 posts-data.js 文件，将之前的新闻数据放进去。

　　　　微信小程序新闻列表功能（读取文件、template模板使用）

posts-data.js 文件内容

var local_database = [{
    date: "Sep 18 2018",
    title: '不忘初心，方得始终',
    content: '从开始时我们彼此都有着无比美好的心灵，只是到最后我们都发现这个世界并非我们想得那么好，于是我们的心灵渐渐被贪婪、欲望给染黑。到生命燃烧殆尽时，我们才突然回想到我们的初心早以不见。',
    reading: '112',
    collection: '64',
    // 嵌套
    img: {
      imgSrc: '/images/04.jpg',
      avatar: '/images/1.jpg',
    },
    img_condition: true,
  },
  {
    date: "Nav 16 2018",
    title: '初心易得，始终难守',
    content: '有时候人就是这样，遇到再大的事儿自己扛，忍忍就过去了，可听到身旁的人一句安慰就瞬间完败。于是后来才明白，我们怕的不是冷漠 ，怕的是突然的温柔。怕的不是自己吃苦，怕的是身边的人为你难过。怕的不是孤独，怕的是辜负。',
    reading: '256',
    collection: '151',
    // 嵌套
    img: {
      imgSrc: '/images/05.jpg',
      avatar: '/images/1.jpg',
    },
    img_condition: true,
  },
  {
    date: "Nav 19 2018",
    title: '向死而生',
    content: '我希望跟我有缘的人能够跟我一样感恩这样美好的缘分，对未来有很多乐观正面的思考，那该有多么好！而且，只要好好体验人生、享受世界的真善美，让自己的生命不断升华成长，不必留下什么，这个世界就会因你而芬芳。若真要留下什么，那就是留下我们的孩子。如果真要衡量什么，一个善良的后代，能带给世界的正面影响，一定会超过邪恶的人。',
    reading: '256',
    collection: '11',
    // 嵌套
    img: {
      imgSrc: '/images/06.jpg',
      avatar: '/images/1.jpg',
    },
    img_condition: true,
  },

  {
    date: "Aue 05 2018",
    title: '缘分',
    content: '其实，同窗或者同事的缘分，都是有时尽的，如果你从中把个别人变成了一生挚爱或者挚友，缘分会稍长一点，但我们大部分人都只是萍水相逢短暂共处的缘分。这就是人生。',
    reading: '356',
    collection: '122',
    // 嵌套
    img: {
      imgSrc: '/images/07.jpg',
      avatar: '/images/1.jpg',
    },
    img_condition: true,
  },

  {
    date: "Nov 17 2018",
    title: '相遇',
    content: '当有两颗尘埃在这个宇宙里接近、相遇后分开，它们各自迎向前方无境的黑暗，也就再也不可能碰到一起。尽管说不清，是在这之前，从无限大的宇宙中以无限小的几率碰到一起更温暖；还是在这之后，在无限大的宇宙中以同样无限远的时间分离更无奈。',
    reading: '116',
    collection: '75',
    // 嵌套
    img: {
      imgSrc: '/images/08.jpg',
      avatar: '/images/1.jpg',
    },
    img_condition: true,
  }

]

 

 

 

 实现从文件中读取数据显示在前端界面

 首先在之前添加的 posts-data.js 文件最后添加一段代码，用来将本文件的数据导出。

// 给脚本文件定义一个出口
module.exports = {
  postList: local_database
}

 

 然后去修改 posts.js 文件，获取 posts-data.js文件的数据，在 posts.js 文件最上方添加代码获取数据。

// 定义一个变量来接受 posts_data.js文件输出的对象
// 注意：require 只能使用相对路径！
var postsData = require('../../data/posts-data.js')

 

然后修改 post.js 文件发往前端的数据

  onLoad: function(options) {

    // 页面初始化,options为页面跳转所带来的参数
    // 向服务器请求数据

    // 小程序总是会读取data对象来做数据绑定，这个动作我们成为动作A。
    // 而这个动作A的执行，是在onLoad事件执行之后发生的。
    // this.data.posts_key = postsData.postList

    this.setData(
      // 替换发现前端的数据
      {
        posts_key: postsData.postList
      }
    );
    
  },

 

 

 　　　　微信小程序新闻列表功能（读取文件、template模板使用）

 

 

template 模板的使用

模板的复用

在 posts 文件夹下创建一个新的文件夹命名为 post-item 。

在 post-item 文件夹中创建两个文件，分别命名为 post-item-template.wxml、post-item-template.wxss

在 post-item-template.wxml 文件中，将 post.wxml 文件中关于新闻展示的代码放进里面。

 post-item-template.wxml 代码如下

<template name='postItem'>
  <view class='post-container'>
    <view class='post-author-date'>
      <image src='{{item.img.avatar}}' class='post-author'></image>
      <text class='post-date'>{{item.date}}</text>
    </view>
    <text class='post-title'>{{item.title}}</text>
    <image wx:if='{{item.img_condition}}' class='post-image' src='{{item.img.imgSrc}}'></image>
    <text class='post-content'>{{item.content}}</text>
    <view class='post-like'>
      <image class='post-like-image' src='../../images/z.jpg'></image>
      <text class='post-like-font'>{{item.reading}}</text>
      <image class='post-like-image' src='../../images/c.jpg'></image>
      <text class='post-like-font'>{{item.collection}}</text>
    </view>
  </view>
</template>

 

修改 post.wxml 文件代码，在最上方引入template模板

<import src="post-item/post-item-template.wxml" />

 在需要展示模板内容（新闻内容）的地方插入模板。

<block wx:for = "{{posts_key}}" wx:for-item = 'item'>
　　<!-- template -->
　　　　<template is='postItem' data="{{item}}"/>
</block>
 
修改后的代码如下
<import src="post-item/post-item-template.wxml" />
<view>
  <swiper vertical='true' indicator-dots='true' autoplay='true' interval='5000'>
    <swiper-item>
      <image src='/images/01.jpg'></image>
    </swiper-item>
    <swiper-item>
      <image src='/images/02.jpg'></image>
    </swiper-item>
    <swiper-item>
      <image src='/images/03.jpg'></image>
    </swiper-item>
  </swiper>

  <block wx:for = "{{posts_key}}" wx:for-item = 'item'>
  <!-- template -->
    <template is='postItem' data="{{item}}"/>
  </block>
</view>

 　　　　微信小程序新闻列表功能（读取文件、template模板使用）

 

样式的复用

将 post.wxss 文件中关于新闻列表的css内容剪切到 post-item-template.wxss 文件

post-item-template.wxss 文件代码如下

.post-author-date{
  /* margin-top: 10rpx;
  margin-bottom: 20rpx;
  margin-left: 10rpx; */
  margin: 10rpx 0 20rpx 10rpx;
}

.post-author{
  width: 60rpx;
  height: 60rpx;
  vertical-align: middle;
}

.post-date{
  margin-left: 20rpx;
  vertical-align: middle;
  margin-bottom: 5px;
  font-size:26rpx; 
}

.post-title{
  font-size: 34rpx;
  font-weight: 600;
  color: 333;
  margin-bottom: 10px;
  margin-left: 10px;
}

.post-image{
  /* margin-left: 16px;  */
  width: 100%;
  height: 342rpx;
  margin: auto 0; 
  margin-bottom: 15px;
}

.post-container{
  color: #666;
  font-weight: 28rpx;
  margin-bottom: 20rpx;
  margin-left: 20rpx;
  /* 文本间距 */
  letter-spacing: 2rpx;
  line-height: 40rpx;
}

.post-like{
  font-size: 13px;
  flex-direction: row;
  line-height: 16px;
  margin-left: 10px;
}

.post-like-image{
  height: 16px;
  width: 16px;
  margin-right: 8px;
  vertical-align: middle;
}

.post-like-font{
  /* 垂直居中 */
  vertical-align: middle;
  margin-right: 20px;
}

 

然后在 post.wxss 文件中引用 模板文件的样式 ，即 引用 post-item-template.wxss 文件

@import "post-item/post-item-template.wxss";

swiper{
  width:100%;
  height:500rpx;
}

swiper image{
  width:100%;
  height:500rpx;
}

.post-container{
  display: flex;
  flex-direction: column;
  margin-top: 20rpx;
  margin-bottom: 40rpx;
  background-color: white;
  border-bottom: 1px solid #ededed;
  border-top: 1px solid #ededed;
  padding-bottom: 5px;
}

　　　　微信小程序新闻列表功能（读取文件、template模板使用）

 

 
反对 0举报 0 评论 0
 

免责声明：本文仅代表作者个人观点，与乐学笔记（本网）无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
    本网站有部分内容均转载自其它媒体，转载目的在于传递更多信息，并不代表本网赞同其观点和对其真实性负责，若因作品内容、知识产权、版权和其他问题，请及时提供相关证明等材料并与我们留言联系，本网站将在规定时间内给予删除等相关处理.

  • 小程序上传wx.uploadFile - 小程序请假-请求
    小程序上传wx.uploadFile - 小程序请假-请求
    小程序上传wx.uploadFileUploadTask wx.uploadFile(Object object)将本地资源上传到服务器。客户端发起一个 HTTPS POST 请求，其中 content-type 为 multipart/form-data。使用前请注意阅读相关说明。num=1;当num==3时，设置按钮隐藏直接上代码：view class='
    03-08
  • 微信小程序中overflow:scroll失效的问题 微信小程序overflow设置滚动
    微信小程序中overflow:scroll失效的问题 微信小
    .common-pop-table {padding: 0 30rpx;overflow: scroll;max-height: 70%;}研究后发现，要实际的设置对应的那个维度的高度，wcss改成.common-pop-table {padding: 0 30rpx;overflow: scroll;max-height: 400px;}就恢复正常了
    03-08
  • 小程序 AI/AR 能力
    一、关于 VisionKit1、定义VisionKit 为小程序提供了开发 AR 功能的能力，包含了 AR 在内的视觉算法。2、版本提供了 V1 和 V2 两个版本，区别如下：V1平面接口，适用于用户在平面场景下，例如桌面，地面，泛平面场景，放置虚拟物体，不提供真实世界距离。用户
    03-08
  • Python小程序——快排算法 快排 python
    1 def Partition(list,p,q): 2 #这里是用来分块的算法。 3 x = list[p] 4 i = p 5 for j in range(p+1,q+1): #注意range是顾前不顾后的，所以后面的区间值要大一位 6 if list[j]x: 7 i+=1 8 list[i],list[j] = list[j],list[i] 9 10 list[p], list[i] = list[
    02-09
  • 总结一些 egret项目接小程序时 遇到的问题及解决方法
    总结一些 egret项目接小程序时 遇到的问题及解
    1，https://blog.csdn.net/u013052238/article/details/81456908  这个地址的一些问题 是一部分，其中 第6条，当在wxgame.ts中仿照已有的 暴露库给window的方法写完之后，仍会报错，本人遇到的是 ： jszip is not defined :  也尝试过其他前辈分享的解决方
    02-09
  • c++第一个小程序 第一个小程序是什么
     #include iostreamusing namespace std;int main(){const int SIZE=50;//定义大小。char name[SIZE]; cout"please input you name!\n"; //提示cinname;//输入cout"hello world:"nameendl; //输出return 0;}   #include iostreamusing namespace std;int m
    02-09
  • 微信小程序 错误记录
    1、报错this.getUserInfo(this.setData) is not a function;at pages/index/index onShow function;at api request success callback functionTypeError: this.getUserInfo is not a function在回调结果里调用这个页面的函数 this.fun() 或者 this.setData 时
    02-09
  • 【小程序】添加tabBar后navigateTo失效
    某页面.js//事件处理函数bindViewTap() {wx.navigateTo({url: '../logs/logs',})}, app.json"tabBar": {"backgroundColor": "black","color":"white","list": [{"pagePath": "pages/index/inde
    02-09
  • 微信小程序npm引入vant-weapp库的方法
    微信小程序npm引入vant-weapp库的方法
    1、终端打开小程序所在目录  2、npm init初始化，初始化完成之后，小程序项目中就会出现package.json文件，说明已经初始化成功 3、npm install --production 安装生产环境，不要npm install都给装上，以免小程序包过大  4、安装vant ：npm i vant-weapp
    02-09
  • 小程序组件之间的通信 小程序子父子组件通信
    前言：其实之前就想写这个的，因为我觉得这么模块化的框架，组件之间通信是非常重要的，也是最经常用到的一块儿，只是之前在项目里一直没用到跨组件通信，现在用到了，也会用了，就一起写出来得了 :） 一、父、子组件之间的通信注：首先我们先将子组件在父组
    02-09
更多>PHP教程
php-fpm进程管理的三种模式 phpfpm子进程 [PHP8] 我参加了PHP8工程师认证初学者考试beta考试
更多>C/C++教程
VScode运行C++中文终端乱码的解决方案 vscode错误提示中文 C++ LeetCode1945题解字符串转化后的各位数字之和
更多>Java教程
Java项目导出数据为 PDF 文件的操作代码 盘点Java中延时任务的多种实现方式 java 延时队列怎么实现
更多>ASP.NET
使用WebClient自动填写并提交ASP.NET页面表单的源代码 asp.net mvc多条件+分页查询解决方案 asp.net mvc多条件+分页查询解决方案
更多>JSP编程
JSP通用高大上分页代码(超管用) JSP验证码动态生成方法
点击排行
网站首页  |  关于我们  |  联系方式  |  使用协议  |  版权隐私  |  网站地图  |  网站留言  |  违规举报