學習小程式遇到的問題

1.小程式中無法長按圖片掃描識別公眾號二維碼，可以通過自帶的api中wx.previewImage來進行預覽圖片的操作，儲存至本地後可操作。但例外的是，可以識別小程式碼。

2.WebSocket是HTML5開始提供的一種在單個 TCP 連線上進行全雙工通訊的協議。
在WebSocket API中，瀏覽器和伺服器只需要做一個握手的動作，然後，瀏覽器和伺服器之間就形成了一條快速通道。兩者之間就直接可以資料互相傳送。
瀏覽器通過 JavaScript 向伺服器發出建立 WebSocket 連線的請求，連線建立以後，客戶端和伺服器端就可以通過 TCP 連線直接交換資料。
當你獲取 Web Socket 連線後，你可以通過 send() 方法來向伺服器傳送資料，並通過 onmessage 事件來接收伺服器返回的資料。

3.background-image 只能用網路url或者base64 . 本地圖片要用image標籤才行。

4.多行和單行垂直居中寫法。將容器設定為display:table，然後將子元素也就是要垂直居中顯示的元素設定為display:table-cell，然後加上vertical-align:middle來實現。

5.在 Page 中定義 onShareAppMessage 函式，設定該頁面的轉發資訊。
只有定義了此事件處理函式，右上角選單才會顯示 “轉發” 按鈕
使用者點選轉發按鈕的時候會呼叫
此事件需要 return 一個 Object，用於自定義轉發內容

6. 可通過該標籤元件設定滾動區域的屬性。

7.let宣告的變數只在其宣告的塊或子塊中可用，這一點，與var相似。二者之間最主要的區別在於var宣告的變數的作用域是整個封閉函式。

8.Promise.resolve(value)方法返回一個以給定值解析後的Promise物件。但如果這個值是個thenable（即帶有then方法），返回的promise會“跟隨”這個thenable的物件，採用它的最終狀態（指resolved/rejected/pending/settled）；否則以該值為成功狀態返回promise物件。

9.元件button中去掉邊框，背景和border都去掉後，需要對偽類中::after{border: none;}再做處理，才能實現無邊框的效果。

10.userInfoReadyCallback是自定義的一個全域性函式（官方demo中index頁面生命週期函式onLoad中定義）用於防止網路操作延遲導致無法獲取並設定相關資料，這樣做只要request完成併成功回撥success方法，就會執行userInfoReadyCallback自定義的全域性函式

11.陣列遍歷的多種方法，es6和小程式版本里，array.map(function(){}),相比其他的遍歷，for in，for of更方便，能取到鍵，值，不容易報錯。
定義：對陣列中的每個元素進行處理，得到新的陣列；
特點：不改變原陣列；
const array = [1, 3, 6, 9];
const newArray = array.map(function (value) {
return value + 1;
});
console.log(newArray);
console.log(array);
類似方法： for in , for , foreach
const newArray2 = [];
for (var i in array) {
newArray2.push(array[i] + 1);
}

const newArray3 = [];
for (var i = 0; i < array.length; i++) {
newArray3.push(array[i] + 1);
}

const newArray4 = [];
array.forEach(function (key) {
newArray4.push(key * key);
})
Array可以使用下標，Map和Set不能使用下標，ES6引入了iterable型別，Array,Map,Set都屬於iterable型別，它們可以使用for…of迴圈來遍歷：
var a = [‘A’, ‘B’, ‘C’];
var s = new Set([‘A’, ‘B’, ‘C’]);
var m = new Map([[1, ‘x’], [2, ‘y’], [3, ‘z’]]);
for (var x of a) { // 遍歷Array
alert(x);
}
for (var x of s) { // 遍歷Set
alert(x);
}
for (var x of m) { // 遍歷Map
alert(x[0] + ‘=’ + x[1]);

for…of與for…in的區別：for … in迴圈由於歷史遺留問題，它遍歷的實際上是物件的屬性名稱。一個Array陣列實際上也是一個物件，它的每個元素的索引被視為一個屬性。
var a = [‘A’, ‘B’, ‘C’];
a.name = ‘Hello’;
for (var x in a) {
alert(x); // ‘0’, ‘1’, ‘2’, ‘name’
}
更好的方式：iterable內建的forEach方法：
var a = [‘A’, ‘B’, ‘C’];
a.forEach(function (element, index, array) {
// element: 指向當前元素的值
// index: 指向當前索引
// array: 指向Array物件本身
alert(element);//’A’,’B’,’C’
});

12.在遍歷陣列和拼接json陣列上，嘗試有很多不同的方法。

13.用data資料結合標籤的三元展示，控制元素的隱藏顯示和樣式，做切換和選中處理，需要及時的清空避免覆蓋，並關注資料層的操作。

14 出現指令碼錯誤或者未正確呼叫 Page()
解決辦法
//在頁面當中的.js檔案裡面加上

Page({

})
export default class pageIndex extends wepy.page {

}
或

15.globalData = {
userInfo: null,
token:-1
}
例子 取值公共類，this.root.$root.$parent.globalData.token

16
wx.navigateTo會增加頁面棧大小，直到頁面棧大小為5
wx.redirectTo不會增加頁面棧大小
wx.navigateBack會減少頁面棧大小，直到頁面棧大小為1
針對不同頁面的功能，需要重定向或者需要返回操作的，酌情進行互動使用。
//onePage.wpy
onShow() {
//操作地址後判斷
if(this.isBack){
this.initPageData(this.tokenId)
}
}
wx.navigateTo({
url: /pages/main/addrForm?addrId=${id}&token=${tokenId},
success: () => {
that.isBack = true
}
})
//another.wpy
wx.navigateBack({delta:1})
遇到情況，返回出現過的上級頁面時候，為了滿足重新整理操作，又不產生多餘頁面，跳轉時通過上述操作，則點選返回按鈕時，利用wx.navigateBack({delta:1})操作，預設返回的上一頁，可以避免重新載入並且在onShow中完成重新整理操作，不讓頁面堆疊超過5層
ps: 正常情況，onLoad比onShow先載入，但在返回頁面後，頁面是載入完成的，onShow先出現，所以可以在這個週期裡做非同步重新整理操作。

17.現在流行資料單雙向繫結，小程式使用了單向資料流，如果採用傳統的jQuery方式操作資料和檢視，開發效率低，開發者不買賬。如果採用雙向資料流，程式執行效率偏低，而且是邏輯層物件狀態不可控。
總體來說，小程式資料檢視單向繫結開發模式，讓開發者專注於事件處理上，改變物件狀態，實現檢視更新。

18.禁止小程式原生下拉重新整理
json配置裡
“enablePullDownRefresh”: false

1. http請求其他網站資源，用原生的js實現

19.
【微信小程式】圖片可以載入成功，但是控制檯報渲染層網路層錯誤

Thu May 03 2018 21:14:20 GMT+0800 (中國標準時間) 渲染層網路層錯誤
VM27762:2 Failed to load local image resource /goods/.png
the server responded with a status of 404 (HTTP/1.1 404 Not Found)
報錯原因是因為頁面剛剛載入的時候，image的值為空，之所以圖片載入成功了，是因為後臺的值傳過來了
解決報錯的方法，給image設定一個預設值或者使用 wx.if條件渲染元件

1. 可以通過loading操作來避免請求載入時候出現的多次載入和抖動，增強體驗
   一般可以放在app.wpy父級中，或者在http.js寫好的請求介面中，統一放置
   wx.showLoading({
   title: ‘載入中’,
   })

setTimeout(function(){
wx.hideLoading()
},2000)