學習小程式遇到的問題

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.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)