AXZ博客
给你海洋的知识 AXZLK.COM!

易语言怎么源码改变成模块(c语言源码apk源码)

开发小程序的朋友应该知道,虽然小程序为我们开发者提供了很多组件,方便我们快速开发,但是有时候,可能是因为业务需要或者个人对技术的追求……,种种原因,促使我们不得不不要自己定义我们需要或想要的组件。

自定义组件除了可以满足我们的业务需求外,还有很多好处,比如可以让我们将复杂的页面拆分成多个低耦合的模块,复用组件可以提高代码的复用性,提高开发效率,还可以帮助代码维护等等。一时半会说不完,直入正题。

本文记录了自己在开发中一步步自定义组件的过程和一些总结,希望对大家有所帮助! 如果觉得有收获易语言怎么源码改变成模块,希望大家转发关注,动动手指帮忙点个赞。 谢谢!

坐稳~

制作自定义组件,我们先设定一个小目标,比如我们在小程序中经常用到的弹窗组件,基本效果图如下

c语言源码apk源码_易语言机读语言模块_易语言怎么源码改变成模块

如何自定义组件?

新建一个基础项目,然后为自定义组件新建一个目录components,并在这个目录结构下新建一个dialog文件夹用来放我们这次的自定义组件(如果以后要复用直接复制文件夹即可)。

自定义组件一般需要由.json、.wxml、.wxss、.js文件组成,和普通页面一样。 其中.js文件的编写是重点,也是与页面的区别。 其他三个文件的写法和我们类似。 平时写页面没有太大区别。

我们在dialog文件夹下新建一个对话框页面来自定义我们的组件,是一个新的页面! 但是建好之后,记得把.js文件里的代码清空。 原因将在后面解释。 这也是自定义组件和普通页面的区别。 我们稍后会添加代码; 如果你不建页面,你也可以单独创建4个不同扩展名但相同文件名的空文件。 我推荐使用创建页面的方式,因为方便快捷,当然因人而异。

新建基础项目时,index页面可能缺少index.json文件,需要自己创建。 新建的基础工程也会有一个logs页面,我们可以选择删除或者保留,这次不用了。

创建的目录结构,即项目结构如下,我们只需要往里面添加代码即可

易语言机读语言模块_易语言怎么源码改变成模块_c语言源码apk源码

自定义一个组件,我们需要先在dialog.json文件中声明,告诉编译器:嘿,我要开始自定义组件了

自定义组件只有几种类型,即现有组件的集合、新组件、组合和修改后的排列。

然后就可以写界面和风格了,和平时的界面风格没什么区别。 这次我只是利用现有的组件组合成新的组件,并根据需要进行排列。 界面写在dialog.wxml中,样式写在dialog.wxss中,照常写就行了。

界面如下:

易语言机读语言模块_易语言怎么源码改变成模块_c语言源码apk源码

这个界面不难理解。 相信大家一看就明白了。 标题、信息、确定按钮文字、取消按钮文字都是数据绑定的,我们需要传入,想显示什么就显示什么,这样就灵活多了,中间有个短的分割线中间。

样式如下:

易语言机读语言模块_易语言怎么源码改变成模块_c语言源码apk源码

注意:ID 选择器、属性选择器和标签名称选择器不应在样式文件中使用。 wxss,常用的类选择器。

接下来是最难的部分:.js 文件

在自定义组件的js文件中,需要使用Component()来注册组件,这也是之前删除.js文件中代码的原因,也是与页面最大的区别,在页面中我们可以为组件提供一些内部数据、属性定义和自定义方法等。

组件的内部数据和属性将用于组件wxml的渲染,方法用于事件处理或编写业务逻辑。

其中,数据部分与我们在页面中的含义和用法一致; 我们可以指定properties属性的类型和默认值,属性值也可以从组件外部传入

如上,组件中的标题是“Test”而不是默认的“Title”。 看完如何使用,回过头来看看是怎么回事。

还有method方法,和我们在页面中使用的方法是一样的。

