5. 使用 slot

• 使用單個slot

// 頁面 <Test><view>自定義內容</view> </Test>// 組件 <view><view>前面的內容</view><slot></slot><view>后面的內容</view> </view>

• 使用多個slot - 具名

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

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

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

6. 定義段與示例方法

Component構造器可用于定義組件，調用Component構造器時可以指定組件的屬性、數據、方法等。

定義段類型是否必填描述

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

// observers 監聽 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. 組件通信

• 父傳子 : 父組件通過屬性傳遞給子組件數據
• 子傳父 : 子組件通過事件傳遞給父組件數據

7.1 父傳子

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

7.2 子傳父

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

7.3 命名規則

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

// 引入 "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. 應用生命周期

• 應用生命周期鏈接

屬性類型默認值必填說明

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

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

2. 頁面生命周期

• 頁面生命周期鏈接

屬性類型說明

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

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。