? ?? WeChat ?? ????? ?? ? ?? ?? ??? ?????. ?? ??? ?? ?? ??, ??? ??, ???, ??? ? ?? ?? ??? ? ?? ?? ???? ?????. ???? ??? ??? ????. .

【?? ?? ?? ??: ?? ???? ?? ????】

1. ??? ?? ?? ??

1.1 ?? ?? ??

• ????? ?? ?????? ??? ??? ??? ???? ?????. ???? -> ??? ??

• ? ???? -> ??? ???? ??? ??? ??? ???? ? ????? ?????.

• ???? ??? ???? Enter? ??? ????? ???? 4?? ??? ?????. ???? ?? ???? ?????. ??? ?? .js, .json, .wxml ? .wxss???. page

??? ?? : ?? ?? ???? ????? ????? ??? ? ????

1.3 ?? ?? ????
???? .json ?? ???? ????? ???? ??? ????? ???. ??. ?? ??? ??? ????.

• # 在頁面的 .json 文件中，引入組件
  {
    "usingComponents": {
      "my-test": "/components/test/test"
    }
  }
  # 在頁面的 .wxml 文件中，使用組件
  <my-test></my-test>

1.4. ?? ?? ?? ??

app.json ?? ?? ???? ?? ??? ???? ??? ?? ???? ???. ?? ??? ??? ????.

# 在 app.json 文件中，引入組件
{
  "usingComponents": {
    "my-test": "/components/test/test"
  }
}

1.5.??? ?? VS ?? ??

????? ?? ??? ??? ?? ??? ?? ??? ?????.

????? ?? ???? ?? ?? ????? ??? ??? ???? ?? ????

?? ????? ?? ?????? ?????. ?? ??? ???? ?? ????

1.6 ????? ???? ???
????? ?? ??? ???? .js, .json, .wxml ? .wxss? ? ?? ??? ?????. ??? ?? ??? ???? .js ??? .json ?? ???? ??? ???? ????.
?? ??? .json ??? "?? ??"? ???? ???. true ??

?? ??? .js ?? ????? Component( ) ??? ?????.

????? ??? ?? ??? ??? ??

• 2?? ????? ???. ??? ??
2.1.????? ???? ??? ??. , ??? ?? ?? ??? ???? ?? ?? ???? ???? ?? ?? ??? UI ???? ??? ??? ????.

• ?? ???? ?? ??? ?? ???? ??? ??? ??? ??

?? ?? ???? ?? ???? ???? ??? ??

2.2. ?? ?? ??? ??? ?? ?? ??

app.wxss? ?? ???? ?? ??? ???? ????? ??? ???? ??? ?? ??? ????. id ???, ?? ??? ? ??? ???? ??? ??? ??? ?? ????.

id? ???? ?? ?? ? ?????? ??? ???? ???? ?? ?? ????.

2.3. ?? ??? ??? ?? ?? ??

????? ??? ?? ?? ??? ??? ?? ??? ?? ??? ?? ???? ?? ??? ?? ?? ??? ??? ? ????. ??? ??? ???? ?? ?? ??? ???? ??? ? ??? ?? ?? ????. ?? stylelsolation? ?? ????? ??? ?? ??? ??? ? ????.

# 在組件的 .js 文件中新增如下配置
Component({
  options: {
    stylelsolation: 'isolated'
  }
})
# 或在組件的 .json 文件中新增如下配置
{
  "stylelsolation": "isolated"
}

2.4, stylelsolation? ??? ?

| ??? ? | ??? | ?????????????????????????????????????????????????????????????????????????????? -- --: | :----: -------- ---- | -------------------- ---- ----------------------- -------- ----- -------------------------------- ----- -------- |

| isolated | 是 | 表示啟用樣式隔離 | 表示啟用樣式隔離，在自定義組件內(nèi)外，使用 class 指定的樣式將不會互相影響 |

| apply-shared | 否 | 表示頁面 wxss 樣式將影響到自定義組件，但自定義組件 wxss 中指定的樣式不會影響頁面 |

| shared | 否 | 表示頁面 wxss 樣式將影響到自定義組件，自定義組件 wxss 中指定的樣式也會影響頁面和其他設(shè)置了 apply-shared 或 shared 的自定義組件 |

