微信小程式-模組化和模版化

bby發表於2018-05-18
微信小程式

一、（模組化）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";
複製程式碼

相關文章