小程序组件封装步骤

学习链接：https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/

1、创建一个组件文件夹component包括js、json、wxss、wxml

在json文件里配置

{"component": true}

wxml中是组件要显示的内容

<view class="inner">
{{inteSt.width}}
<swiper>
<block wx:for="{{imgUrls}}">
<swiper-item>
<image src="{{item}}" class="slide-image" width="355" height="150"/>
</swiper-item>
</block>
</swiper>
</view>
<slot></slot>

Component({    properties: {        // 这里定义了innerText属性，属性值可以在组件使用时指定        inteSt: {            type: Object,            value: {'name':'aa'},        },        data_json: {            type: Object,            value: 'default value',        }    },    data: {        // 这里是一些组件内部数据        someData: {},        imgUrls: [            '../../images/2.png',            '../../images/3.png',            '../../images/1.png'        ]    },    methods: {        // 这里是一个自定义方法        customMethod: function(){}    }})2、需要引入组件页面的json中药配置组件名称和路径

{
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "我是汽车维修技师",
"navigationBarTextStyle": "black",
"usingComponents": {
"nav-block-one": "../../components/nav_block/nav_block1",
"nav-block-two": "../../components/nav_block/nav_block2",
"nav-block-three": "../../components/nav_block/nav_block3"
}
}

需要引入组件页面wxml

<nav-block-three inner-text="Some text" inteSt="{{line}}" data_json="{{item.json_data}}"></nav-block-three>

需要引入组件页面的js

Page({
　　data: {
　　line:{
　　width:40,
　　left:0,
　　oldActive:0,
　　swipeIndex:0,
　　scrLeft:0,
　　timeOut:''
}

})

来源：https://www.cnblogs.com/studyh5/p/9863851.html

标签

block