小程序中使用behavior
1.首先先定義behavior
每個 behavior 可以包含一組屬性、數據、生命週期函數和方法，組件引用它時，它的屬性、數據和方法會被合併到組件中，生命週期函數也會在對應時機被調用。每個組件可以引用多個 behavior 。 behavior 也可以引用其他 behavior 。
behavior 需要使用 Behavior() 構造器定義。
第一步：behavior.js文件中有共享的properties，data，methods等
// 第一步：創建behavior.js，裏面的properties，data，methods裏面的方法，可以共享給movie、music等等組件使用
let SmallFourBeh = Behavior({
// 共享屬性
properties: {
name: String,
type: String
},
// 共享數據
data: {
selectedName: '',
selectedType: ''
},
// 共享方法
methods: {
behaviorTap (name, type) {
this.setData({
selectedName:name,
selectedType: type
})
}
}
})
export { SmallFourBeh } // 導出
第二步：在movie組件中編寫wxml和js
<!--第二步：components/movie/index.wxml-->
<view>movie:{電影名稱:{{ name }},類型：{{ type }}}</view>
<button bind:tap="onTap" data-name="{{ name }}" data-type="{{ type }}">獲取數據詳情：{{ selectedType }}，{{ selectedName }}</button>
// components/movie/movie.js
// 導入
import {SmallFourBeh} from '../../utils/behavior.js'
Component({
/**
* 組件的屬性列表
*/
behaviors:[SmallFourBeh], //繼承behavior.js裏面的properties, data,methods
properties: {
name:String,
type:String
},
data: {
},
/**
* 組件的方法列表
*/
methods: {
onTap(ev) {
let { name, type } = ev.target.dataset
this.behaviorTap(name, type) // 通過this可以訪問behavior.js裏面的內容
}
}
})
三、組件在被調用的時候傳遞參數
<movie type="{{type}}" name="{{name}}"></movie>
在data裏面定義傳遞的參數
小程序的數據監聽器
數據監聽器可以用於監聽和響應任何屬性和數據字段的變化，類似於Vue中的
文本作用域
在app.js中可以定義全局可以訪問的屬性，在**globalData: { }**對象中可以存儲全局可以訪問的屬性。可以通過使用 const app=getApp() 訪問全局的屬性。
小程序中的API
同步api
1.小程序中有同步api和異步api，同步api以Sync結尾的。 如 wx.setStorageSync，wx.getSystemInfoSync 等。同步 API 的執行結果可以通過函數返回值直接獲取，如果執行出錯會拋出異常。
異步api:
大多數 API 都是異步 API，如 wx.request，wx.login 等。這類 API 接口通常都接受一個 Object 類型的參數，這個參數都支持按需指定以下字段來接收接口調用結果：
小程序中使用模板
小程序的模板主要是對一個組件的複用性。
如果是在外部定義的模板，如果需要引用那麼需要使用
<import src="../../resource/template/template.wxml"/>
<view>小程序中使用模板</view>
<template name="staffName">
name表示組件模板的名字
<view>
FirstName: {{firstName}}, LastName: {{lastName}}
</view>
</template>
<template is="staffName" data="{{...staffA}}"></template>
<template is="staffName" data="{{...staffB}}"></template>
<template is="staffName" data="{{...staffC}}"></template>
可以使用解構， data是指定數據源。 is是指定的名字。
wxs的使用
wxs主要是對數據進行處理的。
Page({
data: {
array: [1, 2, 3, 4, 5, 1, 2, 3, 4]
}
})
<!--wxml-->
<!-- 下面的 getMax 函數，接受一個數組，且返回數組中最大的元素的值 -->
<wxs module="m1">
var getMax = function(array) {
var max = undefined;
for (var i = 0; i < array.length; ++i) {
max = max === undefined ?
array[i] :
(max >= array[i] ? max : array[i]);
}
return max;
}
module.exports.getMax = getMax;
</wxs>
<!-- 調用 wxs 裏面的 getMax 函數，參數爲 page.js 裏面的 array -->
<view> {{m1.getMax(array)}} </view>
小程序中組件的使用
1.組件引用外部樣式類：
此時可以在 Component 中用 externalClasses 定義段定義若干個外部樣式類。
/* 組件 custom-component.js */
Component({
externalClasses: ['my-class']
})
<!-- 組件 custom-component.wxml -->
<custom-component class="my-class">這段文本的顏色由組件外的 class 決定</custom-component>
2.Component構造器：
Component構造器可用於定義組件，調用 Component 構造器時可以指定組件的屬性、數據、方法等。
3.組件間通信與事件
父親向兒子傳值： 通過使用屬性傳值的方式。
兒子向父親傳值： 通過使用this.triggerEvent(‘myevent’,{‘參數列表’})，在父親裏面定義方法，通過e.detail可以獲得父親傳遞的參數。
<component bind:myevent="onClick" ></component>
4.組件的生命週期
created attached detached
組件實例剛剛被創建好時， created 生命週期被觸發，此時還不能調用 setData。
attached 生命週期被觸發。此時， this.data 已被初始化爲組件的當前值。這個生命週期很有用，絕大多數初始化工作可以在這個時機進行。
在組件離開頁面節點樹後， detached 生命週期被觸發。退出一個頁面時，如果組件還在頁面節點樹中，則 detached 會被觸發
5.數據監聽
有時，在一些數據字段被 setData 設置時，需要執行一些操作。
例如， this.data.sum 永遠是 this.data.numberA 與 this.data.numberB 的和。此時，可以使用數據監聽器進行如下實現。
Component({
attached: function() {
this.setData({
numberA: 1,
numberB: 2,
})
},
observers: {
'numberA, numberB': function(numberA, numberB) {
// 在 numberA 或者 numberB 被設置時，執行這個函數
this.setData({
sum: numberA + numberB
})
}
}
})
6.組件的插槽的使用
如果要開啓多個插槽那麼需要在組件裏面進行配置：
options:{
multipleSlots:true
}
使用slot定義模板插槽：
<view class="page">
<slot name="first" />
<view>{{message}}</view>
<view>{{number}}</view>
<button size="mini" bindtap="onAddClick" >按鈕</button>
<slot name="secend" />
</view>
在組件內部引用，通過使用name指定插槽的位置
<my-test message="{{message}}" bind:addNumber="addNum" number="{{number}}">
<view slot="first">我是first插槽內容</view>
<view slot="secend">我是secend插槽內容</view>
</my-test>
