微信小程序编写新闻阅读列表

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

本篇学习主要内容

　　Swiper 组件（轮播图）

　　App.json 里的关于导航栏、标题的配置。

　　Page 页面与应用程序的生命周期

　　数据绑定（核心知识）

　　数据绑定的运算与逻辑

　　AppDate 区域介绍

　　事件与事件对象

　　缓存

　　列表渲染（核心知识）

　　Template 模板的使用（核心知识）

Swiper 组件（轮播图）

Swiper官方API文档：https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html

简单案例01

<view>

  <swiper>

    <swiper-item>Content1</swiper-item>

    <swiper-item>Content2</swiper-item>

    <swiper-item>Content3</swiper-item>

  </swiper>

</view>

简单案例02

<view>

  <swiper  style='width:100%;height:500rpx'>

    <swiper-item>

      <image src='/images/01.jpg' style='width:100%;height500rpx'></image>

    </swiper-item>

    <swiper-item>

      <image src='/images/02.jpg' style='width:100%;height500rpx'></image>

    </swiper-item>

    <swiper-item>

      <image src='/images/03.jpg' style='width:100%;height500rpx'></image>

    </swiper-item>

  </swiper>

</view>

主要属性

简单案例03

目录结构

app.json

{

  "pages": [

    "pages/posts/post",

    "pages/welcome/welcome"

  ],

  "window": {

    "backgroundTextStyle": "light",

    "navigationBarBackgroundColor": "#b3d4db",

    "navigationBarTitleText": "WeChat",

    "navigationBarTextStyle": "black"

  }

}

post.wxml

<view>

  <swiper indicator-dots='true' autoplay='true' interval='2000'>

    <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>

</view>

post.wxss

swiper{

  width:100%;

  height:500rpx;

}

swiper image{

  width:100%;

  height:500rpx;

}

App.json 里的关于导航栏、标题的配置

官方API文档地址：https://developers.weixin.qq.com/miniprogram/dev/framework/config.html

主要属性

简单案例

post.json

{

    "navigationBarBackgroundColor": "#405f80",

    "navigationBarTitleText": "文与字"

}

构建文章列表

案例代码

post.wxml

<view>

  <swiper 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>

  <view class='post-container'>

    <view class='post-author-date'>

      <image src='/images/1.jpg' class='post-author'></image>

      <text class='post-date'>Nav 25 2018</text>

    </view>

    <text class='post-title'>不忘初心</text>

    <image class='post-image' src='/images/04.jpg'></image>

    <text class='post-content'>从开始时我们彼此都有着无比美好的心灵，只是到最后我们都发现这个世界并非我们想得那么好，于是我们的心灵渐渐被贪婪、欲望给染黑。到生命燃烧殆尽时，我们才突然回想到我们的初心早以不见。</text>

    <view class='post-like'>

      <image class='post-like-image' src='../../images/z.jpg'></image>

      <text class='post-like-font'>98</text>

     <image class='post-like-image' src='../../images/c.jpg'></image>

     <text class='post-like-font'>42</text>

    </view>

  </view>

</view>

post.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;

}

.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:;

  color:;

  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;

}

小程序 js 脚本文件

js 脚本文件page结构官方开发文档：https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/page.html

js 文件添加 page 结构（生命周期）

post.js

Page({

  data: {

    String1

  },

  onLoad: function (options) {

    // 页面初始化,options为页面跳转所带来的参数

    String2

  },

  onReady: function () {

    // 页面渲染完成

    String3

  },

  onShow: function () {

    // 页面显示

    String4

  },

  onHide: function () {

    // 页面隐藏

    String5

  },

  onUnload: function () {

    // 页面关闭

    String6

  }

})

案例代码1

Page({

  data: {

  },

  // 自定义变量

  imgPath : "/images/...",

  // 自定义方法

  process:function(){

  },

  onLoad: function (options) {

    // 页面初始化,options为页面跳转所带来的参数

    console.log('onLoad') ;

  },

  onReady: function () {

    // 页面渲染完成

    console.log('onReady');

  },

  onShow: function () {

    // 页面显示

    console.log('onShow');

  },

  onHide: function () {

    // 页面隐藏

    console.log('onHide');

  },

  onUnload: function () {

    // 页面关闭

    console.log('onUnload');

  }

})

下图说明了 Page 实例的生命周期

小程序数据绑定语法

案例代码

