5. 使用 slot

• 使用單個slot

// 頁面 <Test><view>自定義內(nèi)容</view> </Test>// 組件 <view><view>前面的內(nèi)容</view><slot></slot><view>后面的內(nèi)容</view> </view>

• 使用多個slot - 具名

// 頁面 <Test><view slot='n1'>自定義內(nèi)容1</view><view slot='n2'>自定義內(nèi)容2</view> </Test>// 組件 <view><slot name='n1'></slot><slot name='n2'></slot> </view>

• 想要使用多個slot ,一定要添加這個配置

Component({// slot 配置options: {multipleSlots: true},..... } vue => 頁面組件 獲取數(shù)據(jù) ajax => 公共組件 復(fù)用的ui模塊小程序 => 頁面 獲取數(shù)據(jù) ajax (很多鉤子好好學(xué)習(xí)) ★=> 組件 復(fù)用的ui模塊

6. 定義段與示例方法

Component構(gòu)造器可用于定義組件，調(diào)用Component構(gòu)造器時可以指定組件的屬性、數(shù)據(jù)、方法等。

定義段類型是否必填描述

properties(★)	Object Map	否	組件的對外屬性，是屬性名到屬性設(shè)置的映射表，參見下文
data(★)	Object	否	組件的內(nèi)部數(shù)據(jù)，和 properties 一同用于組件的模板渲染
observers(★)	Object	否	組件數(shù)據(jù)字段監(jiān)聽器，用于監(jiān)聽 properties 和 data 的變化，類似vue里面的 watch
methods(★)	Object	否	組件的方法，包括事件響應(yīng)函數(shù)和任意的自定義方法，關(guān)于事件響應(yīng)函數(shù)的使用，參見 組件事件
created	Function	否	組件生命周期函數(shù)，在組件實例剛剛被創(chuàng)建時執(zhí)行，注意此時不能調(diào)用 setData ，參見 組件生命周期
attached(★)	Function	否	組件生命周期函數(shù)，在組件實例進(jìn)入頁面節(jié)點樹時執(zhí)行，參見 組件生命周期
ready	Function	否	組件生命周期函數(shù)，在組件布局完成后執(zhí)行，參見 組件生命周期
moved	Function	否	組件生命周期函數(shù)，在組件實例被移動到節(jié)點樹另一個位置時執(zhí)行，參見 組件生命周期
detached	Function	否	組件生命周期函數(shù)，在組件實例被從頁面節(jié)點樹移除時執(zhí)行，參見 組件生命周期

// observers 監(jiān)聽 observers :{name(newVal) {console.log('新值', newVal)},obj(newVal) {console.log('新值obj', newVal)},'obj.num'(newVal) {console.log('新值obj的num', newVal)}},const { obj } = this.dataobj.num = 100this.setData({name :'大馬哥',obj,})

7. 組件通信

• 父傳子 : 父組件通過屬性傳遞給子組件數(shù)據(jù)
• 子傳父 : 子組件通過事件傳遞給父組件數(shù)據(jù)

7.1 父傳子

// 父 // 第一步 :父傳子 <Test msg='父的數(shù)據(jù)'></Test>// 子 // 第二步 : 聲明properties: {msg : String,msg: {type: String,value: ''}},// 第三步 : 使用 // 使用1 : 讀取顯示 <view> 父傳子 : {{ msg }} </view> // 使用2 : 打印attached() {console.log(123, this.properties.msg)}

7.2 子傳父

// 父 // 第一步 : 父準(zhǔn)備好一個方法myTap(e) {console.log('父的方法:', e.detail)} // 第二步 : 通過自定義事件傳遞給子組件 <Test bindmytap='myTap'></Test>// 子methods: {fn() {// 第三步 : 子組件觸發(fā)this.triggerEvent('mytap', '子的數(shù)據(jù)')}},

7.3 命名規(guī)則

• 使用組件 使用中劃線的方法

// 引入 "usingComponents": {"nav-header" : "/components/NavHeader/NavHeader" } // 使用1 <nav-header></nav-header> // 使用2 <my-component></my-component>

• 屬性的方式也是要中劃線的方法

<nav-header prop-a='aa' prop-b='bb'></nav-header> <my-component my-class='cls'></my-component>

小程序生命周期

1. 應(yīng)用生命周期

• 應(yīng)用生命周期鏈接

屬性類型默認(rèn)值必填說明

onLaunch	function		否	監(jiān)聽小程序初始化。
onShow	function		否	監(jiān)聽小程序啟動或切前臺。
onHide	function		否	監(jiān)聽小程序切后臺。
onError	function		否	錯誤監(jiān)聽函數(shù)。
onPageNotFound	function		否	頁面不存在監(jiān)聽函數(shù)。

App({// 1. 應(yīng)用第一次啟動的時候會觸發(fā)onLaunch() {// 在應(yīng)用第一次啟動的時候 獲取用戶的個人信息console.log('onLaunch')},// 2. 應(yīng)用 被用戶看到onShow() {// 對應(yīng)用的數(shù)據(jù)或者頁面效果 重置console.log('onShow')},// 3. 應(yīng)用被隱藏onHide() {// 暫停或者清除定時器console.log('onHide')},// 4. 應(yīng)用的代碼發(fā)生了報錯的時候 就會觸發(fā)onError(err) {// 在應(yīng)用發(fā)生代碼報錯的時候 收集用戶的錯誤信息 通過異步請求 將錯誤的信息發(fā)送后臺},// 5. 應(yīng)用找不到就會觸發(fā)onPageNotFound(err) {// 編譯模式下演示// 如果頁面不存在了, 通過js的方法來重新跳轉(zhuǎn)頁面// 1. pages/two/two在pages最前面// 2. 添加編譯模式// 3. 把這個路徑刪掉console.log('找不到頁面',err)} })

2. 頁面生命周期

• 頁面生命周期鏈接

屬性類型說明

data	Object	頁面的初始數(shù)據(jù)
onLoad	function	生命周期回調(diào)—監(jiān)聽頁面加載
onShow	function	生命周期回調(diào)—監(jiān)聽頁面顯示
onReady	function	生命周期回調(diào)—監(jiān)聽頁面初次渲染完成
onHide	function	生命周期回調(diào)—監(jiān)聽頁面隱藏
onUnload	function	生命周期回調(diào)—監(jiān)聽頁面卸載
onPullDownRefresh	function	監(jiān)聽用戶下拉動作
onReachBottom	function	頁面上拉觸底事件的處理函數(shù)
onShareAppMessage	function	用戶點擊右上角轉(zhuǎn)發(fā)
onPageScroll	function	頁面滾動觸發(fā)事件的處理函數(shù)
onResize	function	頁面尺寸改變時觸發(fā)，詳見 響應(yīng)顯示區(qū)域變化
onTabItemTap	function	當(dāng)前是 tab 頁時，點擊 tab 時觸發(fā)

Page({/*** 生命周期函數(shù)--頁面加載的時候觸發(fā)*/onLoad: function(options) {// 發(fā)送網(wǎng)絡(luò)請求},/*** 生命周期函數(shù)--頁面顯示的時候觸發(fā)*/onShow: function() {},/*** 生命周期函數(shù)--頁面初次渲染完成的時候觸發(fā)*/onReady: function() {// 渲染完成},/*** 生命周期函數(shù)--頁面隱藏的時候觸發(fā)*/onHide: function() {},/*** 生命周期函數(shù)--頁面卸載的時候觸發(fā)*/onUnload: function() {wx.redirectTo({url: '/pages/one/one'})},/*** 頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動作* 配合 配置 : "enablePullDownRefresh": true*/onPullDownRefresh: function() {},/*** 頁面上拉觸底事件的處理函數(shù)*/onReachBottom: function() {},/*** 用戶點擊右上角分享*/onShareAppMessage: function() {},// 滾動頁面onPageScroll(e) {console.log(e.scrollTop)},/*** 監(jiān)聽尺寸變化*/onResize() {console.log('尺寸變化了')// 頁面配置 "pageOrientation" :"auto"},/*** 當(dāng)前是 tab 頁時，點擊 tab 時觸發(fā)*/onTabItemTap(res) {// 每個tab對應(yīng)的頁面都要點擊} })

總結(jié)

以上是生活随笔為你收集整理的小程序基础 （三）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。