微信小程序新闻列表功能(读取文件、template)

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


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

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

post.wxml修改后代码如下

  1. <view>
  2. <swiper vertical='true' indicator-dots='true' autoplay='true' interval='5000'>
  3. <swiper-item>
  4. <image src='/images/01.jpg'></image>
  5. </swiper-item>
  6. <swiper-item>
  7. <image src='/images/02.jpg'></image>
  8. </swiper-item>
  9. <swiper-item>
  10. <image src='/images/03.jpg'></image>
  11. </swiper-item>
  12. </swiper>
  13.  
  14. <block wx:for = "{{posts_key}}" wx:for-item = 'item'>
  15. <view class='post-container'>
  16. <view class='post-author-date'>
  17. <image src='{{item.img.avatar}}' class='post-author'></image>
  18. <text class='post-date'>{{item.date}}</text>
  19. </view>
  20. <text class='post-title'>{{item.title}}</text>
  21. <image wx:if='{{item.img_condition}}' class='post-image' src='{{item.img.imgSrc}}'></image>
  22. <text class='post-content'>{{item.content}}</text>
  23. <view class='post-like'>
  24. <image class='post-like-image' src='../../images/z.jpg'></image>
  25. <text class='post-like-font'>{{item.reading}}</text>
  26. <image class='post-like-image' src='../../images/c.jpg'></image>
  27. <text class='post-like-font'>{{item.collection}}</text>
  28. </view>
  29. </view>
  30. </block>
  31. </view>

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

  1. Page({
  2. // 数据绑定
  3. data: {
  4.  
  5. },
  6.  
  7. onLoad: function(options) {
  8.  
  9. // 页面初始化,options为页面跳转所带来的参数
  10. // 向服务器请求数据
  11.  
  12. this.setData(
  13. { posts_key: posts_content}
  14. );
  15. },
  16. })

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

    

posts-data.js 文件内容

  1. var local_database = [{
  2. date: "Sep 18 2018",
  3. title: '不忘初心,方得始终',
  4. content: '从开始时我们彼此都有着无比美好的心灵,只是到最后我们都发现这个世界并非我们想得那么好,于是我们的心灵渐渐被贪婪、欲望给染黑。到生命燃烧殆尽时,我们才突然回想到我们的初心早以不见。',
  5. reading: '112',
  6. collection: '64',
  7. // 嵌套
  8. img: {
  9. imgSrc: '/images/04.jpg',
  10. avatar: '/images/1.jpg',
  11. },
  12. img_condition: true,
  13. },
  14. {
  15. date: "Nav 16 2018",
  16. title: '初心易得,始终难守',
  17. content: '有时候人就是这样,遇到再大的事儿自己扛,忍忍就过去了,可听到身旁的人一句安慰就瞬间完败。于是后来才明白,我们怕的不是冷漠 ,怕的是突然的温柔。怕的不是自己吃苦,怕的是身边的人为你难过。怕的不是孤独,怕的是辜负。',
  18. reading: '256',
  19. collection: '151',
  20. // 嵌套
  21. img: {
  22. imgSrc: '/images/05.jpg',
  23. avatar: '/images/1.jpg',
  24. },
  25. img_condition: true,
  26. },
  27. {
  28. date: "Nav 19 2018",
  29. title: '向死而生',
  30. content: '我希望跟我有缘的人能够跟我一样感恩这样美好的缘分,对未来有很多乐观正面的思考,那该有多么好!而且,只要好好体验人生、享受世界的真善美,让自己的生命不断升华成长,不必留下什么,这个世界就会因你而芬芳。若真要留下什么,那就是留下我们的孩子。如果真要衡量什么,一个善良的后代,能带给世界的正面影响,一定会超过邪恶的人。',
  31. reading: '256',
  32. collection: '11',
  33. // 嵌套
  34. img: {
  35. imgSrc: '/images/06.jpg',
  36. avatar: '/images/1.jpg',
  37. },
  38. img_condition: true,
  39. },
  40.  
  41. {
  42. date: "Aue 05 2018",
  43. title: '缘分',
  44. content: '其实,同窗或者同事的缘分,都是有时尽的,如果你从中把个别人变成了一生挚爱或者挚友,缘分会稍长一点,但我们大部分人都只是萍水相逢短暂共处的缘分。这就是人生。',
  45. reading: '356',
  46. collection: '122',
  47. // 嵌套
  48. img: {
  49. imgSrc: '/images/07.jpg',
  50. avatar: '/images/1.jpg',
  51. },
  52. img_condition: true,
  53. },
  54.  
  55. {
  56. date: "Nov 17 2018",
  57. title: '相遇',
  58. content: '当有两颗尘埃在这个宇宙里接近、相遇后分开,它们各自迎向前方无境的黑暗,也就再也不可能碰到一起。尽管说不清,是在这之前,从无限大的宇宙中以无限小的几率碰到一起更温暖;还是在这之后,在无限大的宇宙中以同样无限远的时间分离更无奈。',
  59. reading: '116',
  60. collection: '75',
  61. // 嵌套
  62. img: {
  63. imgSrc: '/images/08.jpg',
  64. avatar: '/images/1.jpg',
  65. },
  66. img_condition: true,
  67. }
  68.  
  69. ]

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

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

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

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

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

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

  1. onLoad: function(options) {
  2.  
  3. // 页面初始化,options为页面跳转所带来的参数
  4. // 向服务器请求数据
  5.  
  6. // 小程序总是会读取data对象来做数据绑定,这个动作我们成为动作A。
  7. // 而这个动作A的执行,是在onLoad事件执行之后发生的。
  8. // this.data.posts_key = postsData.postList
  9.  
  10. this.setData(
  11. // 替换发现前端的数据
  12. {
  13. posts_key: postsData.postList
  14. }
  15. );
  16.  
  17. },

    


