第12课 微信小程序Component构造器自定义组件：
1.自定义创建组件：
2.在组件的my-component.json文件声明组件
my-component.json全部代码：
{ "component": true,}3.设置组件的my-component.js代码：
my-component.js全部代码：
Component({ externalClasses: ['user-class'], //设置外部传递class类名 properties: { // 这里定义了属性名，属性值可以默认 也可以在组件使用时传入 username: { type: String, //定义传值的类型 value: '用户名', //初始值 }, sign: { type: String, //定义传值的类型 value: '这家伙很赖，什么也没写！', //初始值 }, }, data: { // 这里是一些组件内部数据 someData: {} }, methods: { // 这里是一个自定义方法 customMethod: function () { } }})4.设置组件的my-component.wxml代码：
my-component.wxml全部代码
!-- 这是自定义组件的内部WXML结构 --view class="user-class"用户：{{username}}/viewview class="inner"个性签名：{{sign}}/view!-- 这是组件的自定义插槽 用来接收页面引入组件时 对组件里面增加的标签--slot/slot5.定义组件样式的my-component.wxss代码：
my-component.wxss全部代码
/* 这里的样式只应用于这个自定义组件 也可以通过设置隔离修改*/.inner { color: red;}下面是引用自定义组件的index页面代码：
index.js全部代码 //这里面不用写代码 默认就行
const app = getApp()Page({ data: { }, onLoad: function () { },})index.json全部代码//注册引入的组件路径，注册后才能引入组件
{ "usingComponents": { "my-component": "/components/my-component" }}通过对username传值而不对sgin传值做对比
通过外部设置css样式传入class名改变组件样式效果
index.wxml全部代码
view !-- 以下是对一个自定义组件的引用 -- !-- 通过对username传值而不对sgin传值做对比 -- !-- 通过外部设置css样式传入class名改变组件样式效果 -- my-component username="小明" user-class="userclass" !-- 这个button标签被组件内写好的插槽接收 -- button 点击签到/button /my-component/view以下是index.wxss样式代码：
index.wxss全部代码
.userclass{ color: green;}运行效果图如下：
