一种基于微信小程序的动态图文添加组件及其实现方法技术

本发明专利技术公开了一种基于微信小程序的动态图文添加组件及其实现方法，涉及小程序开发技术领域。包括动态图文组件，动态图文组件包括图文展示模块、图片上传模块以及文字编辑模块，图文展示模块、图片上传模块以及文字编辑模块的输出端电连接有动态图文组件的输入端。该基于微信小程序的动态图文添加组件及其实现方法，优化了图文组件中用户对文字进行编辑的体验，在代码层面上开发人员不需要关注组件的内部实现，对组件只需要进行传递回显数据和监听数据外传两个操作即可，大大降低了使用该组件的开发人员的工作量和难度，同时也实现了文字编辑页面和文字显示之间，使用该组件和组件之间的代码结构的解耦。

【技术实现步骤摘要】
一种基于微信小程序的动态图文添加组件及其实现方法
本专利技术涉及小程序开发
，具体为一种基于微信小程序的动态图文添加组件及其实现方法。
技术介绍
微信(WeChat)是腾讯公司于2011年1月21日推出的一个为智能终端提供即时通讯服务的免费应用程序，由张小龙所带领的腾讯广州研发中心产品团队打造，微信支持跨通信运营商、跨操作系统平台通过网络快速发送免费(需消耗少量网络流量)语音短信、视频、图片和文字，同时，也可以使用通过共享流媒体内容的资料和基于位置的社交插件“摇一摇”、“漂流瓶”、“朋友圈”、”公众平台“、”语音记事本“等服务插件，微信小程序，简称小程序，英文名MiniProgram，是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用。全面开放申请后，主体类型为企业、政府、媒体、其他组织或个人的开发者，均可申请注册小程序，小程序、订阅号、服务号、企业号是并行的体系，小程序是一种不用下载就能使用的应用，也是一项门槛非常高的创新，经过将近两年的发展，已经构造了新的小程序开发环境和开发者生态。小程序也是这么多年来中国IT行业里一个真正能够影响到普通程序员的创新成果，已经有超过150万的开发者加入到了小程序的开发，与我们一起共同发力推动小程序的发展，小程序应用数量超过了一百万，覆盖200多个细分的行业，日活用户达到两个亿，小程序还在许多城市实现了支持地铁、公交服务。小程序发展带来更多的就业机会，2017年小程序带动就业104万人，社会效应不断提升。当前网络上的小程序方案无法保证在大量使用此组件时各组件之间的文字回显互不影响，因此需要自己实现文字回显不会因大量使用此组件而导致冲突的解决方案，现有技术方案是在每一个引用组件的地方对组件的图片进行编辑，这种方案虽然也可以实现图文展示方式，但是在当前页进行文字编辑用户体验不好，为此，提出一种基于微信小程序的动态图文添加组件及其实现方法来解决上述问题。
技术实现思路
针对现有技术方案是在每一个引用组件的地方对组件的图片进行编辑，这种方案虽然也可以实现图文展示方式，但是在当前页进行文字编辑用户体验不好的问题，本专利技术提供了一种基于微信小程序的动态图文添加组件及其实现方法，以解决上述提出的问题。为实现一种在微信小程序上能够通过组件的形式动态添加图片及文字的功能，此方式不仅能对已有的文字进行再编辑，还能够使文字编辑页面与展示页面实现解耦，并且当有大量页面使用此图文组件时，也不会造成组件之间的文字编辑及回显冲突的目的，本专利技术提供如下技术方案：一种基于微信小程序的动态图文添加组件，包括动态图文组件，所述动态图文组件包括图文展示模块、图片上传模块以及文字编辑模块，所述图文展示模块、图片上传模块以及文字编辑模块的输出端电连接有动态图文组件的输入端；所述图文展示模块用于微信小程序中展示图片和文字的；所述图片上传模块用于微信小程序中图片的上传；所述文字编辑模块用于微信小程序中文字的编辑；一种基于微信小程序的动态图文添加组件的实现方法，包括以下步骤：S1、创建组件，使图文组件呈左边显示图片，右边显示文字的形式；S2、当页面的图文参数成功获取后，触发组件内的方法将参数传入组件并通知组件对数据进行回显，点击图片区域进行正常的图片上传操作，点击文字区域时准备文字编辑页面的跳转；S3、随机生成一个随机数作为监听的主题，即为观察者模式，随机数作为主题的目的是防止当前组件的其他数组元素或者同一个页面的相同组件因为使用了同一个主题导致文字回显发生冲突，将主题与文字区域的文字一起作为编辑页面的参数进行页面跳转，跳转页面成功后，同时开始监听该监听主题；S4、当文字编辑页面的文字完成编辑，触发从上一个页面传过来的主题，并把编辑好的文字作为触发主题的参数，上一个页面的监听被触发，取出触发主题操作时传入的文字参数，并把其赋值给当前页的文字区域；S5、当点击组件上的“+”号或“-”号时，向对象数组里新添加或减少一个相同的对象，该对象可以像第一个对象一样进行图文编辑操作；S6：每当操作一次图片区域或者文字区域，都会触发一次参数外传操作，为了防止外传的数据包含空的数组对象，对整个对象数组进行循环，如果图片区域和文字区域均没有内容，则删除数组内的该对象，循环结束后将整个对象数组外传至页面，页面只需监听数据外传的操作即可获取整个对象数组的数。进一步优化本技术方案，所述动态添加可通过用户自行操作实现数据对象的添加和删除。进一步优化本技术方案，所述图文添加组件是指用于展示图片和文字的基于微信小程序开发的组件。进一步优化本技术方案，所述步骤S3中，观察者模式是软件设计模式的一种，在此种模式中，一个目标物件管理所有相依于它的观察者物件，并且在它本身的状态改变时主动发出通知。进一步优化本技术方案，所述观察者模式，通常透过呼叫各观察者所提供的方法来实现，此种模式通常被用来实现事件处理系统。进一步优化本技术方案，所述步骤S2中将获取的数据回显到组件，如果选择要上传的图片，即可上传图片并显示上传后的url，组件内容填充完成，即可完成图片上传。进一步优化本技术方案，所述url为统一资源定位系统，是因特网的万维网服务程序上用于指定信息位置的表示方法，现在它已经被万维网联盟编制为互联网标准RFC1738。进一步优化本技术方案，所述步骤S4中文字编辑页面编辑完成并失焦，触发完成编辑事件，组件监听到完成编辑事件，替换文本内容，组件内容填充完成，即可完成动态图文的添加。有益效果与现有技术相比，本专利技术提供了一种基于微信小程序的动态图文添加组件及其实现方法，具备以下有益效果：该基于微信小程序的动态图文添加组件及其实现方法，优化了图文组件中用户对文字进行编辑的体验，在代码层面上开发人员不需要关注组件的内部实现，对组件只需要进行传递回显数据和监听数据外传两个操作即可，大大降低了使用该组件的开发人员的工作量和难度，同时也实现了文字编辑页面和文字显示之间，使用该组件和组件之间的代码结构的解耦，实现了使用观察者模式实现多个图文空间之间文字的回显和互不干扰的目的。附图说明图1为本专利技术提出的一种基于微信小程序的动态图文添加组件的功能模块示意图；图2为本专利技术提出的一种基于微信小程序的动态图文添加组件实现方法流程示意图。具体实施方式下面将结合本专利技术的实施例，对本专利技术实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本专利技术一部分实施例，而不是全部的实施例。基于本专利技术中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本专利技术保护的范围。实施例：本专利技术公开了一种基于微信小程序的动态图文添加组件，包括动态图文组件，所述动态图文组件包括图文展示模块、图片上传模块以及文字编辑模块，所述图文展示模块、图片上传模块以及文字编辑模块的输出端电连接有动态图文组件的输入端；本文档来自技高网...

