微信小程序開(kāi)發(fā)者問(wèn)題集錦
|
作者：_Zuozuo，來(lái)自授權(quán)地址
前言：小程序很多東西都是自己封裝好了，開(kāi)發(fā)人員只需要自己進(jìn)行一些配置就可以了。這對(duì)于快速開(kāi)發(fā)來(lái)說(shuō)，是一大好處，但是對(duì)于個(gè)性化來(lái)說(shuō)，卻是一個(gè)弊端。
小程序的配置文件：JSON文件。 1. 除了app.json是必須要的，其他頁(yè)面不強(qiáng)制需要。 2. 其他頁(yè)面如果有該文件，則會(huì)覆蓋app.json中的配置。 3. 其他頁(yè)面的json文件只能配置程序頂欄信息，比如背景色，標(biāo)題等。 4. 注意，該文件不能添加任何形式的注釋?zhuān)杏洝?/p>
配置小程序打開(kāi)時(shí)的首頁(yè)： 1. 進(jìn)入到app.json文件。 2. 在pages字段的list里面，把首頁(yè)的路徑放到第一個(gè)。 3. 小程序啟動(dòng)后會(huì)默認(rèn)打開(kāi)該頁(yè)面。
小程序的底部導(dǎo)航： 1. 小程序的底部導(dǎo)航是微信封裝好的一個(gè)模塊。我們只需要設(shè)置文字圖片和跳轉(zhuǎn)即可。不需要自己實(shí)現(xiàn)。 2. 只需要在app.Json文件中加入tabBar字段并進(jìn)行配置即可，注意，最少2個(gè)最多5個(gè)。 3. 底部導(dǎo)航的順序，按照你設(shè)置的list的順序從左到右排布。 4. 底部導(dǎo)航的圖片，切圖時(shí)的最佳分辨率是83*83px的圖標(biāo)。否則會(huì)出現(xiàn)模糊或者邊緣刺。
小程序的超時(shí)設(shè)置： 1. 分為請(qǐng)求、連接、上傳和下載超時(shí)。不設(shè)置則默認(rèn)為全部60秒。 2. 全部設(shè)置60秒并不合理。建議請(qǐng)求10秒，連接10秒，上傳30秒，下載120秒。 3. 以上設(shè)置理由根據(jù)現(xiàn)有手機(jī)網(wǎng)絡(luò)環(huán)境估算得出。
調(diào)試模式的開(kāi)啟： 1. 小程序開(kāi)發(fā)時(shí)提供調(diào)試模式，在app.json中設(shè)置debug為true即可。 2. 如果不進(jìn)行設(shè)置，默認(rèn)false，在調(diào)試時(shí)候啟動(dòng)小程序需要自動(dòng)退出并手動(dòng)重啟，比較麻煩，建議開(kāi)啟。 3. 手機(jī)端的調(diào)試只支持控制臺(tái)和系統(tǒng)輸出，調(diào)試的時(shí)候如果不想麻煩，可以使用consloe.log打印對(duì)象信息。
小程序初始化： 1. 小程序初始化完成會(huì)觸發(fā)onLaunch事件。 2. onLaunch完成時(shí)，頁(yè)面其實(shí)并沒(méi)有生成和加載，不可使用getCurrentPage（）方法，切記。
頁(yè)面初始化： 1. 頁(yè)面初始化通過(guò)頁(yè)面的js文件來(lái)完成。 2. Js文件中必須有個(gè)page（），他是用來(lái)注冊(cè)頁(yè)面的，沒(méi)有該函數(shù)，頁(yè)面無(wú)法注冊(cè)。 3. 小程序會(huì)先加載js中的page（），然后渲染頁(yè)面。
修改數(shù)據(jù)綁定： 1. 數(shù)據(jù)綁定的動(dòng)態(tài)變更必須要使用setData函數(shù)來(lái)完成。 2. 直接修改data是無(wú)效的。 3. setData有一個(gè)上限，數(shù)據(jù)量不能超過(guò)1024KB，切記。 4. setData可以設(shè)置不被預(yù)定義的數(shù)據(jù)。預(yù)定義指的是data中的變量。
全局設(shè)置： 1. 設(shè)置globalData有助于你進(jìn)行全局調(diào)整。 2. 比如設(shè)置OPEN_ID，SESSION_KEY，basePath等。 3. OPEN_ID，SESSION_KEY在小程序初始化完成的時(shí)候就可以去獲取。以便后面的代碼調(diào)用。 4. basePath是為了發(fā)布時(shí)不需要修改多處接口地址考慮的。 5. 一般把basePath設(shè)置為https://IP地址:端口號(hào)/ 即可。在發(fā)布時(shí)，改為正式服服務(wù)器地址即可，避免修改多次且可能造成的未完全修改風(fēng)險(xiǎn)，本方法參考至JSP技術(shù)的basePath以及JAVA的基類(lèi)思路。 6. 用法上，通過(guò)在其他js文件中添加兩句代碼即可獲得app實(shí)例。如下： 7. var app = getApp(); 8. var basePath = app.globalData.basePath; 9. 這樣就可以得到app實(shí)例的全部數(shù)據(jù)和方法，類(lèi)似于JAVA基類(lèi)用法。 10. 需要注意的是，globalData是一個(gè)變量，可以在其他位置修改。但是最好不要修改。切記。
數(shù)據(jù)綁定： 1. 進(jìn)行數(shù)據(jù)這個(gè)做法，騰訊應(yīng)該是參考了Vue.js這個(gè)前端框架的。 2. 所以他在進(jìn)行數(shù)據(jù)操作或者拼接時(shí)，是支持以前${ }這種寫(xiě)法類(lèi)似的功能的。 3. 需要注意的是，最好不要在{{ value }} 綁定數(shù)據(jù)的前面加上中文的 冒號(hào)（： ），可能會(huì)導(dǎo)致Wxml panner這個(gè)調(diào)試器失效，這個(gè)坑很大。剛開(kāi)始，都以為是因?yàn)椴恢С?{ }這種寫(xiě)法類(lèi)似的功能而找原因未果，后面實(shí)在無(wú)奈，重寫(xiě)時(shí)一個(gè)一個(gè)嘗試，才發(fā)現(xiàn)不是這個(gè)原因，小程序本身就是參考至JavaScript的，一般情況下不會(huì)拋棄前者的強(qiáng)大功能?，F(xiàn)在似乎是沒(méi)有這個(gè)問(wèn)題了。
條件渲染： 1. 小程序控制組件的隱藏與顯示，并沒(méi)有完全參考解耦的設(shè)計(jì)思路，而是直接作為組件的屬性字段寫(xiě)在組件中。他只接受true和false，并且他不是惰性屬性，他始終被渲染。一般使用在view中作為條件渲染來(lái)使用。不要用CSS的概念來(lái)理解，否則你會(huì)找不到他的。 2. For循環(huán)列表渲染有兩個(gè)隱藏的屬性，小程序隱式的指定默認(rèn)值的變量名是item，下標(biāo)是index。這個(gè)是需要知道的。
樣式編輯： 1. 微信的Wxss是一套新的樣式語(yǔ)言，引入了CSS大部分特性，但是對(duì)其做了擴(kuò)充和修改。 2. 小程序?qū)ζ聊坏膶挾仍O(shè)置，任何手機(jī)屏幕寬度都是750rpx，該特性可以保證手機(jī)兼容性。 3. 但是需要注意的是，rpx在小分辨率手機(jī)上會(huì)有點(diǎn)毛病。
發(fā)起網(wǎng)絡(luò)請(qǐng)求：|--wx.request(OBJECT)--| 1. 小程序發(fā)起的是HTTPS請(qǐng)求。 2. 在調(diào)試的時(shí)候開(kāi)發(fā)者可以關(guān)閉請(qǐng)求檢查，可以不用搭建HTTPS服務(wù)器。 3. 該設(shè)置在開(kāi)發(fā)工具的左側(cè)菜單項(xiàng)目的最底部，勾選不檢查域名即可。 4. 參數(shù)發(fā)到服務(wù)器會(huì)強(qiáng)制轉(zhuǎn)為String，因?yàn)閷?xiě)數(shù)字的時(shí)候要么用字符串寫(xiě)，否則請(qǐng)不要使用格式化代碼命令，這會(huì)導(dǎo)致請(qǐng)求失敗。 5. URL中不能有端口。 6. 并發(fā)訪問(wèn)最大并發(fā)數(shù)量是5。
文件上傳下載：|--wx.uploadFile(OBJECT) wx.downloadFile(OBJECT)--| 1. 接收文件的接口請(qǐng)求類(lèi)型必須是POST，因?yàn)樯蟼魑募椒ㄖ付镻OST請(qǐng)求。 2. 并發(fā)限制最大為10。（下載同）
打開(kāi)相冊(cè)選擇本機(jī)圖片：|--wx.chooseImage(OBJECT)--| 1. 調(diào)用該函數(shù)成功后，在回調(diào)函數(shù)中，得到的緩存文件路徑可以使用，剛開(kāi)始看到的wxfile：****** 這種形式以為需要解析才可以使用，實(shí)際上是不需要的，可以直接使用。
預(yù)覽圖片：|--wx.previewImage(OBJECT)--| 1. 預(yù)覽圖片只需要制定想要預(yù)覽的圖片的路徑數(shù)組即可。 選擇地圖位置：|--wx.chooseLocation(OBJECT)--| 1. 在使用上，寫(xiě)一個(gè)成功的回調(diào)函數(shù)，獲取返回的數(shù)據(jù)即可。
獲取設(shè)備信息：|--wx.getSystemInfo(OBJECT)--| 1. 編寫(xiě)成功的回調(diào)函數(shù)，獲取相關(guān)數(shù)據(jù)即可。 2. 能夠獲取到的信息如下： 3. 手機(jī)型號(hào) 4. 設(shè)備像素比例 5. 窗口寬度（可見(jiàn)區(qū)域的寬度） 6. 窗口高度（可見(jiàn)區(qū)域的高度） 7. 微信設(shè)置的語(yǔ)言 8. 微信的版本號(hào) 9. 手機(jī)的操作系統(tǒng)版本 10. 客戶(hù)端平臺(tái)（安卓/蘋(píng)果等）
用戶(hù)交互： 說(shuō)明幾點(diǎn)。既然是與用戶(hù)交互，那么在設(shè)計(jì)上越人性化越好。所以，在調(diào)用各種函數(shù)的時(shí)候，最好在失敗的回調(diào)函數(shù)里面加上提示。某些特殊操作比如上傳圖片等也可以在成功回調(diào)里面加入提示|--wx.showToast(OBJECT)--|。程序除了問(wèn)題應(yīng)該告訴用戶(hù)，程序出問(wèn)題了，給出友好提示。你可以選擇重新嘗試該操作，或者選擇其他操作。再者，上傳圖片成功的提示是告訴用戶(hù)，我這個(gè)操作已經(jīng)完成了，你可以繼續(xù)操作或者點(diǎn)擊完成。以免發(fā)生錯(cuò)誤。但是需要說(shuō)明的是，這個(gè)函數(shù)只能設(shè)置2種圖標(biāo)。并不好用。 |--wx.showModal(OBJECT)--|敏感操作時(shí)，可以寫(xiě)模態(tài)彈窗來(lái)與用戶(hù)交互，讓用戶(hù)再次確認(rèn)是否執(zhí)行該操作。以免造成一些無(wú)法返回或者取消的誤操作。 |--wx.showActionSheet(OBJECT)--|在結(jié)果可預(yù)知的情況下，可以使用顯示操作菜單這個(gè)選項(xiàng)，把他妙用一下，變成一個(gè)快速填充器。減少用戶(hù)輸入，并能夠保證填充數(shù)據(jù)規(guī)范化，格式化。有利于數(shù)據(jù)保存。
導(dǎo)航： 跳轉(zhuǎn)到某個(gè)頁(yè)面：|--wx.navigateTo(OBJECT)--| 1. 這個(gè)小程序規(guī)定頁(yè)面深度最多只能是5層。
Canvas繪圖： 1. Draw函數(shù)是有參數(shù)的，只是默認(rèn)參數(shù)為false。如果不給的參數(shù)，會(huì)覆蓋掉上一次的繪畫(huà)。 2. 使用fill（）函數(shù)填充是，如果被填充的點(diǎn)陣沒(méi)有閉合，該函數(shù)會(huì)先調(diào)用lineTo函數(shù)閉合該點(diǎn)陣，讓他成為一個(gè)封閉區(qū)間，然后進(jìn)行填充。 3. DrawImage（）函數(shù)，在訪問(wèn)圖片資源時(shí)，以流的形式訪問(wèn)，且當(dāng)沒(méi)有使用Draw（false）函數(shù)重繪畫(huà)板的時(shí)候，該流不會(huì)關(guān)閉，因此，無(wú)法在一個(gè)畫(huà)板內(nèi)請(qǐng)求多個(gè)相同的圖片。流沒(méi)有被正確關(guān)閉時(shí)，其他資源無(wú)法對(duì)其進(jìn)行訪問(wèn)。
開(kāi)放接口： 1. 登錄接口：調(diào)用該接口后寫(xiě)一個(gè)成功的回調(diào)函數(shù)來(lái)獲取一個(gè)用戶(hù)CODE。然后通過(guò)CODE去請(qǐng)求用戶(hù)的OPEN_ID和SESSION_KEY。在回調(diào)函數(shù)里面寫(xiě)請(qǐng)求的時(shí)候，必須以完整地址方式拼接請(qǐng)求。然后在成功的回調(diào)函數(shù)里面操作和保存OPEN_ID和SESSION_KEY。 2. 支付接口：支付接口的字段由后臺(tái)返回，后臺(tái)按照微信的統(tǒng)一下單接口以及微信公眾號(hào)支付接口的方式進(jìn)行代碼編寫(xiě)。
小程序單頁(yè)面分享二維碼： 該二維碼能夠帶參數(shù)，非常便利。但是每個(gè)小程序的終生二維碼生成數(shù)量限制為10萬(wàn)個(gè)。 |