3、數(shù)據(jù)、方法和屬性

3.1、data 數(shù)據(jù)

在小程序組件中，用于組件模板渲染和私有數(shù)據(jù)，需要定義到 data 節(jié)點(diǎn)中，示例如下：

Component({
  <!-- 組件的初始數(shù)據(jù) -->
  data: {
    count: 0
  }
})

3.2、methods 數(shù)據(jù)

在小程序組件中，事件處理函數(shù)和自定義方法需要定義到 methods 節(jié)點(diǎn)中，示例代碼如下：

Component({
   <!-- 組件的方法列表 -->
  methods: {
    <!-- 事件處理函數(shù) -->
    addCount() {
      this.setData({count: this.data.count + 1});
      <!-- 通過 this 直接調(diào)用自定義方法 -->
      this._showCount()
    },
    <!-- 自定義方法建議以 _ 開頭 -->
    _showCount() {
      wx.showToast({
        title: &#39;count值為：&#39; + this.data.count,
        icon: &#39;none&#39;
      })
    }
  }
})

3.3、properties 屬性

在小程序組件中，properties 是組件的對外屬性，用來接收外界傳遞到組件中的數(shù)據(jù)，示例代碼如下：

Component({
  <!-- 屬性定義 -->
  properties: {
    <!-- 完整定義屬性的方式 -->
    max: {
      type: Number,
      value: 10
    },
    <!-- 簡化定義屬性的方式 -->
    max: Number
  }
})

3.4、data 和 properties 的區(qū)別

在小程序的組件中，properties 屬性和 data 數(shù)據(jù)的用法相同，它們都是可讀可寫的，只不過：

• data 更傾向于存儲組件的私有數(shù)據(jù)

• properties 更傾向于存儲外界傳遞到組件中的數(shù)據(jù)

Component({
  methods: {
    showInfo() {
      <!-- 結(jié)果為 true，證明 data 數(shù)據(jù)和 properties 屬性本質(zhì)上是一樣的，都是可讀可寫的 -->
      console.log(this.data === this.properties)
    }
  }
})

3.5、使用 setData 修改 properties 的值

由于 data 數(shù)據(jù)和 properties 屬性在本質(zhì)上沒有任何區(qū)別，因此 properties 屬性的值也可以用于頁面渲染，或使用 setData 為 properties 中的屬性重新賦值，示例代碼如下：

# 在組建的 .wxml 文件中使用 properties 屬性的值
<view>max屬性的值為：{{max}}</view>
Component({
  properties: { max: Number },
  methods: {
    addCount() {
      this.setData({ max: this.properties.max + 1 })
    }
  }
})

4、數(shù)據(jù)監(jiān)聽器

4.1、什么是數(shù)據(jù)監(jiān)聽器

數(shù)據(jù)監(jiān)聽器用于監(jiān)聽和響應(yīng)任何屬性和數(shù)據(jù)字段的變化，從而執(zhí)行特定的操作。它的作用類似于 vue 中的 watch 偵聽器。在小程序組件中，數(shù)據(jù)監(jiān)聽器的基本語法格式如下：

Component({
  observers: {
    '字段A, 字段B': function(字段A的心智, 字段B的新值) {
    }
  }
})

4.2、數(shù)據(jù)監(jiān)聽器的基本用法

Component({
  data: { n1: 0, n2: 0, sum: 0 },
  methods: {
    addN1() { sthis.setData({ n1: this.data.n1 + 1 })},
    addN2() { sthis.setData({ n2: this.data.n2 + 1 })}
  },
  observers: {
    'n1, n2': function(n1, n2) {
      this.setData({sum: n1 + n2})
    }
  }
})

4.3、監(jiān)聽對象屬性的變化

# 數(shù)據(jù)監(jiān)聽器支持監(jiān)聽對象中單個或多個屬性的變化，示例代碼如下：
Component({
  observers: {
    '對象.屬性A, 對象.屬性B': function(屬性A的新值, 屬性B的心智){}
  }
})
# 監(jiān)聽對象中所有屬性的變化
Component({
  observers: {
    'obj.**': function(obj){}
  }
})

