# 小程序组件化之一 文档说明： > 从小程序基础库版本 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" /> ~~~