学习链接：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:‘‘
}
})
原文地址：https://www.cnblogs.com/studyh5/p/9863851.html