Page({

  // 数据绑定

  data: {

    date:'Nav 11 2018',

    title:'不忘初心,方得始终',

  },

  // 自定义变量

  imgPath : "/images/...",

  // 自定义方法

  process:function(){

  },

  onLoad: function (options) {

    // 页面初始化,options为页面跳转所带来的参数

    console.log('onLoad') ;

  },

  onReady: function () {

    // 页面渲染完成

    console.log('onReady');

  },

  onShow: function () {

    // 页面显示

    console.log('onShow');

  },

  onHide: function () {

    // 页面隐藏

    console.log('onHide');

  },

  onUnload: function () {

    // 页面关闭

    console.log('onUnload');

  }

})

前端页面使用 {{ 双括号 }} 引用数据

    <view class='post-author-date'>

      <image src='/images/1.jpg' class='post-author'></image>

      <text class='post-date'>{{date}}</text>

    </view>

    <text class='post-title'>{{title}}</text>

    <image class='post-image' src='/images/04.jpg'></image>

使用数据绑定，修改我们之前写的代码

修改 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>

  <view class='post-container'>

    <view class='post-author-date'>

      <image src='{{author_img}}' class='post-author'></image>

      <text class='post-date'>{{date}}</text>

    </view>

    <text class='post-title'>{{title}}</text>

    <image class='post-image' src='/images/04.jpg'></image>

    <text class='post-content'>{{content}}</text>

    <view class='post-like'>

      <image class='post-like-image' src='../../images/z.jpg'></image>

      <text class='post-like-font'>{{view_num}}</text>

     <image class='post-like-image' src='../../images/c.jpg'></image>

     <text class='post-like-font'>{{collect_num}}</text>

    </view>

  </view>

</view>

修改 post.wxss 文件代码

Page({

  // 数据绑定

  data: {

  },

  // 自定义变量

  imgPath : "/images/...",

  // 自定义方法

  process:function(){

  },

  onLoad: function (options) {

    // 页面初始化,options为页面跳转所带来的参数

    // 向服务器请求数据

    var post_content1 = {

      date:"Sep 18 2018",

      title:'不忘初心，方得始终，初心易得，始终难守',

      content:'从开始时我们彼此都有着无比美好的心灵，只是到最后我们都发现这个世界并非我们想得那么好，于是我们的心灵渐渐被贪婪、欲望给染黑。到生命燃烧殆尽时，我们才突然回想到我们的初心早以不见。',

      view_num:'112',

      collect_num:'64',

      author_img:'/images/1.jpg',

    }

    this.setData(post_content1);

  },

  onReady: function () {

    // 页面渲染完成

    console.log('onReady');

  },

  onShow: function () {

    // 页面显示

    console.log('onShow');

  },

  onHide: function () {

    // 页面隐藏

    console.log('onHide');

  },

  onUnload: function () {

    // 页面关闭

    console.log('onUnload');

  }

})

数据绑定拓展

　　如果json格式字符串进行了嵌套，则小程序前端显示不出来。

　　解决办法：. 点出来。

案例：

  onLoad: function (options) {

    // 页面初始化,options为页面跳转所带来的参数

    // 向服务器请求数据

    var post_content1 = {

      date:"Sep 18 2018",

      title:'不忘初心，方得始终，初心易得，始终难守',

      content:'从开始时我们彼此都有着无比美好的心灵，只是到最后我们都发现这个世界并非我们想得那么好，于是我们的心灵渐渐被贪婪、欲望给染黑。到生命燃烧殆尽时，我们才突然回想到我们的初心早以不见。',

      view_num:'112',

      collect_num:'64',

      // 嵌套

      img:{

        post_img:'/images/04.jpg',

        author_img: '/images/1.jpg',

      },

    }

    this.setData(post_content1);

  },

<image src='{{img.author_img}}' class='post-author'></image>

<image class='post-image' src='{{img.post_img}}'></image>

小程序标签隐藏

案例代码

<image wx:if='{{false}}' class='post-image' src='{{img.post_img}}'></image>

wx:if = ' {{ false }} ' false为隐藏。true为显示。false 为之前js文件最上方 data 绑定的 false：false (布尔值，不加引号)

双括号实现字符串的运算案例

<text class='post-date'>{{'hello' + date}}</text>

微信小程序新闻列表循环操作

再在小程序添加一组数据，和之前测试的那组数据可以连接成一个数组，代码如下。

post.js

