作者：_Zuozuo，來自授權地址

前言：小程序很多東西都是自己封裝好了，開發(fā)人員只需要自己進行一些配置就可以了。這對于快速開發(fā)來說，是一大好處，但是對于個性化來說，卻是一個弊端。

 

小程序的配置文件：JSON文件。

1.     除了app.json是必須要的，其他頁面不強制需要。

2.     其他頁面如果有該文件，則會覆蓋app.json中的配置。

3.     其他頁面的json文件只能配置程序頂欄信息，比如背景色，標題等。

4.     注意，該文件不能添加任何形式的注釋，切記。

 

配置小程序打開時的首頁：

1.     進入到app.json文件。

2.     在pages字段的list里面，把首頁的路徑放到第一個。

3.     小程序啟動后會默認打開該頁面。

 

小程序的底部導航：

1.     小程序的底部導航是微信封裝好的一個模塊。我們只需要設置文字圖片和跳轉即可。不需要自己實現(xiàn)。

2.     只需要在app.Json文件中加入tabBar字段并進行配置即可，注意，最少2個最多5個。

3.     底部導航的順序，按照你設置的list的順序從左到右排布。

4.     底部導航的圖片，切圖時的最佳分辨率是83*83px的圖標。否則會出現(xiàn)模糊或者邊緣刺。

 

小程序的超時設置：

1.     分為請求、連接、上傳和下載超時。不設置則默認為全部60秒。

2.     全部設置60秒并不合理。建議請求10秒，連接10秒，上傳30秒，下載120秒。

3.     以上設置理由根據(jù)現(xiàn)有手機網(wǎng)絡環(huán)境估算得出。

 

調試模式的開啟：

1.     小程序開發(fā)時提供調試模式，在app.json中設置debug為true即可。

2.     如果不進行設置，默認false，在調試時候啟動小程序需要自動退出并手動重啟，比較麻煩，建議開啟。

3.     手機端的調試只支持控制臺和系統(tǒng)輸出，調試的時候如果不想麻煩，可以使用consloe.log打印對象信息。

 

小程序初始化：

1.     小程序初始化完成會觸發(fā)onLaunch事件。

2.     onLaunch完成時，頁面其實并沒有生成和加載，不可使用getCurrentPage（）方法，切記。

 

頁面初始化：

1.     頁面初始化通過頁面的js文件來完成。

2.     Js文件中必須有個page（），他是用來注冊頁面的，沒有該函數(shù)，頁面無法注冊。

3.     小程序會先加載js中的page（），然后渲染頁面。

 

修改數(shù)據(jù)綁定：

1.     數(shù)據(jù)綁定的動態(tài)變更必須要使用setData函數(shù)來完成。

2.     直接修改data是無效的。

3.     setData有一個上限，數(shù)據(jù)量不能超過1024KB，切記。

4.     setData可以設置不被預定義的數(shù)據(jù)。預定義指的是data中的變量。

 

全局設置：

1.     設置globalData有助于你進行全局調整。

2.     比如設置OPEN_ID，SESSION_KEY，basePath等。

3.     OPEN_ID，SESSION_KEY在小程序初始化完成的時候就可以去獲取。以便后面的代碼調用。

4.     basePath是為了發(fā)布時不需要修改多處接口地址考慮的。

5.     一般把basePath設置為https://IP地址:端口號/ 即可。在發(fā)布時，改為正式服服務器地址即可，避免修改多次且可能造成的未完全修改風險，本方法參考至JSP技術的basePath以及JAVA的基類思路。

6.     用法上，通過在其他js文件中添加兩句代碼即可獲得app實例。如下：

7.     var app = getApp();

8.     var basePath = app.globalData.basePath;

9.     這樣就可以得到app實例的全部數(shù)據(jù)和方法，類似于JAVA基類用法。

10.  需要注意的是，globalData是一個變量，可以在其他位置修改。但是最好不要修改。切記。

 

數(shù)據(jù)綁定：

1.     進行數(shù)據(jù)這個做法，騰訊應該是參考了Vue.js這個前端框架的。

2.     所以他在進行數(shù)據(jù)操作或者拼接時，是支持以前${ }這種寫法類似的功能的。

3.     需要注意的是，最好不要在{{ value }} 綁定數(shù)據(jù)的前面加上中文的 冒號（： ），可能會導致Wxml panner這個調試器失效，這個坑很大。剛開始，都以為是因為不支持${ }這種寫法類似的功能而找原因未果，后面實在無奈，重寫時一個一個嘗試，才發(fā)現(xiàn)不是這個原因，小程序本身就是參考至JavaScript的，一般情況下不會拋棄前者的強大功能?，F(xiàn)在似乎是沒有這個問題了。

 

條件渲染：

1.     小程序控制組件的隱藏與顯示，并沒有完全參考解耦的設計思路，而是直接作為組件的屬性字段寫在組件中。他只接受true和false，并且他不是惰性屬性，他始終被渲染。一般使用在view中作為條件渲染來使用。不要用CSS的概念來理解，否則你會找不到他的。

2.     For循環(huán)列表渲染有兩個隱藏的屬性，小程序隱式的指定默認值的變量名是item，下標是index。這個是需要知道的。

 

樣式編輯：

1.     微信的Wxss是一套新的樣式語言，引入了CSS大部分特性，但是對其做了擴充和修改。

