在項(xiàng)目的根目錄中，鼠標(biāo)右鍵，創(chuàng)建 components -> test 文件夾。在新建的 components -> test 文件夾上，鼠標(biāo)右鍵，點(diǎn)擊“新建 Component”，鍵入組件的名稱之后回車，會(huì)自動(dòng)生成組件對(duì)應(yīng)的 4 個(gè)文件，后綴名分別為 .js，.json， .wxml 和 .wxss。

為了保證目錄結(jié)構(gòu)的清晰，建議把不同的組件，存放到單獨(dú)目錄中，例如：

上圖中在頁(yè)面的 .json 配置文件中引用組件的方式，叫做“局部引用”。使用局部引用的示例代碼如下：

//在頁(yè)面的.json文件中，引入組件
{
   "usingComponents": {
     "my-test1": "/components/test1/test1"
    }
}

//在頁(yè)面的.wxml文件中，使用組件
<my-test1></my-test1>

在 app.json 全局配置文件中引用組件的方式，叫做“全局引用”。全局引用組件的示例代碼如下：

//在 app.json 文件中，引入組件
{
"pages"：[ /* 省略不必要的代碼 */ ]，
"window":{ /* 省略不必要的代碼 */ ]，
"usingComponents":{
  "my-test2": "/components/test2/test2"
 }
}

//在頁(yè)面的.wxml文件中，使用組件
<my-test2></my-test2>

我們可以根據(jù)組件的使用頻率和范圍，來(lái)選擇合適的引用方式，如果某組件在多個(gè)頁(yè)面中經(jīng)常被用到，建議進(jìn)行“全局引用”，如果某組件只在特定的頁(yè)面中被用到，建議進(jìn)行“局部引用”。

組件和頁(yè)面的區(qū)別

從表面來(lái)看，組件和頁(yè)面都是由 .js、.json、.wxml 和 .wxss 這四個(gè)文件組成的。但是，組件和頁(yè)面的 .js 與 .json 文件有明顯的不同：

組件的 .json 文件中需要聲明 "component": true 屬性。

組件的 .js 文件中調(diào)用的是 Component() 函數(shù)。

組件的事件處理函數(shù)需要定義到 methods 節(jié)點(diǎn)中。