---

1，behavior的用處

behavior相當(dāng)于各個(gè)組件的公共代碼部分，每個(gè) behavior 可以包含一組屬性、數(shù)據(jù)、生命周期函數(shù)和方法。組件引用它時(shí)，它的屬性、數(shù)據(jù)和方法會(huì)被合并到組件中，生命周期函數(shù)也會(huì)在對(duì)應(yīng)時(shí)機(jī)被調(diào)用，方便管理與統(tǒng)一修改. 每個(gè)組件可以引用多個(gè) behavior ，behavior 也可以引用其它 behavior

2，behavior的基礎(chǔ)使用

①創(chuàng)建js文件，并導(dǎo)出

// behaviors公共代碼 const behavior=Behavior({properties:{bprops:{type:String,value:"behavior內(nèi)的自定義屬性"}},data:{bmsg:"behavior內(nèi)的自定義數(shù)據(jù)"},methods:{fun(){wx.showToast({title: 'hahah',})}} }) module.exports=behavior

②在其他組件中引入并注冊(cè)

// components/mycomp/mycom.js const comBehavior = require("../../behaviors/common") Component({behaviors:[comBehavior],/*** 組件的屬性列表*/properties: {props:{type:String,value:"自定義屬性"}},/*** 組件的初始數(shù)據(jù)*/data: {msg:"自定義組件的數(shù)據(jù)"},/*** 組件的方法列表*/methods: {} })

③ 在wxml頁(yè)面中使用

<view> 屬性： {{props}} </view> <view>數(shù)據(jù)：{{msg}}</view>

3.內(nèi)置behavior

3.1自定義組件中單個(gè)表單元素

①創(chuàng)建組件，并設(shè)置組件的內(nèi)容

<input type="text" model:value="value"/>

②在主界面index.json中注冊(cè)，并在wxml中使用

{"usingComponents": {"my-input":"../../components/myinput/myinput"} } 2.內(nèi)置behavior單個(gè)表單元素 <view> <form bindsubmit="submit"> <label for="username">賬號(hào)：<my-input name="username"></my-input></label> <label for="userpass">密碼：<input type="text" name="userpass" id="userpass"/></label> <label for="nickname">昵稱(chēng)：<input type="text" name="nickname" id="nickname"/></label> <button form-type="submit">提交</button> </form>

③組件中引入內(nèi)置behavior

Component({// behaviors:['wx://form-field'],.... })

3.2自定義組件中多個(gè)表單元素

①創(chuàng)建組件，設(shè)置組建的內(nèi)容

<!-- 2.多個(gè)表單元素 --> <label for="username">賬號(hào)：<input type="text" name="username" id="username"/></label> <label for="userpass">密碼：<input type="text" name="userpass" id="userpass"/></label> <label for="nickname">昵稱(chēng)：<input type="text" name="nickname" id="nickname"/></label>

②注冊(cè)組件并使用

3.內(nèi)置behavior多個(gè)表單元素 <view> <form bindsubmit="submit"> <my-input></my-input> <button form-type="submit">提交</button> </form> </view>

③在組件中引入內(nèi)置behavior

Component({behaviors:['wx://form-field-group'],/*** 組件的屬性列表*/ ... })

4.computed計(jì)算屬性

進(jìn)入小程序端根目錄 1.將小程序項(xiàng)目初始化為node應(yīng)用npm init -y 2.安裝依賴(lài)模塊npm install --save miniprogram-computed 3.進(jìn)行構(gòu)建位置： 菜單欄--工具--構(gòu)建npm 4.正常使用即可

5.組件中正常設(shè)置數(shù)據(jù)

6.組件js文件中引入第三方behavior，并注冊(cè)使用computed

// components/mysun.js const computedBehavior = require("miniprogram-computed").behavior; Component({behaviors:[computedBehavior],/*** 組件的屬性列表*/properties: {},/*** 組件的初始數(shù)據(jù)*/data: {numa:10,numb:22// sum:32},computed:{sum(data){console.log(data.numa,data.numb)return data.numa+data.numb}},/*** 組件的方法列表*/methods: {changeNum(){this.setData({numa:++this.data.numa,numb:++this.data.numb})}} })

watch偵聽(tīng)器

watch和observers語(yǔ)法一致，區(qū)別：

1.從原理上說(shuō)， `watch` 的性能比 `computed` 更好；但 `computed` 的用法更簡(jiǎn)潔干凈。 此外， `computed` 字段狀態(tài)只能依賴(lài)于 `data` 和其他 `computed` 字段，不能訪問(wèn) `this` 。如果不可避免要訪問(wèn) `this` ，則必須使用 `watch` 代替 2.無(wú)論字段是否真的改變， `observers` 都會(huì)被觸發(fā)，而 `watch` 只在字段值改變了的時(shí)候觸發(fā)，并且觸發(fā)時(shí)帶有參數(shù)?！?

總結(jié)

以上是生活随笔為你收集整理的小程序behavior的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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