初步接觸小程序

首先學習使用小程序的開發者工具，並比較與chrome-dev-tools的異同。

1. 查看元素：需要首先選擇Wxml;
2. 小程序的編輯功能，可以直接修改本地文件，但需要首先ctrl+s保存。
3. 修改並保存后，頁面會自動刷新。

然后是小程序自身的一些限制or規定。

1. 打包文件大小小於1M。
2. 頁面頭部底部的表現樣式受限。均在page.json中設置而不是樣式文件。
3. 小程序目前不支持直接引入 node_modules, 開發者需要使用到node_modules 時候建議拷貝出相關的代碼到小程序的目錄中。
4. 不能使用window與document對象：因為小程序的運行環境不是瀏覽器！
5. 無法使用嵌套方式書寫樣式。
6. 支持的選擇器是有限的！詳情參考Wxss選擇器部分。
7. 各個頁面的JS腳本文件的變量與函數獨立，因此要設置全局的數據需要使用：

//App()方法，App是全局實例，可以通過getApp()獲得。

//全局數據一般在app.js中定義。

//app.js
App({
    globalData: 1
});

//login.js
var app = getApp();

app.globalData ++;

小程序對模塊化Js的支持，使用CommonJS規范。

1. 通過module.exports或者exports來暴露模塊的接口。
2. 其他模塊使用該模塊的接口的方法：在js文件中，page方法之前通過require(path)方法引入。

var common = require('common.js');
Page({
    helloMINASAN: function() {
        common.sayHello('MINASAN');
    },
    goodByeMINASAN: function() {
        common.sayGoobye('MINASAN');
    }
});

詳情參考模塊化。

小程序對模板的支持，使用mustache語法。

關鍵詞：mustache、name、is、data、include、import
一一說明：

1. 使用模板內部使用Mustache語法。
2. name作為模板名，在template標簽中作為屬性定義，為模板的標識/名稱。
3. is屬性是在使用模板時，它的值表示選擇使用的模板。
4. data（object）模板暴露的接口，用以接收數據。
5. include與import都是用以引用外部Wxml文件的標簽。
   它們的區別是：
   • include引用Wxml文件除template標簽以外的所有標簽。（待驗證）
   • import僅引用template標簽。（待驗證）

詳情參考模板。

小程序對css的支持，使用Wxss（即對css擴充、修改了一些規則）。

擴充：尺寸單位、樣式導入。
修改：

1. 不能使用嵌套寫法書寫Wxss樣式。
2. 部分選擇器不支持。詳情見Wxss樣式部分。
3. 全局樣式在app.wxss中定義，局部樣式由page.wxss定義，且局部樣式權重高於全局。

現在主要來說一下小程序擴充的尺寸單位、樣式導入部分。

尺寸單位

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

使用rpx單位有個好處是：開發在按照iphone6尺寸制作的設計圖上量出來的尺寸就是屬性需要的rpx值，不需要經過換算。其他屏寬下的換算比例是：rpxToPx = 屏幕寬度/750 px;

然而rem單位如何在Wxss中使用呢，測試結果如下：

1. 屏寬375px下（如iphone6）：1rem = 18.75px;
2. 屏寬320px下（如iphone5）：1rem = 16px;

得到的換算公式是：remToPx = 屏幕寬度 / 320 * 16 px;。

在安卓下適用。
例：

1. 測試用屏寬：411px;
2. 設置標簽元素高度:`height = 1rem;`
3. 得到標簽元素高度:`height = 20.5469px;`
4. 通過公式計算得到的結果：`height = 411/320 * 16 = 20.55px`;

結論：當rem、px、rpx相遇我們可以用這兩個公式，

1. rpxToPx = 屏幕寬度/750 px;
2. remToPx = 屏幕寬度 / 320 * 16 px;

且重要的一點是：與在瀏覽器環境下不同，它的值是固定的，不會依據根節點（page標簽）的fontSize大小變化。（也就是說更改Wxml的page標簽的fontSize對rem不起作用）

樣式導入

用法與less的import功能類似。

小程序的便利之處：

1. 可以方便地調用微信的一些原生功能。詳情見API文檔。
2. 數據綁定、列表渲染、條件渲染、模板、事件、引用等等。直觀感受與Vue等框架類似，好上手。
3. 頁面相關的動作事件已經做好的包裝，直接調用相關函數就能夠使用。例如：頁面下拉、上拉觸底等事件。通過page()方法定義。這與小程序頁面的生命周期相關。

需要思考的點：

1. JS有接口，Wxml有模板，而樣式如何在不同的頁面之間復用？

   答：樣式使用@import方式導入其他樣式文件。

2. 組件的使用？

   答：組件存放在compenents文件夾下，每個組件有自己的.wxml與.wxss。在需要引用組件的頁面文件夾下，page.xml通過<import src="..."/>或者<include src = "..." />等方法引入組件的模板.xml文件，page.wxss通過import "...";方法引入組件的樣式.wxss文件。

3. ...持續補充

time：2017/01/11

editor：zgatry

---

小程序隨筆：

1. 使用擴展運算符...來將一個對象展開。
2. <block/>並不是一個組件，它僅僅是一個包裝元素，不會在頁面中做任何渲染，只接受控制屬性。
3. text標簽設置hidden屬性時，開發者工具( v0.12.130400)中不會顯示display:none的樣式，而view標簽可以;

time: 2017/01/17

editor: zgatry

---