这里我们将重点关注这个触发事件。 使用 this.triggerEvent( ) 可以触发一个事件。 什么情况呢?如果我们在触发事件中绑定事件,那么触发事件发生,绑定的事件也会发生(不知道描述的对不对),比如

举个例子来说明

我们要注意第一个参数和第二个参数。 前者是事件名,指定需要触发的事件,比如cancle(可以随意自定义),使用的时候可以绑定,比如:bind:cancle 或者bindcancle的格式可以正确调用,推荐使用前者。 而后者是一个detail对象,我们经常用到这个参数! 它用于将我们要告诉调用者的数据传递给调用者。 它是组件创建者和调用者之间的桥梁。 这可以解决很多问题。 我希望每个人都熟悉它。 以后使用自定义组件的时候就会知道这有多重要; 而选项参数很少使用。

具体可以查看官方文档。 官方文档是最好的资料,但不是最合适的。 至于为什么这么说,相信很多开发者都深有体会。

这样,当代码执行到this.triggerEvent()时,就会触发指定的取消事件。

在使用组件时,我们将事件绑定为cancel_event(可以随意自定义),例如:xx.wxml中的代码

易语言机读语言模块_易语言怎么源码改变成模块_c语言源码apk源码

所以如果我们在 .js 中定义 cancel_event 函数

然后该函数将被调用。 也就是说执行this.triggerEvent()代码时,会输出index cancel。 这一系列的关系,希望我能解释清楚。 如有不明白或错误之处,请在下方留言。

一定要在定义组件和使用组件和展示效果之间来回看一下,这样才能更好更快的理解。

如何使用自定义组件?

我们自定义组件的目的是提高代码的可重用性,或者满足我们的需求。 粗略一点就是“用”。 定义好组件后,我们如何引用这个自定义组件呢?

在 index.json 中声明告诉编译器:嘿,我要使用一个名为 xx 的自定义组件放在 xx 中

易语言怎么源码改变成模块_c语言源码apk源码_易语言机读语言模块

易语言怎么源码改变成模块_易语言机读语言模块_c语言源码apk源码

这里的access-dialog就是我们想要的组件的名字,可以自由定义。 你可以随便叫它,但最好是有意义的命名。 而后者就是指定这个自定义组件的目录。 我这里给的是绝对路径,也可以是相对路径,喜欢就好。

有了组件名,我们就可以像其他组件一样使用了,下面的代码我们会仔细了解如何使用

易语言怎么源码改变成模块_易语言机读语言模块_c语言源码apk源码

就是这么好申请,简单粗暴! 取消和确认事件也被绑定。

在index.js文件中写好对应事件的业务逻辑,这样我们就基本学会了如何自定义组件以及自定义组件的使用

易语言怎么源码改变成模块_c语言源码apk源码_易语言机读语言模块

我们分别设置组件的标题和信息,在两个按钮上设置文本易语言怎么源码改变成模块,如下代码,但是我建议后面再进行数据绑定,这样我们只需要在js文件中修改即可,并且我们也可以用代码来控制这些值,我们一般也是这样做的,而不是固定在页面中

这样我们就可以自定义控件的标题、信息、两个按钮的文字以及点击后的业务逻辑。

一切都可以随心所欲定制! 如果你自己写了一个组件,想让别人使用,我们只需要共享这个组件所在的文件夹即可。 当然,如果你在你的组件中引用了其他组件,你也必须将它们一起复制,并使用全局样式!

如果您需要更多关于小程序的技术文章和学习资料,如电子书、视频等,请关注公众号:MoTec,在公众号回复相关文章即可获取。

/r/NjsAGLPEtO7Lrfd7924k(二维码自动识别)

如果大家需要这个小demo参考,可以在公众号后台回复“小程序自定义组件-弹窗”获取。 如果您觉得这篇文章不错,期待您的关注和评论,不妨点个赞。

赞(0)
未经允许不得转载:AXZ博客 » 易语言怎么源码改变成模块(c语言源码apk源码)
分享到

评论 抢沙发

登录

找回密码

注册