5、純數(shù)據(jù)字段

5.1、什么是純數(shù)據(jù)字段

純數(shù)據(jù)字段指的是那些不用于界面渲染的 data 字段。

應(yīng)用場景：例如有些情況下，某些 data 中的字段既不會展示在界面上，也不會傳遞給其他組件，僅僅在當(dāng)前組件內(nèi)部使用。帶有這種特性的 data 字段適合備設(shè)置為儲數(shù)據(jù)字段

好處：純數(shù)據(jù)字段有助于提升頁面更新的性能

5.2、使用規(guī)則

在 Component 構(gòu)造器的 options 節(jié)點(diǎn)中，指定 pureDataPattern 為一個正則表達(dá)式，字段名符合這個正則表達(dá)式的字段將成為純數(shù)據(jù)字段，示例代碼如下：

Component({
  options: {
    <!-- 指定所有 _ 開頭的數(shù)據(jù)字段為純數(shù)據(jù)字段 -->
    pureDataPattern: /^_/
  },
  data: {
    a: true, // 普通數(shù)據(jù)字段
    _b: true // 純數(shù)據(jù)字段
  }
})

6、組件的生命周期

6.1、組件的全部生命周期函數(shù)

6.2、組件主要的生命周期函數(shù)

在小程序組件中，最重要的生命周期函數(shù)有 3 個，分別是 created、attached、detached。它們各自的特點(diǎn)如下：

• 組件實例剛被創(chuàng)建好的時候，created 生命周期函數(shù)會被觸發(fā)

此時還不能調(diào)用 setData

通常在這個生命周期函數(shù)中，只應(yīng)該用于給組件的 this 添加一些自定義的屬性字段

• 在組建完全初始化完畢、進(jìn)入頁面節(jié)點(diǎn)樹后，attached 生命周期函數(shù)會被觸發(fā)

此時，this.data 已被初始化完畢

這個生命周期很有用，絕大多數(shù)初始化的工作可以在這個時機(jī)進(jìn)行

• 組件離開頁面節(jié)點(diǎn)樹后，detached 生命周期函數(shù)會被觸發(fā)

退出一個頁面時，會觸發(fā)頁面內(nèi)每個自定義組件的 detached 生命周期函數(shù)

此時適合做一些清理性質(zhì)的工作

6.3、lifetimes 節(jié)點(diǎn)

在小程序組件中，生命周期函數(shù)可以直接定義在 Component 構(gòu)造器的第一級參數(shù)中，可以在 lifetimes 字段內(nèi)進(jìn)行聲明（這是推薦的方式，其優(yōu)先級最高）。示例代碼如下：

Component({
  <!-- 推薦用法 -->
  lifetimes: {
    attached() {}, // 在組件實例進(jìn)入頁面節(jié)點(diǎn)樹時執(zhí)行
    detached() {}, // 在組件實例被從頁面節(jié)點(diǎn)樹移除時執(zhí)行
  },
  <!-- 以下是舊的定義方式 -->
  attached() {}, // 在組件實例進(jìn)入頁面節(jié)點(diǎn)樹時執(zhí)行
  detached() {}, // 在組件實例被從頁面節(jié)點(diǎn)樹移除時執(zhí)行
})

6.4、什么是組件所在頁面的生命周期

有時，自定義組件的行為依賴于頁面狀態(tài)的變化，此時就需要用到組件所在頁面的生命周期

6.5、pageLifetimes 節(jié)點(diǎn)

# 組件所在頁面的生命周期函數(shù)，需要定義在 pageLifetimes 節(jié)點(diǎn)中
Component({
  pageLifetimes: {
    show: function() {}, // 頁面被展示
    hide: function() {}, // 頁面被隱藏
    resize: function(size) {} // 頁面尺寸變化
  }
})

7、插槽

7.1、什么是插槽

在自定義組件的 wxml 結(jié)構(gòu)中，可以提供一個 slot 節(jié)點(diǎn)（插槽），用于承載組件使用者提供的 wxml 結(jié)構(gòu)。

7.2、單個插槽

在小程序中，默認(rèn)每個自定義組件中只允許使用一個 slot 進(jìn)行占位，這種個數(shù)上限制叫做單個插槽

