CN111208997A - 一种基于微信小程序的动态图文添加组件及其实现方法 - Google Patents
一种基于微信小程序的动态图文添加组件及其实现方法 Download PDFInfo
- Publication number
- CN111208997A CN111208997A CN201911396865.3A CN201911396865A CN111208997A CN 111208997 A CN111208997 A CN 111208997A CN 201911396865 A CN201911396865 A CN 201911396865A CN 111208997 A CN111208997 A CN 111208997A
- Authority
- CN
- China
- Prior art keywords
- text
- image
- component
- editing
- page
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
- G06T11/00—2D [Two Dimensional] image generation
- G06T11/60—Editing figures and text; Combining figures or text
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Software Systems (AREA)
- General Engineering & Computer Science (AREA)
- Human Computer Interaction (AREA)
- Information Transfer Between Computers (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
本发明公开了一种基于微信小程序的动态图文添加组件及其实现方法，涉及小程序开发技术领域。包括动态图文组件，动态图文组件包括图文展示模块、图片上传模块以及文字编辑模块，图文展示模块、图片上传模块以及文字编辑模块的输出端电连接有动态图文组件的输入端。该基于微信小程序的动态图文添加组件及其实现方法，优化了图文组件中用户对文字进行编辑的体验，在代码层面上开发人员不需要关注组件的内部实现，对组件只需要进行传递回显数据和监听数据外传两个操作即可，大大降低了使用该组件的开发人员的工作量和难度，同时也实现了文字编辑页面和文字显示之间，使用该组件和组件之间的代码结构的解耦。
Description
技术领域
本发明涉及小程序开发技术领域，具体为一种基于微信小程序的动态图文添加组件及其实现方法。
背景技术
微信(WeChat)是腾讯公司于2011年1月21日推出的一个为智能终端提供即时通讯服务的免费应用程序，由张小龙所带领的腾讯广州研发中心产品团队打造，微信支持跨通信运营商、跨操作系统平台通过网络快速发送免费(需消耗少量网络流量)语音短信、视频、图片和文字，同时，也可以使用通过共享流媒体内容的资料和基于位置的社交插件“摇一摇”、“漂流瓶”、“朋友圈”、”公众平台“、”语音记事本“等服务插件，微信小程序，简称小程序，英文名Mini Program，是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用。
全面开放申请后，主体类型为企业、政府、媒体、其他组织或个人的开发者，均可申请注册小程序，小程序、订阅号、服务号、企业号是并行的体系，小程序是一种不用下载就能使用的应用，也是一项门槛非常高的创新，经过将近两年的发展，已经构造了新的小程序开发环境和开发者生态。小程序也是这么多年来中国IT行业里一个真正能够影响到普通程序员的创新成果，已经有超过150万的开发者加入到了小程序的开发，与我们一起共同发力推动小程序的发展，小程序应用数量超过了一百万，覆盖200多个细分的行业，日活用户达到两个亿，小程序还在许多城市实现了支持地铁、公交服务。小程序发展带来更多的就业机会，2017年小程序带动就业104万人，社会效应不断提升。
当前网络上的小程序方案无法保证在大量使用此组件时各组件之间的文字回显互不影响，因此需要自己实现文字回显不会因大量使用此组件而导致冲突的解决方案，现有技术方案是在每一个引用组件的地方对组件的图片进行编辑，这种方案虽然也可以实现图文展示方式，但是在当前页进行文字编辑用户体验不好，为此，提出一种基于微信小程序的动态图文添加组件及其实现方法来解决上述问题。
发明内容
针对现有技术方案是在每一个引用组件的地方对组件的图片进行编辑，这种方案虽然也可以实现图文展示方式，但是在当前页进行文字编辑用户体验不好的问题，本发明提供了一种基于微信小程序的动态图文添加组件及其实现方法，以解决上述提出的问题。
为实现一种在微信小程序上能够通过组件的形式动态添加图片及文字的功能，此方式不仅能对已有的文字进行再编辑，还能够使文字编辑页面与展示页面实现解耦，并且当有大量页面使用此图文组件时，也不会造成组件之间的文字编辑及回显冲突的目的，本发明提供如下技术方案：一种基于微信小程序的动态图文添加组件，包括动态图文组件，所述动态图文组件包括图文展示模块、图片上传模块以及文字编辑模块，所述图文展示模块、图片上传模块以及文字编辑模块的输出端电连接有动态图文组件的输入端；
所述图文展示模块用于微信小程序中展示图片和文字的；
所述图片上传模块用于微信小程序中图片的上传；
所述文字编辑模块用于微信小程序中文字的编辑；
一种基于微信小程序的动态图文添加组件的实现方法，包括以下步骤：
S1、创建组件，使图文组件呈左边显示图片，右边显示文字的形式；
S2、当页面的图文参数成功获取后，触发组件内的方法将参数传入组件并通知组件对数据进行回显，点击图片区域进行正常的图片上传操作，点击文字区域时准备文字编辑页面的跳转；
S3、随机生成一个随机数作为监听的主题，即为观察者模式，随机数作为主题的目的是防止当前组件的其他数组元素或者同一个页面的相同组件因为使用了同一个主题导致文字回显发生冲突，将主题与文字区域的文字一起作为编辑页面的参数进行页面跳转，跳转页面成功后，同时开始监听该监听主题；
S4、当文字编辑页面的文字完成编辑，触发从上一个页面传过来的主题，并把编辑好的文字作为触发主题的参数，上一个页面的监听被触发，取出触发主题操作时传入的文字参数，并把其赋值给当前页的文字区域；
S5、当点击组件上的“+”号或“-”号时，向对象数组里新添加或减少一个相同的对象，该对象可以像第一个对象一样进行图文编辑操作；
S6：每当操作一次图片区域或者文字区域，都会触发一次参数外传操作，为了防止外传的数据包含空的数组对象，对整个对象数组进行循环，如果图片区域和文字区域均没有内容，则删除数组内的该对象，循环结束后将整个对象数组外传至页面，页面只需监听数据外传的操作即可获取整个对象数组的数。
进一步优化本技术方案，所述动态添加可通过用户自行操作实现数据对象的添加和删除。
进一步优化本技术方案，所述图文添加组件是指用于展示图片和文字的基于微信小程序开发的组件。
进一步优化本技术方案，所述步骤S3中，观察者模式是软件设计模式的一种，在此种模式中，一个目标物件管理所有相依于它的观察者物件，并且在它本身的状态改变时主动发出通知。
进一步优化本技术方案，所述观察者模式，通常透过呼叫各观察者所提供的方法来实现，此种模式通常被用来实现事件处理系统。
进一步优化本技术方案，所述步骤S2中将获取的数据回显到组件，如果选择要上传的图片，即可上传图片并显示上传后的url，组件内容填充完成，即可完成图片上传。
进一步优化本技术方案，所述url为统一资源定位系统，是因特网的万维网服务程序上用于指定信息位置的表示方法，现在它已经被万维网联盟编制为互联网标准RFC1738。
进一步优化本技术方案，所述步骤S4中文字编辑页面编辑完成并失焦，触发完成编辑事件，组件监听到完成编辑事件，替换文本内容，组件内容填充完成，即可完成动态图文的添加。
有益效果
与现有技术相比，本发明提供了一种基于微信小程序的动态图文添加组件及其实现方法，具备以下有益效果：
该基于微信小程序的动态图文添加组件及其实现方法，优化了图文组件中用户对文字进行编辑的体验，在代码层面上开发人员不需要关注组件的内部实现，对组件只需要进行传递回显数据和监听数据外传两个操作即可，大大降低了使用该组件的开发人员的工作量和难度，同时也实现了文字编辑页面和文字显示之间，使用该组件和组件之间的代码结构的解耦，实现了使用观察者模式实现多个图文空间之间文字的回显和互不干扰的目的。
附图说明
图1为本发明提出的一种基于微信小程序的动态图文添加组件的功能模块示意图；
图2为本发明提出的一种基于微信小程序的动态图文添加组件实现方法流程示意图。
具体实施方式
下面将结合本发明的实施例，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
实施例：本发明公开了一种基于微信小程序的动态图文添加组件，包括动态图文组件，所述动态图文组件包括图文展示模块、图片上传模块以及文字编辑模块，所述图文展示模块、图片上传模块以及文字编辑模块的输出端电连接有动态图文组件的输入端；
所述图文展示模块用于微信小程序中展示图片和文字的；
所述图片上传模块用于微信小程序中图片的上传；
所述文字编辑模块用于微信小程序中文字的编辑；
本发明公开了一种基于微信小程序的动态图文添加组件在微信小程序上能够通过组件的形式动态添加图片及文字的功能，此方式不仅能对已有的文字进行再编辑，还能够使文字编辑页面与展示页面实现解耦，并且当有大量页面使用此图文组件时，也不会造成组件之间的文字编辑及回显冲突。
一种基于微信小程序的动态图文添加组件的实现方法，包括以下步骤：
S1、创建组件，使图文组件呈左边显示图片，右边显示文字的形式；
S2、当页面的图文参数成功获取后，触发组件内的方法将参数传入组件并通知组件对数据进行回显，点击图片区域进行正常的图片上传操作，点击文字区域时准备文字编辑页面的跳转；
S3、随机生成一个随机数作为监听的主题，即为观察者模式，随机数作为主题的目的是防止当前组件的其他数组元素或者同一个页面的相同组件因为使用了同一个主题导致文字回显发生冲突，将主题与文字区域的文字一起作为编辑页面的参数进行页面跳转，跳转页面成功后，同时开始监听该监听主题；
S4、当文字编辑页面的文字完成编辑(失焦)，触发从上一个页面传过来的主题，并把编辑好的文字作为触发主题的参数，上一个页面的监听被触发，取出触发主题操作时传入的文字参数，并把其赋值给当前页的文字区域；
S5、当点击组件上的“+”号或“-”号时，向对象数组里新添加或减少一个相同的对象，该对象可以像第一个对象一样进行图文编辑操作；
S6：每当操作一次图片区域或者文字区域，都会触发一次参数外传操作，为了防止外传的数据包含空的数组对象，对整个对象数组进行循环，如果图片区域和文字区域均没有内容，则删除数组内的该对象，循环结束后将整个对象数组外传至页面，页面只需监听数据外传的操作即可获取整个对象数组的数。
进一步优化本技术方案，所述动态添加可通过用户自行操作实现数据对象的添加和删除。
进一步优化本技术方案，所述图文添加组件是指用于展示图片和文字的基于微信小程序开发的组件。
进一步优化本技术方案，所述步骤S3中，观察者模式是软件设计模式的一种，在此种模式中，一个目标物件管理所有相依于它的观察者物件，并且在它本身的状态改变时主动发出通知。
进一步优化本技术方案，所述观察者模式，通常透过呼叫各观察者所提供的方法来实现，此种模式通常被用来实现事件处理系统。
进一步优化本技术方案，所述步骤S2中将获取的数据回显到组件，如果选择要上传的图片，即可上传图片并显示上传后的url，组件内容填充完成，即可完成图片上传。
进一步优化本技术方案，所述url为统一资源定位系统，是因特网的万维网服务程序上用于指定信息位置的表示方法，现在它已经被万维网联盟编制为互联网标准RFC1738。
进一步优化本技术方案，所述步骤S4中文字编辑页面编辑完成并失焦，触发完成编辑事件，组件监听到完成编辑事件，替换文本内容，组件内容填充完成，即可完成动态图文的添加。
本发明的有益效果是：该基于微信小程序的动态图文添加组件及其实现方法，优化了图文组件中用户对文字进行编辑的体验，在代码层面上开发人员不需要关注组件的内部实现，对组件只需要进行传递回显数据和监听数据外传两个操作即可，大大降低了使用该组件的开发人员的工作量和难度，同时也实现了文字编辑页面和文字显示之间，使用该组件和组件之间的代码结构的解耦，实现了使用观察者模式实现多个图文空间之间文字的回显和互不干扰的目的。
本系统中涉及到的相关模式均为硬件系统模块或者为现有技术中计算机软件程序或协议与硬件相结合的功能模式，该功能模式所涉及到的计算机软件程序或协议的本身均为本领域技术人员公知的技术，其不是本系统的改进之处；本系统的改进为各模式之间的相互作用关系或连接关系，即为对系统的整体的构造进行改进，以解决本系统所要解决的相应技术问题。
尽管已经示出和描述了本发明的实施例，对于本领域的普通技术人员而言，可以理解在不脱离本发明的原理和精神的情况下可以对这些实施例进行多种变化、修改、替换和变型，本发明的范围由所附权利要求及其等同物限定。
Claims (9)
1.一种基于微信小程序的动态图文添加组件，包括动态图文组件，其特征在于，所述动态图文组件包括图文展示模块、图片上传模块以及文字编辑模块，所述图文展示模块、图片上传模块以及文字编辑模块的输出端电连接有动态图文组件的输入端；
所述图文展示模块用于微信小程序中展示图片和文字的；
所述图片上传模块用于微信小程序中图片的上传；
所述文字编辑模块用于微信小程序中文字的编辑。
2.一种基于微信小程序的动态图文添加组件的实现方法，其特征在于，包括以下步骤：
S1、创建组件，使图文组件呈左边显示图片，右边显示文字的形式；
S2、当页面的图文参数成功获取后，触发组件内的方法将参数传入组件并通知组件对数据进行回显，点击图片区域进行正常的图片上传操作，点击文字区域时准备文字编辑页面的跳转；
S3、随机生成一个随机数作为监听的主题，即为观察者模式，随机数作为主题的目的是防止当前组件的其他数组元素或者同一个页面的相同组件因为使用了同一个主题导致文字回显发生冲突，将主题与文字区域的文字一起作为编辑页面的参数进行页面跳转，跳转页面成功后，同时开始监听该监听主题；
S4、当文字编辑页面的文字完成编辑，触发从上一个页面传过来的主题，并把编辑好的文字作为触发主题的参数，上一个页面的监听被触发，取出触发主题操作时传入的文字参数，并把其赋值给当前页的文字区域；
S5、当点击组件上的“+”号或“-”号时，向对象数组里新添加或减少一个相同的对象，该对象可以像第一个对象一样进行图文编辑操作；
S6：每当操作一次图片区域或者文字区域，都会触发一次参数外传操作，为了防止外传的数据包含空的数组对象，对整个对象数组进行循环，如果图片区域和文字区域均没有内容，则删除数组内的该对象，循环结束后将整个对象数组外传至页面，页面只需监听数据外传的操作即可获取整个对象数组的数。
3.根据权利要求2所述的一种基于微信小程序的动态图文添加组件及其实现方法，其特征在于，所述动态添加可通过用户自行操作实现数据对象的添加和删除。
4.根据权利要求2所述的一种基于微信小程序的动态图文添加组件及其实现方法，其特征在于，所述图文添加组件是指用于展示图片和文字的基于微信小程序开发的组件。
5.根据权利要求2所述的一种基于微信小程序的动态图文添加组件及其实现方法，其特征在于，所述步骤S3中，观察者模式是软件设计模式的一种，在此种模式中，一个目标物件管理所有相依于它的观察者物件，并且在它本身的状态改变时主动发出通知。
6.根据权利要求5所述的一种基于微信小程序的动态图文添加组件及其实现方法，其特征在于，所述观察者模式，通常透过呼叫各观察者所提供的方法来实现，此种模式通常被用来实现事件处理系统。
7.根据权利要求2所述的一种基于微信小程序的动态图文添加组件及其实现方法，其特征在于，所述步骤S2中将获取的数据回显到组件，如果选择要上传的图片，即可上传图片并显示上传后的url，组件内容填充完成，即可完成图片上传。
8.根据权利要求7所述的一种基于微信小程序的动态图文添加组件及其实现方法，其特征在于，所述url为统一资源定位系统，是因特网的万维网服务程序上用于指定信息位置的表示方法，现在它已经被万维网联盟编制为互联网标准RFC1738。
9.根据权利要求2所述的一种基于微信小程序的动态图文添加组件及其实现方法，其特征在于，所述步骤S4中文字编辑页面编辑完成并失焦，触发完成编辑事件，组件监听到完成编辑事件，替换文本内容，组件内容填充完成，即可完成动态图文的添加。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201911396865.3A CN111208997A (zh) | 2019-12-30 | 2019-12-30 | 一种基于微信小程序的动态图文添加组件及其实现方法 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201911396865.3A CN111208997A (zh) | 2019-12-30 | 2019-12-30 | 一种基于微信小程序的动态图文添加组件及其实现方法 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN111208997A true CN111208997A (zh) | 2020-05-29 |
Family
ID=70789439
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201911396865.3A Pending CN111208997A (zh) | 2019-12-30 | 2019-12-30 | 一种基于微信小程序的动态图文添加组件及其实现方法 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN111208997A (zh) |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112331235A (zh) * | 2021-01-04 | 2021-02-05 | 腾讯科技（深圳）有限公司 | 多媒体内容的编辑控制方法、装置、电子设备和存储介质 |
-
2019
- 2019-12-30 CN CN201911396865.3A patent/CN111208997A/zh active Pending
Cited By (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112331235A (zh) * | 2021-01-04 | 2021-02-05 | 腾讯科技（深圳）有限公司 | 多媒体内容的编辑控制方法、装置、电子设备和存储介质 |
| WO2022144016A1 (zh) * | 2021-01-04 | 2022-07-07 | 腾讯科技（深圳）有限公司 | 应用程序控制方法、装置、电子设备和存储介质 |
| US11722555B2 (en) | 2021-01-04 | 2023-08-08 | Tencent Technology (Shenzhen) Company Limited | Application control method and apparatus, electronic device, and storage medium |
| US11909812B2 (en) | 2021-01-04 | 2024-02-20 | Tencent Technology (Shenzhen) Company Limited | Application control method and apparatus, electronic device, and storage medium |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US10218657B2 (en) | Method and system for providing private chat within a group chat | |
| US8935339B2 (en) | News feed techniques | |
| CN111756917B (zh) | 信息交互方法、电子设备和计算机可读介质 | |
| US20160044071A1 (en) | Sharing a web browser session between devices in a social group | |
| CN110612716B (zh) | 数据消息网络路由的中间设备 | |
| US11968427B2 (en) | Video message generation method and apparatus, electronic device, and storage medium | |
| CN111880695B (zh) | 一种屏幕共享方法、装置、设备及存储介质 | |
| CN111130986B (zh) | 消息发送方法、装置、设备及存储介质 | |
| CN105207886A (zh) | 即时通信消息的发送、显示方法及发送、显示装置和系统 | |
| CN109766315B (zh) | 文件展示方法及终端、计算机存储介质、计算机设备 | |
| CN112511580A (zh) | 消息推送的方法、装置、存储介质和设备 | |
| CN105704001A (zh) | 一种微信服务器消息分发方法及系统 | |
| CN113312885B (zh) | 协同操作处理方法、装置、设备以及介质 | |
| CN111208997A (zh) | 一种基于微信小程序的动态图文添加组件及其实现方法 | |
| US10504277B1 (en) | Communicating within a VR environment | |
| CN114422468A (zh) | 消息处理方法、装置、终端及存储介质 | |
| CN108289056B (zh) | 分享动态图表的方法、装置以及计算设备 | |
| CN115061751A (zh) | 插件加载方法、插件加载装置、电子设备及存储介质 | |
| CN113014404B (zh) | 一种消息传输方法、装置、服务器以及第二客户端 | |
| CN113568687A (zh) | 展示Web页面的方法、相关设备和计算机可读存储介质 | |
| Jagtap et al. | WEB CHAT STATION–A REVIEW | |
| US20140108959A1 (en) | Collaboration Network Platform Providing Virtual Rooms with Indication of Number and Identity of Users in the Virtual Rooms | |
| US20230353522A1 (en) | Message capture in a multi channel communication environment | |
| CN117255077A (zh) | 消息处理方法、装置、计算机设备、存储介质及产品 | |
| CN115373867A (zh) | 内容分享方法、装置、计算机设备和存储介质 |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination |