一.細節

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

2.小程式框架分為檢視層和邏輯層

邏輯層是由JavaScript編寫。

檢視層由 WXML 與 WXSS 編寫，由元件來進行展示。元件(Component)是檢視的基本組成單元。

將邏輯層的資料反應成檢視，同時將檢視層的事件傳送給邏輯層。

二.小知識點

1.App() 函式用來註冊一個小程式。接受一個 object 引數，其指定小程式的生命週期函式等。

都是在app.js檔案中

2.Page() 函式用來註冊一個頁面。接受一個 object 引數，其指定頁面的初始資料、生命週期函式、事件處理函式等。

(1).

data 將會以 JSON 的形式由邏輯層傳至渲染層，所以其資料必須是可以轉成 JSON 的格式：字串，數字，布林值，物件，陣列。

<img src="https://img-blog.csdn.net/20170426170416617 alt="" />

 (2).生命週期函式

 (3).事件處理函式：bindtap

<view bindtap="viewTap"> click me </view>   

3.實現動態顯示和隱藏某個控制元件

<view class="{{open?'display_show':'display_none'}}">列表1</view>

data:{  
    open:false  
  },  
  showitem:function(){  
      this.setData({  
          open:!this.data.open  
      })  
  }

.display_show{  
    display: block;  
}  
.display_none{  
    display: none;  
}  

<view class="phone_personal">{{firstPerson}}</view>

<view class="select_one" bindtap="mySelect" data-me="吃">吃</view>

this.setData({  
             firstPerson:e.target.dataset.me,  
       })

這時：firstPerson=吃

5.彈性盒字：display:flex;

<view class="phone_one" bindtap="clickPerson">  
    <view class="phone_personal">{{firstPerson}}</view>  
    <image src="../../image/i.png" class="personal_image {{selectArea ? 'rotateRight' :''}}"></image>  
</view> 

 justify-content:space-between;

這樣子集就會並列。justify-content:space-between;這樣子集就會分別在在倆頭

6.獲取自身的樣式e.detail.width,e.detail.height

<image class="image-style" src="../uploads/2.jpg" style="width:{{imgwidth}}px;height:{{imgheight}}px;"bindload="imageLoad" ></image>

var app = getApp()
Page({
	data: {
		imgwidth:0,  
        imgheight:0,
        
	},
	imageLoad: function(e) {  
        var _this=this;  
        var $width=e.detail.width,    //獲取圖片真實寬度  
            $height=e.detail.height,  
            ratio=$width/$height;   //圖片的真實寬高比例  
        var viewWidth=this.data.screenWidth,           //設定圖片顯示寬度，  
            viewHeight=parseInt(viewWidth/ratio);    //計算的高度值
        _this.setData({  
            imgwidth:viewWidth,  
            imgheight:viewHeight  
        })
    }

7.如何定義全域性資料

在app.js的App({})中定義的資料或函式都是全域性的，在頁面中可以通過var app = getApp();  app.function/key的方式呼叫（不過我們沒有必要再app.js中定義全域性函式）

（1）設定全域性變數

App({

     globalData:{    
          userInfo:null,    
          test:"test"    
      }   

})

獲取變數值

var test = getApp().globalData.test;    
console.log(test)   

三.注意點小程式誤區

1.小程式不是Html5。小程式是微信全新定義的規範，是基於xml+js的，不支援也不相容HTML，相容受限的部分css寫法。

小程式和騰訊X5引擎也沒關係。X5是QQ瀏覽器團隊的，是基於HTML的，但小程式是微信團隊自研的

2.小程式不是b/s。微信宣傳的一個重點，是觸手可得，不用安裝。但小程式並不是b/s的線上頁面，它是c/s架構的。

3.小程式體驗好並且小程式並非只適合低頻或長尾應用

4.小程式不是應用商店，是OS（作業系統）