<!-- 組件的封裝者 -->
<view class="wrapper">
  <view>這里是組件的內(nèi)部節(jié)點(diǎn)</view>
  <!-- 對于不準(zhǔn)確的內(nèi)容，可以使用 slot 進(jìn)行展位 -->
  <slot></slot>
</view>
<!-- 組件的使用者 -->
<component>
  <view>這里是插入到組件slot中的內(nèi)容</view>
</component>

7.3、啟用多個插槽

在小程序的自定義組件中，需要使用多個 slot 插槽是，可以在組件的 .js 文件中，通過如下方式進(jìn)行啟用，示例代碼如下：

Component({
  options: {
    multipleSlots: true // 在組件定義時，啟用多個 slot 支持
  }
})

7.4、定義多個插槽

可以在組件的 .wxml 中使用多個 slot 標(biāo)簽，以不同的 name 來區(qū)分不同的插槽。示例代碼如下：

<!-- 組件模板 -->
<view class="wrapper">
  <!-- name 為 before 的第一個 slot 插槽 -->
  <slot name="before"></slot>
  <view>這是一段固定的文本內(nèi)容</view>
  <!-- name 為 after 的第二個 slot 插槽 -->
  <slot name="after"></slot>
</view>

7.5、使用多個插槽

在使用帶有多個插槽的自定義組件時，需要用 slot 屬性來將節(jié)點(diǎn)插入到不同的 slot 中。示例代碼如下：

<!-- 引用組件的頁面模板 -->
<component>
  <!-- 這部分內(nèi)容將被放置在組件 <slot name="before"></slot> 的位置上 -->
  <view slot="before">這里是插入到組件 slot name="before"中的內(nèi)容</view>
  <!-- 這部分內(nèi)容將被放置在組件 <slot name="after"></slot> 的位置上 -->
  <view slot="after">這里是插入到組件 slot name="after"中的內(nèi)容</view>
</component>

8、父子組件之間的通信

8.1、父子組件之間的通信的 3 種方式

屬性綁定

用于父組件向子組件的指定屬性設(shè)置數(shù)據(jù)，僅能設(shè)置 JSON 兼容的數(shù)據(jù)

事件綁定

用于子組件向父組件傳遞數(shù)據(jù)，可以傳遞任意數(shù)據(jù)

獲取組件實例

父組件還可以通過 this.selectComponent() 獲取子組件實例對象

這樣舊可以直接訪問子組件的任意數(shù)據(jù)和方法

8.2、屬性綁定

屬性綁定用于實現(xiàn)父向子傳值，而且只能傳遞普通類型的數(shù)據(jù)，無法將方法傳遞給子組件。父組件的示例代碼如下：

<!-- 父組件的 data 節(jié)點(diǎn) -->
data: {
  count: 0
}
<!-- 父組件的 wxml 結(jié)構(gòu) -->
<my-child count="{{count}}"></my-child>

<!-- 子組件的 properties 節(jié)點(diǎn) -->
properties: {
  count: Number
}
<!-- 子組件的 wxml -->
<view>子組件種，count值為：{{count}}</view>

8.3、事件綁定

事件綁定用于實現(xiàn)子向父傳值，可以傳遞任何類型的數(shù)據(jù)。使用步驟如下：

在父組件的 js 中，定義一個函數(shù)，這個函數(shù)即將通過自定義事件的形式，傳遞給子組件