【技术保护点】
1.一种基于微信小程序的动态图文添加组件，包括动态图文组件，其特征在于，所述动态图文组件包括图文展示模块、图片上传模块以及文字编辑模块，所述图文展示模块、图片上传模块以及文字编辑模块的输出端电连接有动态图文组件的输入端；/n所述图文展示模块用于微信小程序中展示图片和文字的；/n所述图片上传模块用于微信小程序中图片的上传；/n所述文字编辑模块用于微信小程序中文字的编辑。/n

【技术特征摘要】
1.一种基于微信小程序的动态图文添加组件，包括动态图文组件，其特征在于，所述动态图文组件包括图文展示模块、图片上传模块以及文字编辑模块，所述图文展示模块、图片上传模块以及文字编辑模块的输出端电连接有动态图文组件的输入端；
所述图文展示模块用于微信小程序中展示图片和文字的；
所述图片上传模块用于微信小程序中图片的上传；
所述文字编辑模块用于微信小程序中文字的编辑。


2.一种基于微信小程序的动态图文添加组件的实现方法，其特征在于，包括以下步骤：
S1、创建组件，使图文组件呈左边显示图片，右边显示文字的形式；
S2、当页面的图文参数成功获取后，触发组件内的方法将参数传入组件并通知组件对数据进行回显，点击图片区域进行正常的图片上传操作，点击文字区域时准备文字编辑页面的跳转；
S3、随机生成一个随机数作为监听的主题，即为观察者模式，随机数作为主题的目的是防止当前组件的其他数组元素或者同一个页面的相同组件因为使用了同一个主题导致文字回显发生冲突，将主题与文字区域的文字一起作为编辑页面的参数进行页面跳转，跳转页面成功后，同时开始监听该监听主题；
S4、当文字编辑页面的文字完成编辑，触发从上一个页面传过来的主题，并把编辑好的文字作为触发主题的参数，上一个页面的监听被触发，取出触发主题操作时传入的文字参数，并把其赋值给当前页的文字区域；
S5、当点击组件上的“+”号或“-”号时，向对象数组里新添加或减少一个相同的对象，该对象可以像第一个对象一样进行图文编辑操作；
S6：每当操作一次图片区域或者文字区域，都会触发一次参数外传操作，为了防止外传的数据包含空的数组对象，对整个对象数组进行循环，如果图片区域和文字区域均没有内容，则删除数组内的该对象，循环结束后将整个对象数组外传至页面，页面只需监听...

【专利技术属性】
技术研发人员：林森，王很，史玉洁，袁志远，吴恺，欧阳少海，喻勋勋，
申请(专利权)人：广东飞企互联科技股份有限公司，
类型：发明
国别省市：广东;44