微信小程序组件和插件

总结微信小程序的组件和插件，分为三个部分：1、基础组件；2、自定义组件；3、插件。

一、基础组件

1.主要的基础组件

介绍微信小程序所有的基础组件，见微信小程序文档微信小程序文档-组件

2.基础组件的使用

（1）基本用法

以表单组件form为例，在相应的页面wxml中写上组件标签，即可显示，例如

<form></form>

在标签内写入对应的属性名及属性值，则表单就具有相应的属性

<form catchsubmit="formSubmit" catchreset="formReset"></form>

formSubmit和formReset都是自定义的函数名。此时，form表单具有”提交表单”和“重置表单”两个功能。

（2）其他用法

标签之间，可以加入字符串、其他组件标签。例如

<form>表单</form>

<form>
	<view>表单</view>
</form>

<form>
	<button></button>
</form>

以上依次为标签之间添加字符串、view组件和button组件。

二、自定义组件

自定义组件的使用

（1）创建组件

components文件夹下存放所有的组件文件夹，cloudTipModal是其中一个自定义组件。每一个组件文件夹内，也包含json、js、wxss、wxml四个文件。

（2）配置组件

1.需要在组件文件夹下的json文件中声明此文件夹为组件。

{
  "component": true
}

2.在wxml中编写组件模板，在 wxss 文件中加入组件样式。
3.在自定义组件的 js 文件中，需要使用 Component() 来注册组件，并提供组件的属性定义、内部数据和自定义方法。

Component({
  properties: {
    // 这里定义了innerText属性，属性值可以在组件使用时指定
    innerText: {
      type: String,
      value: 'default value',
    }
  },
  data: {
    // 这里是一些组件内部数据
    someData: {}
  },
  methods: {
    // 这里是一个自定义方法
    customMethod: function(){}
  }
})

以上为微信小程序官方文档中提供的示例，具体的构造方法见Component构造器，详细的参数含义和使用见Component参考文档

（3）使用自定义组件

使用组件时，需要在相应的页面的json文件中声明：

{
  "usingComponents": {
    "cloud-tip-modal": "/components/cloudTipModal/index"
  }
}

cloud-tip-modal是定义的组件标签名（自己定义，可以和组件文件夹名不同！），“：”后面是组件文件夹的路径。以下是在相应的页面中，wxml中的具体写法。

<cloud-tip-modal showUploadTipProps="{{showUploadTip}}"></cloud-tip-modal>

三、插件

1.开发插件（略过）

2.使用插件

（1）引入插件

使用插件前，使用者要在 app.json 中声明需要使用的插件

{
  "plugins": {
    "myPlugin": {
      "version": "1.0.0",
      "provider": "wxidxxxxxxxxxxxxxxxx"
    }
  }
}

“myPlugin”由使用者自定义，无需和插件开发者保持一致或与开发者协调。在后续的插件使用中，该引用名将被用于表示该插件。

（2）使用插件

使用插件时，插件的代码对于使用者来说是不可见的。为了正确使用插件，使用者应查看插件详情页面中的“开发文档”一节，阅读由插件开发者提供的插件开发文档，通过文档来明确插件提供的自定义组件、页面名称及提供的
js 接口规范等。——微信开发者文档

使用插件，是使用的插件中提供的自定义组件和页面。所以，引入插件后，还需要使用插件中的自定义组件。
插件中组件的使用和自定义组件的使用非常类似。

①在相应页面的json文件中声明

{
  "usingComponents": {
    "hello-component": "plugin://myPlugin/hello-component"
  }
}

这里是在使用myPlugin插件中的hello-component组件

②在相应页面的wxml文件用使用

使用插件的自定义组件：

<hello-component></hello-component>

使用插件的跳转页面：

<navigator url="plugin://myPlugin/hello-page">
  Go to pages/hello-page!
</navigator>

③在js文件中使用插件的接口

使用插件的 js 接口时，可以使用 requirePlugin 方法。例如，插件提供一个名为 hello 的方法和一个名为 world 的变量，则可以像下面这样调用：

var myPluginInterface = requirePlugin('myPlugin');

myPluginInterface.hello();
var myWorld = myPluginInterface.world;

更多内容，还需要参考微信小程序文档-使用插件