視圖層分析

1、[page-name].wxml頁(yè)面結(jié)構(gòu)

WXML（WeiXin Markup Language）是MINA框架設(shè)計(jì)的一套標(biāo)簽語(yǔ)言，基于XML。結(jié)合一些基礎(chǔ)組件、事件系統(tǒng)、模板數(shù)據(jù)綁定，可以構(gòu)建出頁(yè)面的結(jié)構(gòu)。

簡(jiǎn)單來(lái)說(shuō)：wxml ≈ xml + 事件系統(tǒng) + 模板引擎

例如：

// js
Page({  data: {    todos: [
        { text: 'JavaScript', completed: false },
        { text: 'JavaScript+', completed: false },
        { text: 'JavaScript++', completed: false }
    ]
},
completed (e) { ... }
})
<!-- wxml -->
<view>
  <view wx:for="{{ todos }}">
    <block wx:if="{{ !item.completed }}">
      <text>{{ item.text }}</text>
      <button bindtap="completed" data-item-index="{{ index }}"> √ </button>
    </block>
  </view>
</view>

2、[page-name].wxss頁(yè)面樣式

WXSS（WeiXin Style Sheets）是MINA框架設(shè)計(jì)的一套標(biāo)簽語(yǔ)言，基于XML。

WXSS用來(lái)決定了在WXML中定義的組件應(yīng)該怎么顯示。

為了適應(yīng)廣大的前端開(kāi)發(fā)者，我們的WXSS具有CSS大部分特性。 同時(shí)為了更適合開(kāi)發(fā)微信小程序，我們對(duì)CSS進(jìn)行了擴(kuò)充以及修改。

與CSS相比我們擴(kuò)展的特性有：

尺寸單位
樣式導(dǎo)入（CSS也有）
尺寸單位

rpx（responsive pixel）: 可以根據(jù)屏幕寬度進(jìn)行自適應(yīng)。規(guī)定屏幕寬為750rpx。如在 iPhone6 上，屏幕寬度為375px，共有750個(gè)物理像素，則750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

rem（root em）: 規(guī)定屏幕寬度為20rem；1rem = (750/20)rpx 。