Page({

  // 数据绑定

  data: {

  },

  // 自定义变量

  imgPath: "/images/...",

  // 自定义方法

  process: function() {

  },

  onLoad: function(options) {

    // 页面初始化,options为页面跳转所带来的参数

    // 向服务器请求数据

    var posts_content = [
　　　　{

          date: "Sep 18 2018",

          title: '不忘初心，方得始终',

          content: '从开始时我们彼此都有着无比美好的心灵，只是到最后我们都发现这个世界并非我们想得那么好，于是我们的心灵渐渐被贪婪、欲望给染黑。到生命燃烧殆尽时，我们才突然回想到我们的初心早以不见。',

          view_num: '112',

          collect_num: '64',

          // 嵌套

          img: {

            post_img: '/images/04.jpg',

            author_img: '/images/1.jpg',

          },

          img_condition: true,

        },

        {

          date: "Nav 16 2018",

          title: '初心易得，始终难守',

          content: '有时候人就是这样，遇到再大的事儿自己扛，忍忍就过去了，可听到身旁的人一句安慰就瞬间完败。于是后来才明白，我们怕的不是冷漠 ，怕的是突然的温柔。怕的不是自己吃苦，怕的是身边的人为你难过。怕的不是孤独，怕的是辜负。',

          view_num: '256',

          collect_num: '151',

          // 嵌套

          img: {

            post_img: '/images/05.jpg',

            author_img: '/images/1.jpg',

          },

          img_condition: true,

        }

      ]

    this.setData(

      { posts_key: posts_content}

    );

  },

  onReady: function() {

    // 页面渲染完成

    console.log('onReady');

  },

  onShow: function() {

    // 页面显示

    console.log('onShow');

  },

  onHide: function() {

    // 页面隐藏

    console.log('onHide');

  },

  onUnload: function() {

    // 页面关闭

    console.log('onUnload');

  }

})

注意：再次关联data的时候需要修改之前的写法，需要关联一个对象。

　　{ posts_key: posts_content}

在 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.author_img}}' 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.post_img}}'></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.view_num}}</text>

        <image class='post-like-image' src='../../images/c.jpg'></image>

        <text class='post-like-font'>{{item.collect_num}}</text>

      </view>

    </view>

  </block>

</view>

将我们要循环的结构使用 <block></block> 标签包裹起来。

在 block 标签中设置循环操作：wx:for = "{{posts_key}}" 其中 posts_key 为js文件返回给前端的对象名称。

在 block 标签中设置获取posts_key对象的每一个元素：wx:for-item = 'item' 其中这句话可以省略。

还可以回去 posts_key 中元素的下标索引，即第几个元素：wx:for-index='idx'。

最后，修改给个展示元素的对应值，例如：{{item.img.author_img}}。由 posts_key 中每个元素item点出来。

微信小程序界面跳转

实现点击启动页面按钮‘开启小程序’跳转到我们刚刚写的新闻列表界面，即从welcom界面跳转到post界面。

首先，我们需要去app.json文件，将小程序启动界面有我们之前测试的post启动修改为welcome界面启动。

app.json 文件代码如下

{

  "pages": [

    "pages/welcome/welcome",

    "pages/posts/post"

  ],

  "window": {

    "navigationBarBackgroundColor": "#b3d4db"

  }

}

然后点击 ‘开启小程序之旅‘ 按钮跳转页面进入到新闻阅读界面。

在这个过程中需要用到事件和界面跳转。

微信小程序事件官方开发文档：https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html

事件绑定注意事项：

　　在前端标签进行事件绑定的时候，需要在事件名称之前加bind或者catch 。

　　例如：我们为一个标签绑定一个 tap（手指触摸后马上离开）事件

　　　　—— bindtap = “OnTap” 绑定的事件 = 事件触发函数。当发生tap事件之后，小程序马上去执行OnTap方法。

welcom.wxml文件代码：

<!-- wxml 是编写小程序骨架的文件 -->

<!-- <div>一样的效果 -->

<view class='container'>

  <image class='user-avatar' src='/images/1.jpg'></image>

  <text class='user-name'>Hello , 王佳伟</text>

  <view class='moto-container' bindtap='OnTap'>

    <text class='moto'>开启小程序之旅</text>

  </view>

</view>

然后去 welcome.js文件中添加 OnTap 函数

Page({

  OnTap: function(event) {

    // 跳转页面,之前的界面保留但隐藏，可返回，进入子级界面

    // wx.navigateTo({

    //   url: '../posts/post',

    // });

    // 页面之间平行跳转，之前的页面被关闭，不可返回，进入同级界面

    wx.redirectTo({

      url: '../posts/post',

    });

    // 跳转界面

    // wx.navigateTo({

    //   // url 跳转的路径

    //   url:'String',

    //   success:function(){

    //     // 跳转成功时触发

    //   },

    //   fail:function(){

    //     // 跳转失败时触发

    //   },

    //   complete:function(){

    //     // 无论成功失败都触发

    //   },

    // });

  },

})

冒泡事件：在事件名称之前加bind的事件。点击子节点的触发事件，在子节点事件结束之后会再次触发父节点的触发事件。如果不想触发父节点的事件，则选择catch，而不是bind。