xcss

微信小程序自定义组件

非 Y 不嫁゛ 提交于 2020-12-05 11:11:52
微信小程序自定义组件 一. 创建自定义组件 类似于页面,一个自定义组件由 json wxml wxss js 4个文件组成 二.组件声明 首先需要在自定义组件所在的 json 文件中进行自定义组件声明 { "component": true } 三.编辑组件 同时,还要在 wxml 文件中编写组件模板,在 wxss 文件中加入组件样式 wxml与xcss和普通页面设置差不多 wxml <!-- 这是自定义组件的内部WXML结构 --> <view class="inner"> {{innerText}} <slot></slot> </view> xcss /* 这里的样式只应用于这个自定义组件 */ .inner { color: red; } js文件设置有点区别 Component({ properties: { // 这里定义了innerText属性,属性值可以在组件使用时指定 innerText: { type: String, value: 'default value', } }, data: { // 这里是一些组件内部数据 someData: {} }, methods: { // 这里是一个自定义方法,方法必须写在methods内 customMethod: function(){} } }) 四.再使用该组件的组件页面 首先要在页面的 json