国产 无码 综合区,色欲AV无码国产永久播放,无码天堂亚洲国产AV,国产日韩欧美女同一区二区

【微信小程序】詳解behaviors,如何使用behaviors

這篇具有很好參考價(jià)值的文章主要介紹了【微信小程序】詳解behaviors,如何使用behaviors。希望對(duì)大家有所幫助。如果存在錯(cuò)誤或未考慮完全的地方,請(qǐng)大家不吝賜教,您也可以點(diǎn)擊"舉報(bào)違法"按鈕提交疑問。

【微信小程序】詳解behaviors,如何使用behaviors

一,behaviors

1.1什么是 behaviors?

behaviors 是小程序中, 用于實(shí)現(xiàn)組件間代碼共享的特性 ,類似于 Vue.js 中的 “mixins”。

1.2behaviors 的工作方式

每個(gè) behavior 可以包含一組 屬性、數(shù)據(jù)、生命周期函數(shù)和方法 。組件引用它時(shí),它的屬性、數(shù)據(jù)和方法 會(huì)被合并到組件中 。每個(gè)組件可以引用多個(gè) behavior,behavior 也可以引用其它 behavior。

1.3創(chuàng)建 behavior

調(diào)用 Behavior(Object object) 方法即可創(chuàng)建一個(gè)共享的 behavior 實(shí)例對(duì)象,供所有的組件使用:在根目錄下新建一個(gè)behaviors文件夾在文件夾下創(chuàng)建一個(gè)my-behavior.js

1.4導(dǎo)入并使用 behavior

在組件中,使用 require() 方法導(dǎo)入需要的 behavior, 掛載后即可訪問 behavior 中的數(shù)據(jù)或方法

// 調(diào)用 Behavior() 方法,創(chuàng)建實(shí)例對(duì)象
// 并使用module.exports 將behavior 實(shí)例對(duì)象共享出去
module.exports = Behavior({
// 屬性節(jié)點(diǎn)
properties:{},
// 私有屬性節(jié)點(diǎn)
data: {
username:'zs'
},
// 事件處理函數(shù)和自定義方法的節(jié)點(diǎn)
methods: {},
// 其他節(jié)點(diǎn)
})

列入我們想要在test5中使用my-behavior

在test5中:

// components/test5/test5.js
//1.使用require() 導(dǎo)入需要的自定義behavior模塊
const myBehavior = require('../../behaviors/my-behavior')

在test5.wxml 使用behavios中定義的數(shù)據(jù)

<!--components/test5/test5.wxml-->
<view>子組件中,count值是:{{count}}</view>
<button bindtap="addCount">+1</button>
<view>在behavior中定義的用戶名是:{{username}}</view>
Component({
//2. 將導(dǎo)入的behavior 實(shí)例對(duì)象,掛載到behaviors數(shù)組節(jié)點(diǎn)中,即可生效
behaviors:[myBehavior],

})

1.5 behavior 中所有可用的節(jié)點(diǎn)

可用的節(jié)點(diǎn) 類型 是否必填 描述
properties Object Map 同組件的屬性
data Object 同組件的數(shù)據(jù)
methods Object 同自定義組件的方法
detached Function 生命周期函數(shù)
behaviors String Array 引入其它的 behavior
created Function 生命周期函數(shù)
attached Function 生命周期函數(shù)
ready Function 生命周期函數(shù)
moved Function 生命周期函數(shù)

同名字段的覆蓋和組合規(guī)則
組件和它引用的 behavior 中 可以包含同名的字段 ,此時(shí)可以參考如下 3 種同名時(shí)的處理規(guī)則:

  1. 同名的數(shù)據(jù)字段 (data)
  2. 同名的屬性 (properties) 或方法 (methods)
  3. 同名的生命周期函數(shù)

關(guān)于詳細(xì)的覆蓋和組合規(guī)則,大家可以參考微信小程序官方文檔給出的說明:小程序官方文檔文章來源地址http://www.zghlxwxcb.cn/news/detail-422738.html

