微信小程序：1.自定义组件Component

1.自定义组件

组件化的概念，大家都不太陌生，简单点来说，就是将一些常用的，比如一个页面的搜索框。可能很多页面都会用到，这时候，就可以将它封装成为一个组件，最近由于要开始微信小程序的开发，所以就开始查漏补缺，发现自己之前刚入门时候，没有具体的去看组件化，所以现在就写个demo给大家看看

2.基本结构

首先，最基本的文件结构，应该是这样子的：

其中的component就是我们用于存放组件的文件夹（俗称约定），其中，我创建一个名字为scinput的page，

大体的文件还是那四个，其中，我们要注意的是，文档中（详见下方参考来源）明确指出

因此，我们最基本需要将生成的scinput/index.js中的page修改为component，修改后大概是这样的

Component({
  properties: {
    initvalue: {
      type: String,
      value: '没有输入默认值'
    }
  },
  methods:{
  scinput: function(data) {
    this.triggerEvent("scinputevent",data)
  }}
})

第二个是index.wxml

<view>
  <input bindinput='scinput' type='text' placeholder='请在这儿输入' value='{{initvalue}}' />
  <view  style='width:200px;height:200px;background-color:red'></view>
  <slot></slot>
</view>

暂时不跟大家提及上面提出的功能，大体上，我们的父页面也是需要粘贴初index.wxml以及index.js文件的。其次，在文档中描述到

 

以及给出的demo

所以，我们还需要在父级页面使用到json文件的修改的

无非就是添加对组件的引用而已

大体是这样

{
  "usingComponents": {
    "scinput":"/component/SCinput/index"
  }
}

相对应的，我们的js，以及xwml大概是这样的：

Page({
  indexinputevent: (data) => {
    console.log(`%c ${JSON.stringify(data.detail.detail.value)}`, `font-size:20px`)
  }
})

 

<view>
  <scinput bind:scinputevent="indexinputevent" initvalue='测试文本'>
    <text>这个应该会在slot的范围内显示</text>
  </scinput>
</view>

结合上面的两个`组件`，上面大体分出三个功能

1.slot传值，大家应该有学习过vue，所以具体都不太描述。以及对name的使用之类的。不再做详细介绍

2.使用properties来进行传值，就类似使用我们的vue中的props

3.事件的传递，使用triggerEvent进行事件的传递。

最后补上效果的gif图片

上方简单版本的代码具体实现的是上面的三个功能，作为最基本的，还需要有生命周期之类的。后面有时间再补充上来

更新时间：2019-08-12 22:34

然后不太明白的留言，心情好的访问下我的github给个星星

案例：github上的一个需要小星星的地址

参考来源：

微信小程序-component自定义组件1

微信小程序-component自定义组件2