# 小程序組件化之一 文檔說明： > 從小程序基礎庫版本 1.6.3 開始，小程序支持簡潔的組件化編程。目前是1.7基礎庫了 > 使用組件化的原因是使用vue習慣了 > 小程序的組件文件和普通的頁面一樣，都有js,wxss,wxml,json文件 * 第一步 設置組件的json文件 ~~~ { "component": true, "usingComponents": {} } ~~~ 將組件文件的json的component字段設置成true, usingComponents是使用其他組件的字段 * 第二步 編寫wxml和wxss文件 wxml文件內容： ~~~ <view> avator 組件測試{{username}} </view> ~~~ wxss文件內容為空 * 第三步 注冊組件 ~~~ Component({ /** * 組件的屬性列表 */ properties: { username: { type: String, value: "kingends" } }, /** * 組件的初始數據 */ data: { }, /** * 組件的方法列表 */ methods: { } }) ~~~ * 第四步 使用已經注冊的組件 修改要使用組件的json配置文件,添加下面字段， 組件路徑是相對路徑 ~~~ "usingComponents": { "avator": "../common/avator/avator" } ~~~ 在wxml文件中使用組件 ~~~ <!-- 個人中心首頁 --> <!-- 頭像 --> <avator username="luckys" /> ~~~