<!-- 在父組件定義 syncCount 方法，將來傳遞給子組件，供子組件進(jìn)行調(diào)用 -->
syncCount() {
  console.log(&#39;syncCount&#39;)
}

在父組件的 wxml 中，通過自定義事件的形式，將步驟 1 中定義的函數(shù)引用，傳遞給子組件

<!-- 使用bind:自定義事件名稱（推薦：結(jié)構(gòu)清晰） -->
<my-test count="{{count}}" bind:sync="syncCount"></my-test>
<!-- 使用bind后面直接協(xié)商自定義事件名稱-->
<my-test count="{{count}}" bindsync="syncCount"></my-test>

在子組件的 js 中，通過調(diào)用 this.triggerEvent('自定義事件名稱',{參數(shù)對象})，將數(shù)據(jù)發(fā)送到父組件

<!-- 子組件的 wxml 結(jié)構(gòu) -->
<text>子組件中，count：{{count}}</text>
<button type="primary" bindtap="addCount">+1</button>
# 子組件的 js 代碼
methods: {
  addCount() {
    this.setData({
      count: this.properties.count + 1
    })
    this.triggerEvent(&#39;sync&#39;, { value: this.properties.count })
  }
}

在父組件的 js 中，通過 e.detail 獲取到子組件傳遞過來的數(shù)據(jù)

syncCount(e) {
  this.setData({
    count: e.detail.value
  })
}

8.4、獲取組件實例

可在父組件里調(diào)用 this.selectComponent('id 或 class 選擇器')，獲取子組件的實例對象，從而直接訪問子組件的任意數(shù)據(jù)和方法。

<my-component count="{{count}}" bind:sync="syncCount" class="test" id="test"></my-component>
<button bindtap="getChild">獲取子組件實例</button>
<!-- 按鈕的 tap 事件處理函數(shù) -->
getChild() {
  <!-- 可以傳遞 id選擇器，也可以傳遞 class 選擇器 -->
  const child = this.selectComponent(&#39;.test&#39;)
  <!-- 調(diào)用子組件的 setData 方法 -->
  child.setData({ count: child.properties.count + 1 })
  <!-- 調(diào)用子組件的 addCount 方法 -->
  child.addCount()
}

9、behaviors

9.1、什么是 behaviors

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

9.2、behaviors 的工作方式

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

每個組件可以引用多個 behavior，behavior 也可以引用其它 behavior

9.3、創(chuàng)建 behavior

調(diào)用 Behavior(Object object) 方法即可創(chuàng)建一個共享的 behavior 實例對象，供所有的組件使用

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

9.4、導(dǎo)入并使用 behavior

在組件中，使用 require() 方法導(dǎo)入需要的 behavior，掛載后即可訪問 behavior 中的數(shù)據(jù)或方法，示例代碼如下：

# 使用 require() 導(dǎo)入需要自定義 behavior 模塊
const myBehavior = require('my-behavior')
Component({
  <!-- 將導(dǎo)入的 behavior 實例對象，掛載到 behaviors 數(shù)組節(jié)點(diǎn)中即可生效 -->
  behaviors: [myBehavior]
})

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

10、使用 npm 包

10.1、小程序?qū)?npm 的支持與限制

目前，小程序已經(jīng)支持使用 npm 安裝第三方包，從而來提高小程序的開發(fā)效率。但是，在小程序中使用 npm 包有如下 3 個限制：

• 不支持依賴于 Node.js 內(nèi)置庫的包

• 不支持依賴于瀏覽器內(nèi)置對象的包

• 不支持依賴于 C++ 插件的包

10.2、API Promise 化

• 基于回調(diào)函數(shù)的異步 API 的缺點(diǎn)

默認(rèn)情況下，小程序官方提供的異步 API 都是基于回調(diào)函數(shù)實現(xiàn)的，例如，網(wǎng)絡(luò)請求的 API 需要按照如下的方式調(diào)用：

wx.request({
  method: '',
  url: '',
  data: {},
  success: () => {}
})

缺點(diǎn)：容易造成回調(diào)地獄的問題，代碼的可讀性、維護(hù)性差

• 什么是 API Promise 化

API Promise 化，指定是通過額外的配置，將官方提供的、基于回調(diào)函數(shù)的異步 API，升級改造為基于 Promise 的異步 API，從而提高代碼的可讀性、維護(hù)性、避免回調(diào)地獄的問題

• 實現(xiàn) API Promise 化

在小程序中，實現(xiàn) API Promise 化主要依賴于 minprogram-api-promise 這個第三方的 npm 包。它的安裝和使用步驟如下：

npm install --save minprogram-api-promise
# 在小程序入口文件中（app.js），只需要調(diào)用一次 promisifyAll() 方法
import { promisifyAll } from 'minprogram-api-promise'
const wxp = wx.p = {}
promisifyAll(wx, wxp)

• 調(diào)用 Promise 化之后的異步 API

# 頁面的 .wxml 結(jié)構(gòu)
<button bindtap="getInfo">vant按鈕</button>
# 在頁面的 .js 文件中，定義對應(yīng)的 tap 事件處理函數(shù)
async getInfo() {
  const { data: res } = await wx.p.request({
    method: &#39;GET&#39;,
    url: &#39;&#39;,
    data: {}
  })
}

11、全局?jǐn)?shù)據(jù)共享

