微信小程序的组件和插件

一、基础组件
- 1.主要的基础组件
- 2.基础组件的使用
- - （1）基本用法
  - （2）其他用法
二、自定义组件
- 自定义组件的使用
- - （1）创建组件
  - （2）配置组件
  - （3）使用自定义组件
三、插件
- 1.开发插件（略过）
- 2.使用插件
- - （1）引入插件
  - （2）使用插件
  - - ①在相应页面的json文件中声明
    - ②在相应页面的wxml文件用使用
    - ③在js文件中使用插件的接口

总结微信小程序的组件和插件，分为三个部分：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;

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

微信小程序组件和插件相关推荐

微信小程序-运用painter插件生成海报分享朋友圈--比canvas好用
微信小程序-运用painter插件生成海报–比canvas好用先放插件地址:https://github.com/Kujiale-Mobile/Painter 还有个可视化把海报生成代码的地址:ht ...
android img标签属性_微信小程序组件叠加效果（如 Android 中的添加蒙层）
实现的效果如下: 可以看出这是由image组件和text组件叠加到一块组成的蒙层效果. 在小程序中实现这个效果主要用到z-index属性和position属性 z-index的使用必须是双方组件都设置 ...
微信小程序组件间通信（二）
2019独角兽企业重金招聘Python工程师标准>>> 一.微信小程序中通过事件,实现子组件向父组件中传递数据或操作注:子组件向父组件中传递通过事件传递操作通过事件参数对象det ...
微信小程序组件、路由、组件通信、侦听器
一.微信小程序组件组件就是小程序页面的组成结构,与html在web网页开发中的作用一样,铺设页面.可以参考其他UI库,像elementUI,vantUI组件组件是视图层的基本组成单元. 组件自带一 ...
微信小程序图片裁剪插件image-cropper
image-cropper 一款高性能的微信小程序图片裁剪插件,支持旋转.设置尺寸功能亮点 1.支持旋转支持旋转支持旋转. 2.性能超高超流畅,大图毫无卡顿感. 3.可以设置导出图片尺寸. 4.自由 ...
微信小程序使用wxparse插件，渲染文章不换行问题
微信小程序使用wxParse插件渲染富文本内容,不换行显示,影响阅读,我的解决方法:在wxParse.wxss中加上如下样式:(在我的小程序里面是有效的) view{/* word-break:bre ...
微信小程序接入第三方插件腾讯位置服务地图选点
微信小程序接入第三方插件腾讯位置服务地图选点 1.在小程序服务平台中添加"腾讯位置服务地图选点"插件 1.在小程序服务平台中添加"腾讯位置服务地图选点"插件微 ...
织梦微信小程序一键生成插件(资讯案例模板），整合织梦CMS一切数据信息
<织梦微信小程序一键生成插件(资讯模板)>是织梦58发布的便于生成微信小程序的插件,让用户更方便生成资讯类小程序. 版本:1.1(当前1.0版本,下载安装之后可以进行更新升级) 使用该插件 ...
【微信小程序】三、微信小程序组件的基本使用
五.微信小程序组件微信小程序框架为开发者提供了一系列组件,开发者可以通过组合这些组件进行快速开发. (1)微信小程序组件基础概念什么是组件? 组件是视图层的基本组成单元. 组件自带一些功能与微信风 ...

微信小程序组件和插件