template 模板的使用

模板的复用

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

 post-item 文件夹中创建两个文件,分别命名为 post-item-template.wxmlpost-item-template.wxss

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

 post-item-template.wxml 代码如下

  1. <template name='postItem'>
  2. <view class='post-container'>
  3. <view class='post-author-date'>
  4. <image src='{{item.img.avatar}}' class='post-author'></image>
  5. <text class='post-date'>{{item.date}}</text>
  6. </view>
  7. <text class='post-title'>{{item.title}}</text>
  8. <image wx:if='{{item.img_condition}}' class='post-image' src='{{item.img.imgSrc}}'></image>
  9. <text class='post-content'>{{item.content}}</text>
  10. <view class='post-like'>
  11. <image class='post-like-image' src='../../images/z.jpg'></image>
  12. <text class='post-like-font'>{{item.reading}}</text>
  13. <image class='post-like-image' src='../../images/c.jpg'></image>
  14. <text class='post-like-font'>{{item.collection}}</text>
  15. </view>
  16. </view>
  17. </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>
 
修改后的代码如下
  1. <import src="post-item/post-item-template.wxml" />
  2. <view>
  3. <swiper vertical='true' indicator-dots='true' autoplay='true' interval='5000'>
  4. <swiper-item>
  5. <image src='/images/01.jpg'></image>
  6. </swiper-item>
  7. <swiper-item>
  8. <image src='/images/02.jpg'></image>
  9. </swiper-item>
  10. <swiper-item>
  11. <image src='/images/03.jpg'></image>
  12. </swiper-item>
  13. </swiper>
  14.  
  15. <block wx:for = "{{posts_key}}" wx:for-item = 'item'>
  16. <!-- template -->
  17. <template is='postItem' data="{{item}}"/>
  18. </block>
  19. </view>

    

样式的复用

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

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

  1. .post-author-date{
  2. /* margin-top: 10rpx;
  3. margin-bottom: 20rpx;
  4. margin-left: 10rpx; */
  5. margin: 10rpx 0 20rpx 10rpx;
  6. }
  7.  
  8. .post-author{
  9. width: 60rpx;
  10. height: 60rpx;
  11. vertical-align: middle;
  12. }
  13.  
  14. .post-date{
  15. margin-left: 20rpx;
  16. vertical-align: middle;
  17. margin-bottom: 5px;
  18. font-size:26rpx;
  19. }
  20.  
  21. .post-title{
  22. font-size: 34rpx;
  23. font-weight:;
  24. color:;
  25. margin-bottom: 10px;
  26. margin-left: 10px;
  27. }
  28.  
  29. .post-image{
  30. /* margin-left: 16px; */
  31. width: 100%;
  32. height: 342rpx;
  33. margin: auto 0;
  34. margin-bottom: 15px;
  35. }
  36.  
  37. .post-container{
  38. color: #666;
  39. font-weight: 28rpx;
  40. margin-bottom: 20rpx;
  41. margin-left: 20rpx;
  42. /* 文本间距 */
  43. letter-spacing: 2rpx;
  44. line-height: 40rpx;
  45. }
  46.  
  47. .post-like{
  48. font-size: 13px;
  49. flex-direction: row;
  50. line-height: 16px;
  51. margin-left: 10px;
  52. }
  53.  
  54. .post-like-image{
  55. height: 16px;
  56. width: 16px;
  57. margin-right: 8px;
  58. vertical-align: middle;
  59. }
  60.  
  61. .post-like-font{
  62. /* 垂直居中 */
  63. vertical-align: middle;
  64. margin-right: 20px;
  65. }

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

  1. @import "post-item/post-item-template.wxss";
  2.  
  3. swiper{
  4. width:100%;
  5. height:500rpx;
  6. }
  7.  
  8. swiper image{
  9. width:100%;
  10. height:500rpx;
  11. }
  12.  
  13. .post-container{
  14. display: flex;
  15. flex-direction: column;
  16. margin-top: 20rpx;
  17. margin-bottom: 40rpx;
  18. background-color: white;
  19. border-bottom: 1px solid #ededed;
  20. border-top: 1px solid #ededed;
  21. padding-bottom: 5px;
  22. }

    

