在微信框架模块中,基于Vue&Element前端的事件和内容的管理

简介: 在微信框架模块中,基于Vue&Element前端的事件和内容的管理

在微信后台管理中,我们需要定义好菜单对应的事件管理,因为微信通过菜单触发相关的事件,因此菜单事件的响应关系,我们如果处理好,就能构建出我们的微信应用入口了。通过入口,我们可以响应用户菜单的事件,如响应文本内容,图片内容,以及扫码处理,或者定位到自己的页面中去进行业务数据的录入和展示等等。

1、微信公众号的事件处理

如以下是我们公众号的关注成功页面,弹出一个标准介绍的图文消息,可以查看具体的公司介绍内容,也可以在菜单里面定位到自己所需要的功能中去。

微信的消息和事件的分类众多,我们大概了解一下

一般定义好入口菜单事件,我们除了可以响应文本内容、图片、图文消息外,也可以定位到自定义页面里面去,这样可以较好的处理我们自己的业务数据。

如以下是我们在前端定义的业务界面效果。

购物车结算界面如下所示。

 

2、微信账号和对接管理

在前面随笔《》中介绍过了,基于Vue&Element的微信账号管理,如下图所示。

在微信后台管理系统中,需要对系统设计到的一些微信账号信息进行配置,包括订阅号、公众号、企业微信、小程序等账号列表的管理。

我们微信开发框架,提供了标准的微信账号信息填写界面,录入对应的信息,完成微信后台的对接,即可开启开发微信应用之旅了。

微信账号的编辑界面如下所示,在其中管理各种用到的微信账号信息,便于后台API的接口访问。

账号登录公众号后台或者企业微信后台,我们根据和账号配置一致对应的信息,完成系统对接即可,以下是微信公众号的配置对接界面。

后台系统配置和官方微信后台的配置对接成功后,就需要设置好对应的公众号或者企业微信等的菜单了。

其中每项菜单,都包含一个触发的事件,要么是普通的单击事件,要么是视图事件,要么是扫码事件等等,如下菜单类似所示。

 

3、菜单的事件和内容管理

除了菜单的网页链接事件外,其他菜单的事件,如click类型事件等,都需要后台管理系统在接收到腾讯微信事件回调的时候,进行一一响应的,我们可以自定义我们的响应内容,因此引入了一个后台管理中的事件和内容管理,用于一一响应对应的事件代码。

如下是内容管理列表和详细内容界面。

 

 

有了这些内容定义,我们就可以在事件定义中,选取一个或者多个内容定义作为事件的主要内容承载了。

事件管理列表界面如下所示。

 

在新建或者编辑事件界面中,我们增加一个选择内容的按钮事件入口,如下所示

 在弹出界面中,我们选择对应的内容进行处理即可。

 选中的内容,以标签的形式展示出来。

以上就是在微信框架模块中,基于Vue&Element前端的事件和内容管理

 

专注于代码生成工具、.Net/.NetCore 框架架构及软件开发,以及各种Vue.js的前端技术应用。著有Winform开发框架/混合式开发框架、微信开发框架、Bootstrap开发框架、ABP开发框架、SqlSugar开发框架等框架产品。
 转载请注明出处:撰写人:伍华聪  http://www.iqidi.com

相关文章
|
13天前
|
前端开发 JavaScript 开发者
颠覆传统:React框架如何引领前端开发的革命性变革
【10月更文挑战第32天】本文以问答形式探讨了React框架的特性和应用。React是一款由Facebook推出的JavaScript库,以其虚拟DOM机制和组件化设计,成为构建高性能单页面应用的理想选择。文章介绍了如何开始一个React项目、组件化思想的体现、性能优化方法、表单处理及路由实现等内容,帮助开发者更好地理解和使用React。
44 9
|
26天前
|
移动开发 JavaScript
Vue——H5微信内支付(四)
10月更文挑战第11天
51 2
|
27天前
|
人工智能 前端开发 JavaScript
前端架构思考 :专注于多框架的并存可能并不是唯一的方向 — 探讨大模型时代前端的分层式微前端架构
随着前端技术的发展,微前端架构成为应对复杂大型应用的流行方案,允许多个团队使用不同技术栈并将其模块化集成。然而,这种设计在高交互性需求的应用中存在局限,如音视频处理、AI集成等。本文探讨了传统微前端架构的不足,并提出了一种新的分层式微前端架构,通过展示层与业务层的分离及基于功能的横向拆分,以更好地适应现代前端需求。
|
7天前
|
前端开发 JavaScript API
前端界的秘密武器:掌握这些框架,让你轻松秒杀99%的同行!
前端开发日新月异,掌握几个明星框架如React、Vue.js和Angular,不仅能让工作更得心应手,还能轻松超越同行。React以高效的虚拟DOM和组件化著称;Vue.js简洁易懂,灵活性高;Angular提供全面的解决方案,适合大型应用。此外,轻量级的Svelte也值得关注,其编译时处理设计提升了应用性能。掌握这些框架,结合深刻理解和灵活运用,助你在前端领域脱颖而出。
22 9
|
19天前
|
前端开发 JavaScript
Bootstrap Web 前端 UI 框架
Bootstrap 是快速开发 Web 应用程序的前端工具包。
30 3
|
25天前
|
JavaScript 前端开发 测试技术
前端全栈之路Deno篇(五):如何快速创建 WebSocket 服务端应用 + 客户端应用 - 可能是2025最佳的Websocket全栈实时应用框架
本文介绍了如何使用Deno 2.0快速构建WebSocket全栈应用,包括服务端和客户端的创建。通过一个简单的代码示例,展示了Deno在WebSocket实现中的便捷与强大,无需额外依赖,即可轻松搭建具备基本功能的WebSocket应用。Deno 2.0被认为是最佳的WebSocket全栈应用JS运行时,适合全栈开发者学习和使用。
|
25天前
|
移动开发 JavaScript
Vue——H5微信内支付(五)
10月更文挑战第12天
30 2
|
25天前
|
缓存 前端开发 JavaScript
前端serverless探索之组件单独部署时,利用rxjs实现业务状态与vue-react-angular等框架的响应式状态映射
本文深入探讨了如何将RxJS与Vue、React、Angular三大前端框架进行集成,通过抽象出辅助方法`useRx`和`pushPipe`,实现跨框架的状态管理。具体介绍了各框架的响应式机制,展示了如何将RxJS的Observable对象转化为框架的响应式数据,并通过示例代码演示了使用方法。此外,还讨论了全局状态源与WebComponent的部署优化,以及一些实践中的改进点。这些方法不仅简化了异步编程,还提升了代码的可读性和可维护性。
|
26天前
|
前端开发 JavaScript 中间件
前端全栈之路Deno篇(四):Deno2.0如何快速创建http一个 restfulapi/静态文件托管应用及oak框架介绍
Deno 是由 Node.js 创始人 Ryan Dahl 开发的新一代 JavaScript 和 TypeScript 运行时,旨在解决 Node.js 的设计缺陷,具备更强的安全性和内置的 TypeScript 支持。本文介绍了如何使用 Deno 内置的 `Deno.serve` 快速创建 HTTP 服务,并详细讲解了 Oak 框架的安装和使用方法,包括中间件、路由和静态文件服务等功能。Deno 和 Oak 的结合使得创建 RESTful API 变得高效且简便,非常适合快速开发和部署现代 Web 应用程序。
|
27天前
|
移动开发 JavaScript
Vue——H5微信内支付(三)
10月更文挑战第10天
46 1