开启小程序学习之旅–笔记一

从工作中会涉及到这一方面的工作，但是自己只能做到表层的制作工作，所以就准备陆续的进行一下学习，来不断的提高自己在这方面的能力。当然也是从每次的学习中挖掘一些简单的知识点。也希望在自己实际用到的时候，这些笔记可以起到一些作用。

一、首先是wxml层

<template></template>

页面中肯定不缺模板，这个也是为了复用才弄的那么如何将这个模板引入所要展示的页面呢？代码如下

<import src='post-item/post-item-template.wxml' />  
<!-- 引入模板文件， 结尾要加“/” 才会正常显示 -->

下面的注释 要看清楚，当时没有加那个，一直显示不出来结构，似乎还报错了。

引入进来之后，就是使用模板了，先上代码，在一一说明：

<!-- postLi  begin  -->
  <block wx:for="{{listArrLey}}" wx:for-item="item" wx:for-index="index">

  <template is='postItem' data='{{item}}'/>
    <!--  is 代表模板中 起的 name 的名字    data 是将item传值 传到模板中去 -->
  </block>
  <!-- postLi  end   -->

其中要注意的几点，
使用模板的话要带上几个属性，

1、is 代码中也有写道，is后面所跟随的是模板中起的名字，data 是将循环的item传入到模板中去，也许光看这个也许会有些懵逼，接下来我来上下模板中的代码，相比大家看到之后会更加清晰些。

<template name='postItem'>

<view class='postLi'>
      <view class='postLi1'>
        <image wx:if='{{true}}' src='{{item.img.author_img}}'></image>
        <text>{{item.data}}</text>
      </view>
      <view class='postLi2'>
        <image src='{{item.img.post_img}}'></image>
      </view>
      <view class='postLi3'>
        <text>{{index+1}}{{item.content}}</text>
      </view>
      <view class='postLi4'>
        <text>收藏：{{item.view_num}}</text>
        <text>回复：{{item.collect_num}}</text>
      </view>
    </view>

</template>

上述就是模板中的代码，可以对应着所指到的几点去查看。可以很清晰的看出，所说到的 is 与 data 所传item 是指的什么。

从上上个代码中看到，还有一个知识点，那就是for循环，那么接下来就大概说明一下这个。

可以看到 先是给了一个 block 的标签，这个其实就跟咱们 script 标签一样的感觉，就是个标志，那么接下里就逐一的在下面说明一下具体功能，（要注意的是，block是闭合标签，要记得结尾哦。）

wx:for=”{{listArrLey}}” 这个所代表的就是循环 listArrLey 的数据

wx:for-item=”item” 这个就是代表数据中的每一项

wx:for-index=”index” 那么这个就是代表着下标的意思。

 

二、wxss层

有了结构的模板，当然css样式也要随着有模板一起绑定，样式不多说，同样是在模板的目录下新建 一个css文件，主要说一下如何引入这个样式。不多说，上代码

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

将这个写在对应页面css的顶部。如这个页面是post页面，那么就将上述代码放在post.wxss 的顶部即可。

第一次记录学习就先到这里，之后会以此更新，提醒自己加油。不怕晚，就怕不动。

三、js 层

js层面就是简单的说下，引入初步假数据

var postsDate = require('../../data/posts-data.js')

这个引入之后

/**
   * 生命周期函数--监听页面加载    on 开头的都为监听函数
   */
  onLoad: function (options) {
    // 页面初始化   options为页面跳转来的参数


    this.setData({
      // 因为要平铺传到 data中，所以要将 格式变为 key：键值 
      listArrLey: postsDate.postList,  
      banner: postsDate.banner
      })

  },

一般加载数据都是会放在 onLoad 函数中， 有一个方法this.setData({}),用了这个方法，会将数据传入到 该js文件的 data 对象中。