微信小程序 自定义组件常规使用

微信小程序中自定义组件使用封装：

官网API文档：https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/wxml-wxss.html

基本使用：

使用代码细节：

1.自定义的组件内容：

//本例以其中一个自定义组件为参考
//wxml文档 wxss样式文件忽略展示...

  
  
     我是componentdemo02组件
  
  

//json 文档
{
  "component": true,
  "usingComponents": { //自定义组件中引用的其他插件组件
    "van-loading": "/miniprogram/vant-weapp/loading/index",
    "van-icon": "/miniprogram/vant-weapp/icon/index",
    "van-tabs": "/miniprogram/vant-weapp/tabs/index",
    "van-tab": "/miniprogram/vant-weapp/tab/index"
  }
}
//js 文档
Component({
  //
  options: {
    multipleSlots: true // 在组件定义时的选项中启用多slot支持
  },
  /**
   * 组件的属性列表
   */
  properties: {

  }, 
  /**
   * 组件的初始数据
   */ 
  data: {
    active: 0
  },
    
  /**
   * 组件的方法列表
   */
  methods: {
    // 返回
    back() {
      wx.navigateBack({
        delta: 1
      })
    },
  }
})

2.引用自定义组件的展示：

//wxml 使用

  
    
     这里是插入到组件slot中的内容 
   
   
  其他内容

  
    
     这里是componentdemo2 first
    
      这里是componentdemo2 last  
  


//json 引入组件
{ 
  "usingComponents": {
    "my-component": "/components/componentdemo01/component-tag-name",
    "my-component2": "/components/componentdemo2/compontentdemo02"
  }
}

//js 没有内容设置时
const app = getApp()
Page({
  data: {

  },
  onLoad: function () { 
  },
})

以上内容仅供简单参考，具体细节请参考官方API文档说明；