小程序開發之旅（持續更新中..）

如下內容都是在0.11.112301版本中實踐得出。現已更新至0.17.172600，若有版本調整，按實際狀況而定，僅供出現相似狀況時參考。

1. 快捷鍵

1. 右鍵，選擇格式化，格式化js、wxml、wxss等代碼，也能夠用Alt + SHIFT + F快捷鍵；

2. 知識點

1. 小程序總會在讀取Page下的data對象來作數據綁定，這個動做咱們稱之爲A，而這個A動做的執行，是在onLoad函數以後執行的。可是在122100版本之後，this.data作數據綁定的方法已失效，而且也不建議直接經過this.data來修改數據值.

2. 模板樣式的引用。加入已存在a-template.wxml模板文件，同級目錄下新建了a-template.wxss樣式文件.在具體模塊中須要引用模板時，則須要在具體引用模板的樣式文件中，引入模板文件的樣式@import xxx/a-template.wxss。這裏的import路徑也爲相對路徑。

3. 小程序目前只實現了模板化，即能到標籤和樣式的集合的複用，但這個集合對應的交互邏輯(即js部分)卻不能像引用樣式文件那樣直接應用，從而達到模塊化的目的。

4. 佈局問題
   問題背景：在一個列表頁，底部有一個建立按鈕，若是列表數據不夠多時，它位於視圖底部，若是列表數據超過一屏，則跟隨列表最後面，以下圖的「我也建立一個官網」；
   
   代碼結構大概以下：

   // index.wxml
       <view class="main-container">
           <view class="list-container"></view>
           <view class="btn"></view>
       </view>

   // index.wxss
       .main-container{
         display: flex;
         flex-direction: column;
         min-height: 100vh;
       }
       .list-container{
         flex: 1;
       }
       .btn{...}

   重點在min-height: 100vh,這個知識點，一開始我在看阮一峯老師關於Flex 佈局教程：實例篇的時候有看見，但當時沒有忽略了min-height: 100vh，而是直接用position: fixed去實現的，但效果固然跟目的不一致了。關於vh,vm能夠看下這篇文章視區相關單位vw, vh..簡介以及可實際應用場景

3. 注意點

1. 標籤寫法
   <import src="xxx" /> 注意閉合的 /
<template is="xxx" data="{{xxx}}" /> 注意閉合的/,以及data須要雙花括號

2. 路徑問題
   var postData = require("../../xxx/xxx.js") ,require要求必須爲相對路徑。
   <import src="xxx/xxx.wxml" />,既能夠相對路徑，又能夠絕對路徑。

3. 自定義屬性值名字和獲取
   經過data-item-name="{{obj.name}}"在對應的標籤上設置須要傳遞的屬性值，而後在對應的事件中經過event.currentTarget.dataset.itemName來獲取對應的name值，須要注意的是data-item-name自定義屬性在獲取時，data-會被忽略，而且後面的連字符-會被轉化爲駝峯格式變量itemName。若是連字符直接的某個字符串中有大寫如data-postId,最後會被轉化爲小寫，要經過event.currentTarget.dataset.postid來獲取，這點須要注意。

4. wx.showActionSheet()方法中的success回調函數參數中，res.cancel若用戶沒有點擊取消則爲undefined並不是false，而當用戶點擊取消則爲true。

5. 模板中引用圖片等外部資源路徑
   使用模板是爲了複用，若是是項目根目錄中有獨立的模板文件夾，對應引用根目錄下的相似static文件夾中的image等資源，路徑是至關固定的，能夠用至關路徑。但若是是某個模塊內部的模板，被複用時，可能會由於路徑的緣由，致使引用失敗，這點是須要注意的，建議使用絕對路徑。

6. 在app.json的pages下新增一條不存在的文件路徑，例如pages/test這時候會pages目錄下生成test.js、test.json、test.wxml、test.wxss四個文件，至關於快鍵新建，不過這種作法有點坑爹~~

7. json文件配置backgroundColor
   小程序文檔裏面關於backgroundColor的描述是窗口的背景色，可是讓人誤解的是視口屏幕的背景色。實際效果以下：
   
   若要設置當前窗口的背景色，可用以下方法設置：

   // index.wxss
       page{
           height: 100vh;
           background-color: #3497db;
       }

4. 待討論

1. 長度單位 用px值：margin-top/margin--bottom，letter-spacing, border