一個page由一個文件夾以及文件夾下四個文件組成。

比如一個頁面叫index.則需要在pages目錄下新建一個index目錄，且包含由index+類型（js\wxml\wxss\json）為名組成的若幹文件。文件名格式為硬性要求。

1.JS部分

1.1概述

Page({
  data: {
    logs: []
  },
  onLoad: function () {
    this.setData({
      logs: (wx.getStorageSync(‘logs‘) || []).map(log => {
        return util.formatTime(new
 
 Date(log))
      })
    })
  }
})

Page中需要傳入一個config對象。

這個對象中包含一個data屬性，data屬性中的數據可以在展示層wxml中展示。（其他屬性中的元素不可在wxml中展示）。類似於vue中的data。但是有不一樣的地方。

其中vue通過為屬性設置getter,setter，設置data後自動同步到視圖層。小程序需要顯示的調用this.setData({key:value})來更新視圖。

除了data屬性，類似App，還包含一系列生命周期函數，以及頁面需要的事件處理函數。

如下demo：

//index.js
Page({
  data: {
    text: 
 
"This is page data."
  },
  onLoad: function(options) {
    // Do some initialize when page load.
  },
  onReady: function() {
    // Do something when page ready.
  },
  onShow: function() {
    // Do something when page show.
  },
  onHide: function() {
    // Do something when page hide.
  },
  onUnload: 
 
function() {
    // Do something when page close.
  },
  onPullDownRefresh: function() {
    // Do something when pull down.
  },
  onReachBottom: function() {
    // Do something when page reach bottom.
  },
  onShareAppMessage: function () {
   // return custom share data when user share.
  },
  onPageScroll: function() {
    // Do something when page scroll
  },
  onTabItemTap(item) {
    console.log(item.index)
    console.log(item.pagePath)
    console.log(item.text)
  },
  // Event handler.
  viewTap: function() {
    this.setData({
      text: ‘Set some data for updating view.‘
    }, function() {
      // this is setData callback
    })
  },
  customData: {
    hi: ‘MINA‘
  }
})

同時貼上官方的小程序邏輯層(js部分)與視圖層(view層)的交互流程

1.2.路由

頁面以stack的形式維護

getCurrentPages()函數可以獲取到當前小程序的頁面棧。

常用的切換路由的函數有：

navigateTo、redirectTo、switchTab、reLaunch。詳情可參考文檔：

1.3模塊化

//文件A：
module.exports.sayHello = sayHello
exports.sayGoodbye = sayGoodbye；


//文件B:
var common = require(‘common.js‘)

//require暫不支持絕對路徑

詳情參考：https://mp.weixin.qq.com/debug/wxadoc/dev/framework/app-service/module.html

2.WXML（視圖層）：

https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/data.html

3.JSON配置

4.WXSS

1.小程序的樣式使用rpx作為單位。以自動適配不同的機型。

• rpx（responsive pixel）: 可以根據屏幕寬度進行自適應。規定屏幕寬為750rpx。如在 iPhone6 上，屏幕寬度為375px，共有750個物理像素，則750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

建議以iphone6作為設計稿，程序員可以直接按設計稿中的尺寸。以rpx作為單位布局。

2.推薦使用flex布局。

3.小程序不支持web常用的html標簽。僅支持view以及嵌套一些組件。

5.一些常用組件

類似於web開發。小程序中有一套自己的組件。

常用的組件有：

　　view組件（類似div)。

　　text組件 （類似span)。

　　以及一些表單組件。input、textarea、button、radio、checkbox等。

詳見文檔：https://mp.weixin.qq.com/debug/wxadoc/dev/component/view.html

03——微信小程序官方demo講解——page部分