總結(jié)

  1. 能夠創(chuàng)建并引用組件 全局引用、局部引用、usingComponents
  2. 能夠知道如何修改組件的樣式隔離選項(xiàng) options -> styleIsolation( isolated, apply-shared, shared)
  3. 能夠知道如何定義和使用數(shù)據(jù)監(jiān)聽器 observers
  4. 能夠知道如何定義和使用純數(shù)據(jù)字段 options -> pureDataPattern
  5. 能夠知道實(shí)現(xiàn)組件父子通信有哪 3 種方式 屬性綁定、事件綁定、this.selectComponent(’ id或class選擇器’)
  6. 能夠知道如何定義和使用behaviors 調(diào)用 Behavior() 構(gòu)造器方法

到了這里,關(guān)于【微信小程序】詳解behaviors,如何使用behaviors的文章就介紹完了。如果您還想了解更多內(nèi)容,請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持TOY模板網(wǎng)!

本文來自互聯(lián)網(wǎng)用戶投稿,該文觀點(diǎn)僅代表作者本人,不代表本站立場(chǎng)。本站僅提供信息存儲(chǔ)空間服務(wù),不擁有所有權(quán),不承擔(dān)相關(guān)法律責(zé)任。如若轉(zhuǎn)載,請(qǐng)注明出處: 如若內(nèi)容造成侵權(quán)/違法違規(guī)/事實(shí)不符,請(qǐng)點(diǎn)擊違法舉報(bào)進(jìn)行投訴反饋,一經(jīng)查實(shí),立即刪除!

領(lǐng)支付寶紅包贊助服務(wù)器費(fèi)用

