微信小程序-模块化和模版化

一、（模块化）js 将业务中的数据分离到单独的数据文件中，使用require方法价加载js模块儿文件

1、新建一个文件夹->创建.js文件->将数据放进来

2、在底部加上这句代码，如下：

module.exports = {//定义的一个出口，使这个对象输出到别的脚本中去
  postList: local_database//给对象{}赋值 对象名和值
}

然后在其他.js文件里引入这个数据文件 1、在其他.js文件里的顶部定义一个变量，用来接收模块化里的对象如：

var postsData = require('../../data/posts-data.js') //只能是相对路径
// var postsData = require('/data/posts-data.js') //绝对路径
Page({
  /**
   * 页面的初始数据
   */
  data: {
  },
  /**
   * 生命周期函数--监听页面加载  options为页面跳转所带的参数
   */
  onLoad: function (options) {
    //this.data.postList=postsData.postList 122100版本已失效以后用下面的
    this.setData({
      postList: postsData.postList   //将数据赋值给这个对象
    })
  },
})

二、（template模版化）标签页面wxml和样式wxss的模版的复用

1、组件wxml模版的复用

a.在文件所在文件夹下->创建一个文件夹xx-template->创建一个.wxml文件写入复用的组件，并在最外层加入template模块化如：

<template name="postItem">
  <!-- template 模版化的技术 -->
  <view class='post-container'>
    <view class='post-author-date'>
      <image class='post-author' src="{{item.avatar}}"></image>
      <text class='post-date'>{{item.date}} {{index}}</text>
    </view>
  </view>
</template>

b.在其他wxml文件里引入这个模版，在文件顶部加上下面这句代码，如下

 <import src="post-item/post-item-template.wxml"/> 相对路径 （绝对路径也可以）
 <import src="/pages/posts/post-item/post-item-template.wxml"/> //绝地路径

然后在相应代码里加上如下代码：

    <!-- template 模版化的技术  -->
      <template is="postItem" data="{{item}}"/>

2、样式wxss的模版的复用

a.同（组件wxml模版的复用）创建一个.wxss文件写入复用的组件，将需要的样式写进来

b.再其他wxss文件里引入这个模版，在文件顶部加上下面这句代码，如下

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