微信小程序新闻列表功能(读取文件、template模板使用)的更多相关文章

  1. 微信小程序拖动列表功能

    WXML部分 1 <view class="index"> 2 3 <!-- 数据展示区 --> 4 <scroll-view 5 class=&qu ...

  2. 微信小程序在线支付功能使用总结

    最近需要在微信小程序中用到在线支付功能,于是看了一下官方的文档,发现要在小程序里实现微信支付还是很方便的,如果你以前开发过服务号下的微信支付,那么你会发现其实小程序里的微信支付和服务号里的开发过程如出 ...

  3. 微信小程序调用蓝牙功能控制车位锁

    第一次学用微信小程序,项目需要,被逼着研究了一下,功能是调用微信小程序的蓝牙功能,连接上智能车位锁,控制升降,大概步骤及调用的小程序接口API如下: 1.打开蓝牙模块 wx.openBluetooth ...

  4. 微信小程序实战 购物车功能

    代码地址如下:http://www.demodashi.com/demo/12400.html 一.准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.com/ ...

  5. 微信小程序开发-蓝牙功能开发

    0. 前言 这两天刚好了解了一下微信小程序的蓝牙功能.主要用于配网功能.发现微信的小程序蓝牙API已经封装的很好了.编程起来很方便.什么蓝牙知识都不懂的情况下,不到两天就晚上数据的收发了,剩下的就是数 ...

  6. 微信小程序开发:学习笔记[2]——WXML模板

    微信小程序开发:学习笔记[2]——WXML模板 快速开始 介绍 WXML 全称是 WeiXin Markup Language,是小程序框架设计的一套标签语言,结合小程序的基础组件.事件系统,可以构建 ...

  7. 微信小程序结合原生JS实现电商模板(二)

    接 <微信小程序结合原生JS实现电商模板(一)>,在首页列表加入购物车到购物和模块增删数量,动态计算商品价格实现后,本次提交主要实现了商品详情(还不完善)简单页面,从商品详情页跳转到购物车 ...

  8. 微信小程序新闻信息列表展示

    微信小程序信息展示列表 wxml <!-- 轮播图 --> <view class='haibao' bindtap="seeDetail" id="{ ...

  9. 微信小程序新闻网站列表页

    在app.json中可以设置所有文件的头部导航颜色 (是window属性的子属性) 在具体页面可以单独设置该页面的导航颜色 (直接写该属性,不需要写window属性) 查看官方文档,可以看到好多全局属 ...

随机推荐

  1. 深圳MPD大会,五大专题一会尽享

    深圳MPD大会,五大专题一会尽享 2013年9月,深圳的高温将慢慢褪去,炎炎夏日也会变得稍微清凉一些.但9月It届的峰会活动却没有丝毫的锐减.9月7-8日深圳将迎来MPD大会2013的收官之站. MP ...

  2. 蓝桥杯 - G将军有一支训练有素的军队 - [树形DP]

    G将军有一支训练有素的军队,这个军队除开G将军外,每名士兵都有一个直接上级(可能是其他士兵,也可能是G将军).现在G将军将接受一个特别的任务,需要派遣一部分士兵(至少一个)组成一个敢死队,为了增加敢死 ...

  3. Oracle Function:TO_CHAR

    Description The Oracle/PLSQL TO_CHAR function converts a number or date to a string.将数字转换为日期或字符串 Syn ...

  4. PyQT5-QPushButton切换按钮

    """ QPushButton:切换按钮就是QPsuhButton的一种特殊模式,他有两种状态:按下和未按下.我们在点击的时候切换两种状态,有很多场景会用到这个功能 Au ...

  5. linux服务器的性能分析与优化

    [1]影响Linux服务器性能的因素 操作系统级 Ø CPU 目前大部分CPU在同一时间只能运行一个线程,超线程的处理器可以在同一时间处理多个线程,因此可以利用超线程特性提高系统性能. 在linux系 ...

  6. 如何快速创建提交一个项目到Github

    1.https://github.com创建一个repository 2.本地创建一个文件夹A 3.命令行转到新文件夹A,执行git init使其能被git管理,并生成.git隐藏文件 4.如内容,应 ...

  7. AOP 详解

    1. 需求:统计方法执行的性能情况(来源:<精通Spring 4.x>) // 性能监视类 PerformanceMonitor package com.noodles.proxy; pu ...

  8. 2018/03/11 每日一个Linux命令 之 top

    每日一个Linux命令 之 top   今天在公司测试服务器上跑了一个我写的功能[本地测试过的],但是不知道怎么跑了个无限死循环出来,一个文件的体积在不停的变大,如果不管的话这能行? 上去一看,PHP ...

  9. 改革春风吹满地---hdu2036(多边形用差积求面积)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2036 #include<iostream> #include<stdio.h> ...

  10. 【转】基于jquery,bootstrap数据验证插件bootstrapValidator 教程

    bootstrap:能够增加兼容性的强大框架. 因为项目需要数据验证,看bootstrapValidator 还不错,就上手一直,完美兼容,话不多说. 需要引用css: bootstrap.min.c ...