1.在頂級目錄下建立一個components文件夾，在這個文件夾下再建立一個文件夾，例如叫作add。

2.右擊add點擊新建component,會生成4個文件

3.在組件中編寫wxml頁面、wxss和page一樣，hidden="{{!isshow}}"是讓組件先隱藏起來，需要時再顯示。

4.編寫js文件

? ? ? ? ? ? ①properties屬性:可以設(shè)置默認(rèn)值，也可以由參數(shù)傳遞，如下圖設(shè)置默認(rèn)值

? ? ? ? ? ? ? ? ?②data,組件的初始數(shù)據(jù)，如下圖設(shè)置，先讓組件隱藏起來

? ? ? ? ? ? ? ? ?③method，組件中的方法，不帶下劃線為共有方法，帶下劃線為私有方法，由外部定義觸發(fā)事件,待會會講到如何觸發(fā)

5.在頁面引入component

? ? ? ? ? ? ?①在頁面json文件中進(jìn)行如下配置，定義引入的組件名為‘tc’

? ? ? ? ? ? ? ②在wxml頁面引入組件'tc',并且可以傳參，不傳則使用properties定義的默認(rèn)值，并使用了事件監(jiān)聽bind自定義函數(shù)

? ? ? ? ? ? ?③在js文件中的onReady方法中實例化組件，this.tc是一個組件對象

? ? ? ? ? ? ?④使用組件中的公有和私有方法

? ? ? ? ? ? ? ? ? ? ? ? ? ?使用公有方法顯示彈窗：

? ? ? ? ? ? ? ? ? ? ? ? ? 自定義私有方法

?最后效果