微信小程序的知識點

NO IMAGE

1、有哪些參數傳值的方法?

(1)給wxml元素添加data-*屬性來傳遞我們需要的值,然後通過e.currentTarget.dataset或onload的param參數獲取。但data-名稱不能有大寫字母和不可以存放對象;

(2)設置id的方法標識來傳值,通過e.currentTarget.id獲取設置的id的值,然後通過設置全局對象的方式來傳遞數值;

(3)在navigator中添加參數傳值。

2、簡述微信小程序的原理?

    微信的架構,是數據驅動的架構模式,它的UI和數據是分離的,所有的頁面更新,都需要通過對數據的更改來實現。

    小程序分為兩個部分webview和appService。其中webview主要用來展現UI,appService用來處理業務邏輯、數據及接口調用。它們在兩個進程中進行,通過系統層JSBridge實現通信,實現UI的渲染、事件的處理。

3、小程序的雙向綁定和vue那裡不一樣?

   小程序直接this.data的屬性是不可以同步到視圖的,必須調用:

this.setData({              
hide:true         
})

4、有哪些生命週期回調函數?

(1)onLoad(Object query)

頁面加載時觸發。一個頁面只會調用一次,可以在onLoad的參數中獲取打開當前頁面路徑中的參數。

(2)onShow()

頁面顯示/切入前臺時觸發。

(3)onReady()

頁面初次渲染完成時觸發。一個頁面只會調用一次,代表頁面已經準備妥當,可以和視圖層進行交互。

(4)onHide()

頁面隱藏/切入後臺時觸發。如wx.redirectTo或底部tab切換到其他頁面,小程序切入後臺等。

(5)onUnload()

頁面卸載時觸發。如wx.redirectTo或wx.navigateBack到其他頁面時。

5、wx.navigateTo無法打開頁面

一個應用同時只能打開5個頁面,當已經打開了5個頁面之後,wx.navigateTo不能正常打開新頁面。請避免多層級的交互方式,或者使用wx.redirectTo

6、本地資源無法通過wxss獲取

background-image:可以使用網絡圖片,或者base64,或者使用<image/>標籤

7、getApp()

如果需要全局的數據可以在app.js中設置。

App({// app.js
globalData: 1
})
// 某page.js
console.log(getApp().globalData)

8、公共模塊util.js

公共模塊方法需要通過module.exports對外暴露接口。

使用的時候需要require(path)將文件引入。

function sayHello(name) {//公共方法util類
console.log(`Hello ${name} !`)
}
module.exports.sayHello = sayHello//用module.exports 對外暴露接口

//先引入文件,是新建的一個utils包,公共方法在util.js裡面
var util = require('../../utils/util.js')
Page({//調用類
onLoad: function () {//  使用時,用util引用名調用,如:util.sayHello()
util.sayHello('我是傳的值');
}
})

9、事件

(1)bind開頭不阻止冒泡,用catch開頭可以阻止冒泡,如catchTap;

冒泡:點擊子組件會觸發父組件,所有父組件,先子後父的觸發

(2)無特殊情況自帶事件的各個事件對象已經對象屬性列表;

(3)dataset,在wxml中可以自定義data數據,會通過事件傳遞。以data-開頭,多個單詞以-連接,如data-a-b,但是不能有大寫,他回自動轉成駝峰命名,調取的時候取駝峰命名的名字。

10、button去除默認邊框,添加偽類

button::after{  border: none; }

11、設置image為圓角時,加載圖片後會先刪一下再變成圓角?

原因:圖片加載後觸發頁面大面積繪製,頁面來不及反應造成渲染掉幀/卡幀。

解決:使用GUP加速

image{    will-change: transform;}

12、position:fixed

問題:開啟下拉刷新後,ios端fixed元素不會隨頁面下拉刷新而向下移動,從而擋住了加載樣式。

原因:在ios端動態設置fixed元素的position。當頁面滾動scroll<0時,將元素position設為absolute。(已經棄用)

解決:使用position:sticky,該佈局相當於fixed和absolute的結合版;

(低版本安卓可能不支持該屬性值,部分版本因為內核的變換也可能不支持,故要做好兼容處理,可用fixed做兼容)

相關文章

原型鏈

js中的事件委託(事件代理)

js繼承的幾種方式

vue的一些知識點