相關(guān)文章

  • 【微信小程序】Behaviors

    behaviors 是小程序中,用于實(shí)現(xiàn)組件間代碼共享,通常用于實(shí)現(xiàn)一些通用的功能或行為,例如頁面滾動(dòng)、下拉刷新、上拉加載更多等。 behaviors 包含一組屬性、數(shù)據(jù)、生命周期函數(shù)和方法。組件引用它時(shí),它的屬性、數(shù)據(jù)和方法會(huì)被合并到組件中。在小程序中,behaviors的工作方

    2024年02月09日
    瀏覽(11)
  • 微信小程序 behaviors

    微信小程序 behaviors

    behaviors 是小程序中,用于實(shí)現(xiàn)組件間代碼共享的特性,類似于 Vue.js 中的 “mixins”。 每個(gè) behavior 可以包含一組屬性、數(shù)據(jù)、生命周期函數(shù)和方法。組件引用它時(shí),它的屬性、數(shù)據(jù)和方法會(huì)被合并到組件中。 每個(gè)組件可以引用多個(gè) behavior,behavior 也可以引用其它 behavior。 調(diào)

    2024年02月09日
    瀏覽(10)
  • 微信小程序文本組件text使用詳解-微信小程序系統(tǒng)學(xué)習(xí)攻略?

    微信小程序文本組件text使用詳解-微信小程序系統(tǒng)學(xué)習(xí)攻略?

    也許你迷茫,但是我想說,在你迷茫的同時(shí),保持本心,過好今天就好。 在微信小程序中,組件 text 用來顯示文本,基本使用代碼如下: 1 基本樣式設(shè)置 基本使用還是比較簡(jiǎn)單的,下面咱們來論述一下文本樣式的設(shè)置,首先是給他設(shè)置一個(gè) class 然后在對(duì)應(yīng)的 wxss 文件中編寫

    2023年04月13日
    瀏覽(92)
  • 微信小程序(詳解及簡(jiǎn)單使用)

    微信小程序(詳解及簡(jiǎn)單使用)

    目錄 1.結(jié)構(gòu)分布 1.框架全局文件 1.1.pages( 頁面路徑列表 ) 1.2.window( 全局的默認(rèn)窗口表現(xiàn) ) 1.3.tabBar( 底部 tab 欄的表現(xiàn) ) ?2.使用view進(jìn)行頁面布局 3.組件的使用 3.1基礎(chǔ)組件 3.1.1 icon 3.1.2 progress 3.1.3 text ?????3.2表單組件 3.2.1.button 3.2.2.checkbox 3.2.3.checkbox-group 3.2.4.radio 3.

    2024年02月02日
    瀏覽(22)
  • 微信小程序使用 npm 包,舉例圖文詳解

    微信小程序使用 npm 包,舉例圖文詳解

    下載安裝,配置npm環(huán)境變量,不懂得可以上網(wǎng)查教程,本文不再描述 1、初始化 package.json 2、勾選允許使用 npm(新版微信小程序開發(fā)工具忽略這一步) 3、下載 npm 包 4、構(gòu)建 npm 不清楚的可以往下看詳解 1、初始化 package.json 在小程序開發(fā)工具\(yùn)\\"終端\\\"輸入: 執(zhí)行命令成功后自動(dòng)

    2023年04月09日
    瀏覽(21)
  • 微信小程序使用npm引入三方包詳解

    微信小程序使用npm引入三方包詳解

    1 前言 從小程序基礎(chǔ)庫版本 2.2.1 或以上、及開發(fā)者工具 1.02.1808300 或以上開始,小程序支持使用 npm 安裝第三方包。 此文檔要求開發(fā)者們對(duì) npm 有一定的了解,因此不會(huì)再去介紹 npm 的基本功能。如若之前未接觸過 npm,請(qǐng)翻閱 官方 npm 文檔 進(jìn)行學(xué)習(xí)。 2 微信小程序npm環(huán)境搭建

    2024年02月11日
    瀏覽(87)
  • 微信小程序如何使用websocket

    在智能手機(jī)時(shí)代,無不體現(xiàn)著小程序的必要性。WeChat小程序作為目前最受歡迎的小程序平臺(tái)之一,已成為很多人的首選開發(fā)平臺(tái)。那么如何使用websocket來開發(fā)一個(gè)WeChat小程序呢?今天我們就來一起探討一下。 首先,讓我們回顧一下WebSocket的基本概念。WebSocket是一種在單個(gè)TC

    2024年02月05日
    瀏覽(22)
  • 微信小程序如何使用SCSS

    微信小程序如何使用SCSS

    微信小程序開發(fā)者工具集成了 vscode 編輯器,可以使用 vscode 中眾多的插件,為我們開發(fā)微信小程序提供了極大的便利。我們可以借助 easysass 插件實(shí)現(xiàn)在微信開發(fā)中使用 sass,安裝步驟如下。 1,在 vscode 中安裝 easysass 插件。 2,導(dǎo)入已安裝的vscode擴(kuò)展 接下來打開微信開發(fā)者工

    2024年02月12日
    瀏覽(20)
  • 原生微信小程序中使用-阿里字體圖標(biāo)-詳解

    原生微信小程序中使用-阿里字體圖標(biāo)-詳解

    1、打開阿里巴巴矢量圖標(biāo)庫 網(wǎng)址:iconfont-阿里巴巴矢量圖標(biāo)庫 2、搜索字體圖標(biāo),鼠標(biāo)懸浮點(diǎn)擊添加入庫 ?3、按如下步驟添加到自己的項(xiàng)目 ? 進(jìn)入微信開發(fā)者工具 1、創(chuàng)建 fonts文件夾 iconfont.wxss 文件,將剛才的代碼復(fù)制進(jìn)去 2、在 app.wxss文件?中引入路徑 3、在頁面中使用 ?

    2024年02月04日
    瀏覽(96)
  • 微信小程序使用van-steps詳解

    微信小程序使用van-steps詳解

    vant官網(wǎng)代碼如下 問題1:官網(wǎng)代碼用在小程序上無效果 這里發(fā)現(xiàn)小程序的vant包里有 steps 沒有step 因此官網(wǎng)寫法無效。 解決方法 正確寫法如下所示 頁面wxml js 最終效果 問題2:steps數(shù)組中如何設(shè)置其他字段 (1)找到vant的包 (2)找到steps的index.wxml文件 (3)下面紅框里是ste

    2024年02月16日
    瀏覽(25)

覺得文章有用就打賞一下文章作者

支付寶掃一掃打賞

博客贊助

微信掃一掃打賞

請(qǐng)作者喝杯咖啡吧~博客贊助

支付寶掃一掃領(lǐng)取紅包,優(yōu)惠每天領(lǐng)

二維碼1

領(lǐng)取紅包

二維碼2

領(lǐng)紅包