内容简介:当微信官方提供的组件,不能满足我们的需求时,且使用系统组件构造模板 wxml 较为复杂,我们就可以考虑使用微信官方提供的组件架构,定义符合我们需求的组件。自定义的组成和小程序的一般页面的结构一样。由:js : 负责组件的逻辑。 json: 负责定义组件的配置。 wxml: 负责定义组件的布局。 wxss: 负责组件的样式。
当微信官方提供的组件,不能满足我们的需求时,且使用系统组件构造模板 wxml 较为复杂,我们就可以考虑使用微信官方提供的组件架构,定义符合我们需求的组件。
2. 自定义组件组成
自定义的组成和小程序的一般页面的结构一样。由: js\json\wxml\wxss
四个文件构成,其中:
js : 负责组件的逻辑。 json: 负责定义组件的配置。 wxml: 负责定义组件的布局。 wxss: 负责组件的样式。
我将按照如下顺序,定义一个简单的组件。
1、编写组件的页面,仅仅显示一行文字,以演示建立和编写组件的文件。 2、引用上一步编写的组件,以演示如何引用自定义组件。 3、编写组件逻辑结构,实现组件数据由 js 逻辑控制,组件内部实现响应用于操作事件。 4、提供接口用于回调组件内部事件。 5、提供方法以便外部直接调用使用组件。 复制代码
二、实现自定义组件
1、新建组件
在定好的目录下右键新建一个 Component 目录,系统会自动帮助我们创建好自定义组件的四个必要文件,步骤与结果如图一、二所示。
下面我们来编写组件 wxml 文件内容。
// test-component.wxml 的内容 <text>这是自定义组件</text> 复制代码
组件 json 内容 如果是使用微信开发者 工具 建立的 component 文件,那么 ide 会帮助我们自动创建如下代码(手动的自己添加就好):
{ "component": true, "usingComponents": {} } // component 表明组件的身份。 // usingComponents 组件引用的子组件(组件是可以使用别的自定义组件的,系统组件无需声明) 复制代码
组件 js 内容,ide 会自动创建如下代码:
Component({ /** * 组件的属性列表 */ properties: { }, /** * 组件的初始数据 */ data: { }, /** * 组件的方法列表 */ methods: { } }) 复制代码
组件的 wxss 我们可以暂时不用理会,就是一般的样式代码。
到这里我们的一个简单的自定义组件就已经完成,下面进行引用。
2、使用自定义组件
使用自定义组件只需要两步:
第一、在需要引用的页面 json 配置代码中添加如下配置:
"usingComponents": { "test-1": "/pages/component/test-component" } // usingComponents 为依赖组件的配置项 // test-1 为依赖组件的别名(可以随意定),在使用页面的布局中使用此别名。 // /pages/component/test-component 为依赖组件的路径(无序添加后缀)。 复制代码
第二、在对于布局页面中使用,和使用系统组件一样,上一步定的 「别名」作为标签名。
<!-- index.wxml 文件内容 --> <view> <test></test> </view> 复制代码
保存重新编译之后,页面就出现了我们自定义组件的内容。
3、实现响应用户操作事件
这一步将实现用户的点击事件。在用户点击自定义组件之后,将改变自定义组件的文字内容。
第一、捕获自定义组件的点击事件。
自定义组件的事件处理和在一般页面一样, catchtap
对应的事件,然后在 js 文件中定义好对应的处理函数。代码如下:
<!-- test-component.wxml 的内容 --> <text catchtap='onClick'>{{text}}</text> 复制代码
// pages/component/test-component.js Component({ /** * 组件的初始数据 */ data: { text:'这是初始文字' }, methods:{ // 方法一定要放在这个里面 /** * 响应用于点击的方法 */ onClick: function (e) { // 设置数据也是采用数据判定的方法,和一般页面一致。 this.setData({ text: '点击了' }); } } }) 复制代码
效果如下
4、在外部监听上一步的文字改变时间。
这一部分主要的代码还是位于自定义组件的 js 文件内。
第一、在自定义组件内部触发一个组件的自定义事件,代码如下:
// pages/component/test-component.js Component({ /** * 组件的初始数据 */ data: { text:'这是初始文字' }, methods:{ /** * 响应用于点击的方法 */ onClick: function (e) { // 设置数据也是采用数据判定的方法,和一般页面一致。 this.setData({ text: '点击了' }); // 自定义一个组件触发事件 this.triggerEvent('onTextChange'); } } }) 复制代码
第二、在引用组件的页面(wxml)捕获这个事件
<!-- index.xml 文件内容 --> <view> <test catch:onTextChange='onTextChange'></test> </view> 复制代码
第三、在引用组件页面 js 逻辑内建立这个捕获事件
// index.js 页面内容 Page({ data: { }, onLoad: function () { }, // 捕获事件 onTextChange: function(){ wx.showToast({ title: '捕获事件', }) } }) 复制代码
效果如下:
5、自定义组件提供给外部调用的方法
第一步、编写对外提供的方法
这里给外部提供一个改变文字内容的方法,代码如下:
// pages/component/test-component.js Component({ /** * 组件的初始数据 */ data: { text:'这是初始文字' }, methods:{ /** * 响应用于点击的方法 */ onClick: function (e) { // 设置数据也是采用数据判定的方法,和一般页面一致。 this.setData({ text: '点击了' }); // 自定义一个组件触发事件 this.triggerEvent('onTextChange'); } }, // 这个方法是给外部调用,用来改变这个组件的文字内容 setText: function (text) { this.setData({ text: text }); } }) 复制代码
第二步、通过 id 获取组件实例,使用组件实例直接调用组件方法
代码如下:
Page({ data: { }, onLoad: function () { }, // 捕获事件 onTextChange: function(){ wx.showToast({ title: '捕获事件', }) }, // 响应点击事件 change:function(e){ // 使用官方提供的 selectComponent 方法通过 id 获取组件实例 var mComponent = this.selectComponent('#mComponent'); // 通过实例,直接调用组件内部提供的方法 mComponent.setText('外部调用了'); } }) 复制代码
<!-- index.wxml 内容 --> <view> <test catch:onTextChange='onTextChange' id='mComponent'></test> <button catch:tap='change'>点击改变文字内容</button> </view> 复制代码
最终效果如下:
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- Vue自定义组件(简单实现一个自定义组件)
- angular自定义组件-UI组件篇-switch组件
- 自定义react数据验证组件
- 关于自定义组件的那些事儿
- ReactNative学习笔记(四)之自定义文本组件与Image组件
- 小程序档案馆——自定义组件
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
微机原理与接口技术
李文英、李勤、刘星、宋蕴新 / 清华大学出版社 / 2001-9 / 26.00元
《高等院校计算机应用技术规划教材•应用型教材系列•微机原理与接口技术》是“高职高专计算机系列教材”之一。全书包括微机原理、汇编语言、接口技术三部分内容。微机原理部分讲述了80x86的内部结构及工作原理、半导体存储器及其系统、微型机总线结构等。汇编语言部分讲述了指令系统、编程技巧。接口技术部分讲述了中断系统、中断控制器、并行接口、串行接口、DMA控制器、定时器,以及A/D、D/A转换器等常用芯片的硬......一起来看看 《微机原理与接口技术》 这本书的介绍吧!