小程式包含一個描述整體程式的 app 和多個描述各自頁面的 page。

一.微信小程式的檔案結構：

一個小程式主體部分由三個檔案組成，必須放在專案的根目錄，分別是app.js,app.json,app.wxss;

一個小程式頁面由四個檔案組成，分別是：js檔案，wxml檔案，json檔案，wxss檔案；各自的作用依次是頁面邏輯、

頁面結構、頁面配置、頁面樣式表；

二.微信小程式模板的使用：

WXML提供模板（template），可以在模板中定義程式碼片段，然後在不同的地方呼叫。

那麼問題來了，如何使用模板呢？

1.定義模板：使用 name 屬性，作為模板的名字。然後在<template/>

<!--
  index: int
  msg: string
  time: string
-->
<template name="msgItem">
  <view>
    <text> {{index}}: {{msg}} </text>
    <text> Time: {{time}} </text>
  </view>
</template>

2.使用模板：使用 is 屬性，宣告需要的使用的模板，然後將模板所需要的 data 傳入，如：

<template is="msgItem" data="{{...item}}"/>
 

下面是js中程式碼：

Page({
  data: {
    item: {
      index: 0,
      msg: 'this is a template',
      time: '2016-09-15'
    }
  }
})

注意：上面是教你如何定義和使用程式碼，但是在使用模板之前我們需要進行引用。

3.引用模板：WXML 提供兩種檔案引用方式import和include。

首先來說說import:

import可以在該檔案中使用目標檔案定義的template，如：

在 item.wxml 中定義了一個叫item的template：

<!-- item.wxml -->
<template name="item">
  <text>{{text}}</text>
</template>



 

在 index.wxml 中引用了 item.wxml，就可以使用item模板：

<import src="item.wxml"/>
<template is="item" data="{{text: 'forbar'}}"/>

include:

include 可以將目標檔案除了 <template/> <wxs/> 外的整個程式碼引入，相當於是拷貝到 include 位置，如：

<!-- index.wxml -->
<include src="header.wxml"/>
<view> body </view>
<include src="footer.wxml"/>


<!-- header.wxml -->
<view> header </view>


<!-- footer.wxml -->
<view> footer </view>

WXSS使用template模板的方式：

可以直接通過@import進行引用；如：

@import "檔案路徑";

三.彈性盒子模型：

可以在<view>元件中定義一個class屬性，然後定義它的wxss程式碼中把display定義為"display:flex;"就行了；如：

.post-cntainer{
/**彈性盒子模型**/
display: flex;
flex-direction: column;
margin-top: 20rpx;
margin-bottom: 40rpx;
background-color: #fff;
/**上下邊距**/
border-bottom: 1px solid #ededed;
border-top: 1px solid #ededed;
}