---

1，behavior的用處

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

2，behavior的基礎使用

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

// 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

②在其他組件中引入并注冊

// 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頁面中使用

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

3.內(nèi)置behavior

3.1自定義組件中單個表單元素

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

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

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

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

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

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

3.2自定義組件中多個表單元素

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

<!-- 2.多個表單元素 --> <label for="username">賬號：<input type="text" name="username" id="username"/></label> <label for="userpass">密碼：<input type="text" name="userpass" id="userpass"/></label> <label for="nickname">昵稱：<input type="text" name="nickname" id="nickname"/></label>

②注冊組件并使用

3.內(nèi)置behavior多個表單元素 <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計算屬性

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

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

6.組件js文件中引入第三方behavior，并注冊使用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偵聽器

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

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

總結(jié)

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

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