11.1、什么是全局?jǐn)?shù)據(jù)共享

全局?jǐn)?shù)據(jù)共享（又叫做：狀態(tài)管理）是為了解決組件之間數(shù)據(jù)共享的問題

開發(fā)中常用的數(shù)據(jù)共享方案有：Vuex、Redux、MobX 等

11.2、小程序中的全局?jǐn)?shù)據(jù)共享方案

在小程序中，可使用 mobx-miniprogram 配合 mobx-miniprogram-bindings 實現(xiàn)全局?jǐn)?shù)據(jù)共享。其中：

• mobx-miniprogram 用來創(chuàng)建 Store 實例對象

• mobx-miniprogram-bindings 用來把 Store 中的共享數(shù)據(jù)或方法，綁定到組件或頁面中使用

安裝 MobX 相關(guān)的包

# 在項目運(yùn)行如下的命令，安裝MobX相關(guān)的包
npm install --save mobx-miniprogram mobx-miniprogram-bindings

注意：MobX 相關(guān)的包安裝完畢之后，記得刪除 miniprogram_npm 目錄后，重新構(gòu)建 npm

創(chuàng)建 MobX 的 Store 實例

import { observable, action } from 'mobx-miniprogram'
export const store = observable({
  // 數(shù)據(jù)字段
  numA: 1,
  numB: 2,
  //計算屬性
  get sum() {
    return this.numA + this.numB
  },
  // actions 方法，用來修改 store 中的數(shù)據(jù)
  updateNumA: action(function(step) {
    this.numA += step
  }),
  updateNumB: action(function(step) {
    this.numB += step
  }),
})

將 Store 中的成員綁定到頁面中

# 頁面的 .js 文件
import { createStoreBindings } from 'mobx-miniprogram-bindings'
import { store } from './store'
Page({
  onLoad() {
    this.storeBindings = createStoreBindings(this, {
      store,
      fields: ['numA', 'numB', 'sum'],
      actions: ['updateNumA']
    })
  },
  <!-- 生命周期函數(shù)--監(jiān)聽頁面卸載 -->
  onUnload() {
    this.storeBindings.destroyBindings()
  }
})

在頁面上使用 Store 中的成員

# 頁面的 .wxml
<view>{{numA}} + {{numB}} = {{sum}}</view>
<van-button type="primary" bindtap="btnHandler" data-step="{{1}}">numA + 1</van-button>
<van-button type="primary" bindtap="btnHandler" data-step="{{-1}}">numA - 1</van-button>
<!-- 按鈕 tap 事件的處理函數(shù) -->
btnHandler(e) {
  this.updateNumA(e.target.dataset.step)
}

將 Store 中的成員綁定到組件中

import { storeBindingsBehavior } from 'mobx-miniprogram-bindings'
import { store } from './store'
Component({
  behaviors: [storeBindingsBehavior],
  storeBindings: {
    store,
    fields: {
      numA: () => store.numA,
      numB: (store) => store.numB,
      sum: 'sum'
    },
    actions: {
      updateNumA: 'updateNumA'
    }
  }
})

在組件中使用 Store 中的成員

# 組件的 .wxml 結(jié)構(gòu)
<view>{{numA}} + {{numB}} = {{sum}}</view>
<van-button type="primary" bindtap="btnHandler" data-step="{{1}}">numA + 1</van-button>
<van-button type="primary" bindtap="btnHandler" data-step="{{-1}}">numA - 1</van-button>
<!-- 按鈕 tap 事件的處理函數(shù) -->
btnHandler(e) {
  this.updateNumA(e.target.dataset.step)
}

【相關(guān)學(xué)習(xí)推薦：小程序?qū)W習(xí)教程】

? ??? ?? ?? ???? ?? ?? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!