小程序组件封装步骤

Posted 2021-01-15 金牛座的女孩

学习链接：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>

js

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:‘‘
}

})