開發(fā)小程序的時(shí)候驳癌，項(xiàng)目需求要用到一些自定義樣式恐锦，查閱了官方文檔往果，微信小程序從1.6.3開始，對(duì)于自定義組件這塊有了比較大的改動(dòng)一铅，文檔比以前全陕贮，比以前詳細(xì)了，現(xiàn)在小程序支持簡(jiǎn)潔的組件化編程潘飘，可以將頁(yè)面的功能模塊抽象成自定義組件肮之，以便在不同的頁(yè)面復(fù)用，提高自己的代碼可讀性卜录，提高開發(fā)效率戈擒，降低自己的維護(hù)成本！
在項(xiàng)目開發(fā)中用到了類似iOS的彈窗組件艰毒，基本效果如下：
具體實(shí)現(xiàn)如下：
第一步：
我們初始化一個(gè)小程序筐高，并新建一個(gè)?components?文件夾，用于存放我們以后開發(fā)中的所用組件丑瞧，今天我們要實(shí)現(xiàn)的是一個(gè)彈框組件柑土，因此，我們?cè)?components?組件中新建一個(gè)alertview?文件夾來(lái)存放我們的彈窗組件绊汹，在alertview下右擊新建?Component?并命名為?alertview?后稽屏，會(huì)生成對(duì)應(yīng)的?json wxml wxss js?4個(gè)文件，也就是一個(gè)自定義組件的組成部分西乖，此時(shí)項(xiàng)目結(jié)構(gòu)應(yīng)該如下圖所示：
第二步：
組件初始化工作準(zhǔn)備完成狐榔，接下來(lái)設(shè)置一下相關(guān)配置，首先我們需要聲明自定義組件浴栽，將 alertview.json 中 component 字段設(shè)置為 true（現(xiàn)在新建component文件時(shí)荒叼，.json中的component 字段默認(rèn)為 true，不需要設(shè)置）典鸡，不過(guò)還是看一下被廓，避免出錯(cuò)。
第三步：
配置完成啦萝玷，接下來(lái)我們開始寫彈窗模板嫁乘，在 alertview.wxml 文件中加入彈窗組件模板昆婿，在 alertview.wxss 文件中加入彈窗組件樣式， 寫法與寫頁(yè)面的寫法一樣蜓斧，就直接貼代碼啦~
alertview.wxml文件如下：
alertview.wxss 文件如下圖：
第四步：
樣式寫完啦仓蛆，具體實(shí)現(xiàn)就是在?alertview.js 中。alertview.js 是自定義組件的構(gòu)造器挎春，是使用小程序中?Component?構(gòu)造器生成的看疙，調(diào)用?Component?構(gòu)造器時(shí)可以用來(lái)指定自定義組件的屬性、數(shù)據(jù)直奋、方法等能庆，具體的細(xì)節(jié)可以參考一下小程序官方文檔。
下面代碼通過(guò)注釋解釋構(gòu)造器中的一些屬性使用：
第五步：
自定義組件完成啦~接下來(lái)開始使用我們自定義的組件：
首先需要在使用的文件 xxx.json 文件中引入組件脚线，(注：我在item文件中使用搁胆，在item.json中引入) 引入代碼就是圈起來(lái)的位置，如下圖:
然后在 item.wxml中引入邮绿，并增加一些自定義值渠旁，如下圖：
最后，就是 item.json 文件的配置啦~ 如下圖：
測(cè)試一下吧船逮！
