{
  
  
  
 "component": true,
  
  
  
 "usingComponents": {}
  
  
  
}
 
 
 

 
 
 

  
  
  
/* /components/custom/custom.js */
  
  
  
Component({
  
  
  
 methods: {
  
  
  
 onLoad: function(options) {
  
  
  
 // 123
  
  
  
 console.log(options.paramA);
  
  
  
 // xyz 
  
  
  
 console.log(options.paramB); 
  
  
  
 }
  
  
  
 }
  
  
  
});
 
 
 

使用 Component 構(gòu)造器來構(gòu)造頁面的一個好處是可以使用 behaviors 來提取所有頁面中公用的代碼段。例如，在所有頁面被創(chuàng)建和銷毀時都要執(zhí)行同一段代碼，就可以把這段代碼提取到 behaviors 中。

代碼示例

在開發(fā)者工具中打開

在開發(fā)者工具中打開

在 WEB IDE 中打開

• JS

 
 
 

  
  
  
// behavior.js
  
  
  
module.exports = Behavior({
  
  
  
 attached: function() {
  
  
  
 // 頁面創(chuàng)建時執(zhí)行
  
  
  
 console.info('Page loaded!')
  
  
  
 },
  
  
  
 detached: function() {
  
  
  
 // 頁面銷毀時執(zhí)行
  
  
  
 console.info('Page unloaded!')
  
  
  
 }
  
  
  
})
 
 
 

• JS

 
 
 

  
  
  
// 自定義組件 A
  
  
  
var pageCommonBehavior = require('../behavior.js')
  
  
  
Component({
  
  
  
 behaviors: [pageCommonBehavior],
  
  
  
 data: { /* ... */ },
  
  
  
 methods: { /* ... */ },
  
  
  
})
 
 
 

• JS

 
 
 

  
  
  
// 自定義組件 B
  
  
  
var pageCommonBehavior = require('../behavior.js')
  
  
  
Component({
  
  
  
 behaviors: [pageCommonBehavior],
  
  
  
 data: { /* ... */ },
  
  
  
 methods: { /* ... */ },
  
  
  
})
 
 
 

從基礎(chǔ)庫 3.260.6 版本開始，使用 Component 構(gòu)造器構(gòu)建的頁面開始支持使用 onInit 生命周期，執(zhí)行時機(jī)與 Page.onInit 相同，開發(fā)者可以使用該生命周期提前發(fā)起首屏請求，參見 在 onInit 請求首屏主數(shù)據(jù)
注意：
Component.onInit 具有和 Page.onInit 完全相同的限制，即不能進(jìn)行任何依賴視圖層的操作等。

代碼示例

• JS

 
 
 

  
  
  
function getData(param) {
  
  
  
 return new Promise((resolve, reject) => {
  
  
  
 swan.request({
  
  
  
 url: 'xxx',
  
  
  
 success: res => resolve(res)
  
  
  
 });
  
  
  
 });
  
  
  
}
  
  
  
  
  
  
Component(
  
  
  
 // 使用一個標(biāo)記位，確保只請求一次主數(shù)據(jù)，用于低版本兼容
  
  
  
 hasRequest: false
  
  
  
 data: {
  
  
  
 value: ''
  
  
  
 },
  
  
  
 methods: {
  
  
  
 onInit(param) {
  
  
  
 if (!this.hasRequest) {
  
  
  
 this.hasRequest = true;
  
  
  
 getData(param).then(res => {
  
  
  
 this.setData({
  
  
  
 value: res.data
  
  
  
 });
  
  
  
 })
  
  
  
 }
  
  
  
 },
  
  
  
  
  
  
 onLoad(param) {
  
  
  
 if (!this.hasRequest) {
  
  
  
 this.hasRequest = true;
  
  
  
 getData(param).then(res => {
  
  
  
 this.setData({
  
  
  
 value: res.data
  
  
  
 });
  
  
  
 })
  
  
  
 }
  
  
  
 }
  
  
  
 }
  
  
  
);
 
 
 

說明：

• 使用 this.data 可以獲取內(nèi)部數(shù)據(jù)和屬性值，但不要直接修改它們，應(yīng)使用 setData 修改；
• 屬性名應(yīng)避免以 data- 開頭，因為在 SWAN 中，data-name='swan'會被作為節(jié)點 dataset 來處理；
• 屬性名應(yīng)避免以 prop- 開頭 在處理過程中會將該前綴刪除；
• 屬性名應(yīng)避免包含 “ _ ” 字符，因為在渲染過程中將會以 “ _ ” 字符進(jìn)行拆分。