小程序学习（2）——数据绑定与跳转界面

再上一个学习中，进行了小程序首秀，那么接下来就是在深入的自己学习的一些内容。主要是设计一个新闻列表页面，也算是在代码初学中都比较经典的一些学习过程了。后边我会放写好的在github的代码链接

一、页面思路与构思

大体如图，我们需要先想一下，这个界面由哪几部分构成，首先最大的肯定是两方面，一部分是轮播图，一部分是下边的新闻列表。
轮播图没什么可说的，就是图片轮换，
另外一部分细分我把他分为了四部分，其实三部分也是可以的，就是如下图的四部分
第一部分头像日期

第二部分 标题

第三部分 内容

第四部分 点赞查看

详细的代码就不赘述了，可以看我的github，就说一些重要的地方，小程序主要用JS，大部分结构代码大家应该还是很熟悉的。

二、轮播图

轮播图在小程序中还是比较好解决的，没有其他代码的麻烦，因为都有写好的关键字。
swiper 容器就是主要用于轮播图使用，搭配他的子配件swiper-item。就可以实现代码书写，具体如下：

 <swiper class="banner" indicator-dots="true" autoplay="true" circular="true">
        <swiper-item>
            <image style="width:100%"  src="/images/lunbo1.jpg"></image>
        </swiper-item>
        <swiper-item>
            <image style="width:100%" src="/images/lunbo2.jpg"></image>
        </swiper-item>
        <swiper-item>
            <image style="width:100%" src="/images/lunbo3.jpg"></image>
        </swiper-item>
    </swiper>

而各个关键字在开发者文档也有说明：路径为组件——视图容器——swiper

注：图片的高不取决于内部的swiper-item,而是取决于swiper，所以要注意你的css样式。

三、新闻列表（数据绑定）

（1）新闻列表根据之前之前的分布思路，用view容器来盛放每一部分。每个容器之前的对齐方式推荐用flex。

display:flex,
flex-direction: column;  /*columb为竖行对齐，row为横向对齐，视情况而定*/
align-items: center;  /*内部子元素居中对齐 */

（2）内容列表不直接使用连接文本在页面上，在不使用数据库的情况下，新建了一个“.js”文件专门来存放数据。（数据绑定）

下边也是这些代码，重复使用即可。
此为定义一个数组元素，前台调用数组元素中的元素。
在本界面最后给数组元素一个出口，如下：

module.exports = {
  newslist: newlist       /*newslist为自定义，newlist为数组元素名*/
}

在需要接受使用的界面的“.js”文件使用如下代码接引引用

var newsData=require("../database/newlistDB.js")  /*必须为相对路径，不能是绝对路径*/

在下边的函数“监听页面加载onLoad中使用setData调用,以使值可以传递到data中，做初始化加载。”

this.setData({ post_key:newsData.newslist}) 
    /*post_key和前边view的wx:for中的内容关键字是一个；
      newsData为接引引用的定义关键字；
      newslist为数据元素出口接引数据元素的定义的值
     */

前台要接受这些数据，使用一个模板加载就需要一个循环，做一个循环输出，这个时候我们就想到了for，而在小程序中，前台的for是使用路由WX实现的。
如图

使用容器block包裹所有使用的控件，使用wx:for来加载数据“post_key”,wx:for-item中的元素为子元素标识，使用它和数组中的关键字来加载内容。如图所示这样加载。wx:key是为了消除一个跳转触发的警告内容，双引号后边的内容可以随便写。

四、跳转

在要跳转的内容上添加监听事件，小程序的监听事件如下

bind:tap="执行函数名"或bindtap="执行函数名"

在对应页面的“.js”中添加监控事件

 执行函数名:function(){
    wx.redirectTo({
      url: '路径',
    })
  }

在小程序中有两个跳转方式，一个是redirectTo,这个函数跳转后，没有右上角的返回标志，且他调用的生命周期中的事件为onUnliad
navigateTo做跳转是有右上角的返回标志的，且返回的生命周期事件为onHide

上边大致就是整个数据绑定和跳转的内容，下边是源码，在github
github源码，本次的源码是mini2