2.     小程序對屏幕的寬度設置，任何手機屏幕寬度都是750rpx，該特性可以保證手機兼容性。

3.     但是需要注意的是，rpx在小分辨率手機上會有點毛病。

 

發(fā)起網(wǎng)絡請求：|--wx.request(OBJECT)--|

1.     小程序發(fā)起的是HTTPS請求。

2.     在調試的時候開發(fā)者可以關閉請求檢查，可以不用搭建HTTPS服務器。

3.     該設置在開發(fā)工具的左側菜單項目的最底部，勾選不檢查域名即可。

4.     參數(shù)發(fā)到服務器會強制轉為String，因為寫數(shù)字的時候要么用字符串寫，否則請不要使用格式化代碼命令，這會導致請求失敗。

5.     URL中不能有端口。

6.     并發(fā)訪問最大并發(fā)數(shù)量是5。

 

文件上傳下載：|--wx.uploadFile(OBJECT)  wx.downloadFile(OBJECT)--|

1.     接收文件的接口請求類型必須是POST，因為上傳文件方法指定為POST請求。

2.     并發(fā)限制最大為10。（下載同）

 

打開相冊選擇本機圖片：|--wx.chooseImage(OBJECT)--|

1.     調用該函數(shù)成功后，在回調函數(shù)中，得到的緩存文件路徑可以使用，剛開始看到的wxfile：****** 這種形式以為需要解析才可以使用，實際上是不需要的，可以直接使用。

 

預覽圖片：|--wx.previewImage(OBJECT)--|

1.     預覽圖片只需要制定想要預覽的圖片的路徑數(shù)組即可。

選擇地圖位置：|--wx.chooseLocation(OBJECT)--|

1.     在使用上，寫一個成功的回調函數(shù)，獲取返回的數(shù)據(jù)即可。

 

獲取設備信息：|--wx.getSystemInfo(OBJECT)--|

1.     編寫成功的回調函數(shù)，獲取相關數(shù)據(jù)即可。

2.     能夠獲取到的信息如下：

3.     手機型號

4.     設備像素比例

5.     窗口寬度（可見區(qū)域的寬度）

6.     窗口高度（可見區(qū)域的高度）

7.     微信設置的語言

8.     微信的版本號

9.     手機的操作系統(tǒng)版本

10.  客戶端平臺（安卓/蘋果等）

 

用戶交互：

       說明幾點。既然是與用戶交互，那么在設計上越人性化越好。所以，在調用各種函數(shù)的時候，最好在失敗的回調函數(shù)里面加上提示。某些特殊操作比如上傳圖片等也可以在成功回調里面加入提示|--wx.showToast(OBJECT)--|。程序除了問題應該告訴用戶，程序出問題了，給出友好提示。你可以選擇重新嘗試該操作，或者選擇其他操作。再者，上傳圖片成功的提示是告訴用戶，我這個操作已經(jīng)完成了，你可以繼續(xù)操作或者點擊完成。以免發(fā)生錯誤。但是需要說明的是，這個函數(shù)只能設置2種圖標。并不好用。

       |--wx.showModal(OBJECT)--|敏感操作時，可以寫模態(tài)彈窗來與用戶交互，讓用戶再次確認是否執(zhí)行該操作。以免造成一些無法返回或者取消的誤操作。

       |--wx.showActionSheet(OBJECT)--|在結果可預知的情況下，可以使用顯示操作菜單這個選項，把他妙用一下，變成一個快速填充器。減少用戶輸入，并能夠保證填充數(shù)據(jù)規(guī)范化，格式化。有利于數(shù)據(jù)保存。

 

導航：

       跳轉到某個頁面：|--wx.navigateTo(OBJECT)--|

1.     這個小程序規(guī)定頁面深度最多只能是5層。

 

Canvas繪圖：

1.     Draw函數(shù)是有參數(shù)的，只是默認參數(shù)為false。如果不給的參數(shù)，會覆蓋掉上一次的繪畫。

2.     使用fill（）函數(shù)填充是，如果被填充的點陣沒有閉合，該函數(shù)會先調用lineTo函數(shù)閉合該點陣，讓他成為一個封閉區(qū)間，然后進行填充。

3.     DrawImage（）函數(shù)，在訪問圖片資源時，以流的形式訪問，且當沒有使用Draw（false）函數(shù)重繪畫板的時候，該流不會關閉，因此，無法在一個畫板內(nèi)請求多個相同的圖片。流沒有被正確關閉時，其他資源無法對其進行訪問。

 

開放接口：

1.     登錄接口：調用該接口后寫一個成功的回調函數(shù)來獲取一個用戶CODE。然后通過CODE去請求用戶的OPEN_ID和SESSION_KEY。在回調函數(shù)里面寫請求的時候，必須以完整地址方式拼接請求。然后在成功的回調函數(shù)里面操作和保存OPEN_ID和SESSION_KEY。

2.     支付接口：支付接口的字段由后臺返回，后臺按照微信的統(tǒng)一下單接口以及微信公眾號支付接口的方式進行代碼編寫。

 

小程序單頁面分享二維碼：

       該二維碼能夠帶參數(shù)，非常便利。但是每個小程序的終生二維碼生成數(shù)量限制為10萬個。