微信门户开发框架相关文档

为了更有效管理订阅用户以及分组信息，我们可以从微信服务器上获取相关的信息，供我们了解关注的用户信息，也可以为后续的群发消息做准备。

订阅用户的管理如下所示，默认可以通过用户的地区进行查看，地区根据：国家-省份-城市这样的级别进行展开。

也可以根据标签查看，标签可以进行维护，以及为标签加入或者移除人员，界面如下图所示。

以及可以根据分组查看，如下所示。

订阅用户可以从微信服务器上进行同步到本地，单击同步数据，可以把服务器上的用户数据下载到本地进行更新或者写入。

双击可以查看订阅用户信息，查看订阅用户的详细信息界面如下所示。

2.9）用户标签管理

微信公众号，仿照企业微信的思路，增加了标签管理的功能，对关注的粉丝可以设置标签管理，实现更加方便的分组管理功能。开发者可以使用用户标签管理的相关接口，实现对公众号的标签进行创建、查询、修改、删除等操作，也可以对用户进行打标签、取消标签等操作。

标签管理是替代用户组管理的一种标签，可以很好管理订阅的用户，我们可以通过封装好的微信接口很容易的获取腾讯服务器上用户标签列表，然后进行管理，如下图所示。

同时前面提到了，可以在订阅用户按标签进行维护的，如下所示。

编辑标签信息界面如下所示。

2.10）多媒体管理

多媒体管理是指把本地文件上传到微信服务器上进行保存，方便信息的发送等操作。微信要求，某些信息，必须是先上传到服务器上，然后才能使用它的媒体ID进行发送的。

文件成功上传到服务器后，在列表里面的“文件上传标识，就是一串的编码数据，同时有一个上传的时间戳（因为微信服务器只保留了3天的媒体数据，超过期限的数据会被自动删除。

同时，在列表的上面，有两个重要的功能：上传选定的记录，重新上传过期的记录。方便我们对自己多媒体文件的重新更新操作。

添加界面操作如下所示，其中引入了附件上传的控件进行文件的操作，非常方便。同时上传成功的文件，会在列表中列出。

多媒体文件可以是下面几种方式：图片、语音、视频、缩略图。

保存后的数据记录，文件上传标识和时间戳都是空的，我们如果要使用，必须把他们上传到微信的服务器上，然后根据它的进行信息的发送，上传选定的记录操作界面如下所示。

多媒体文件顺利上传后，记录的信息如下所示。

2.11）图文消息处理

图文消息分为单图文消息和多图文消息两种，单图文消息如下所示。

多图文消息如下所示：

和多媒体数据管理一样，图文消息也是通过同样的方式进行管理，先上传到服务器，然后在进行消息的发送操作，多媒体消息一样有时间方面的限制要求，具体在我们的微信门户平台里面管理界面如下所示。

添加图文消息界面如下所示，保存后，可以在编辑界面中的“其他图文列表”里面，继续添加多图文的消息内容。

在添加界面中，选择图文消息的缩略图，都是通过选定指定的，已经上传到服务器上图片或者缩略图资源才可以的。

添加后的多图文列表，可以进行查看管理。

保存记录后，然后继续上传，上传后的记录界面如下所示，成功后返回一个上传后的服务器标识和时间戳，否则提示错误。

2.12）会话消息管理

为了方便记录客户的输入和发送信息，我们在微信门户管理平台里面记录用户的输入数据，具体会话消息管理界面如下所示。

我们可以双击最近48小时内的任何一条记录，可以给关注的客户进行消息的发送操作，如果消息发送成功，用户在手机的微信账号里面就能收到相关的发送消息了。

2.13）群发消息管理

为了对客户进行相应的营销操作，有时候我们需要对指定的群主或者人员进行消息的群发，让客户经常性的了解我们产品的信息和活动。

由于群发消息，除了文本消息，可以直接编辑发送外，其他数据，必须要求是上传到服务器的多媒体文件或者图文消息内容，因此前面的多媒体管理和图文消息管理，就是主要为了群发消息的目的引入的。有了上面的多媒体和多图文信息，我们从平台里面选择记录即可进行发送，从而省却麻烦的连带工作，实现高效的信息群发操作。

群发的消息，可以按群发分组进行查看，也可以按照消息类型进行查看，使得我们管理起来根据方便。

添加图文消息，可以选择文本消息、图文消息、图片消息等内容，根据不同的内容，界面提供不同的选择操作。

消息的群发类型分为两种，一种是根据分组，那么从平台里面选择对应的分组即可；一种是根据用户的进行发送，提供给用户输入。主要的操作界面如下所示。

2.14）使用语音处理

我们知道，微信最开始就是做语音聊天而使得其更加流行的，因此语音的识别处理自然也就成为微信交流的一个重要途径，微信的开发接口，也提供了对语音的消息请求处理。这里主要介绍如何利用语音的识别，对C#开发的微信门户应用的整个事件链的处理操作，使得在我们的微信账号里面，更加方便和多元化对用户的输入进行处理。

在系统后台里面，会检查是否获得了微信的语音识别结果，如果获得，那么这个时候，就是和处理用户文本输入的操作差不多了，语音输入的处理逻辑如下所示。

首先我根据识别结果，寻找是否用户读出了微信门户的菜单名称，如果根据语音结果找到对应的菜单记录，那么我们执行菜单事件（如果是URL的View类型菜单，我们没办法重定向到指定的链接，因此给出一个链接文本提示，给用户单击进入；如果没有找到菜单记录，那么我们就把语音识别结果作为一般的事件进行处理，如果事件逻辑没有处理，那么我们最后给出一个默认的语音应答提示结果就可以了。

微信门户测试界面效果如下所示。

为了方便对客户会话的记录，我的微信门户后台，会记录用户的语音输入内容，如下所示。

2.15）使用地理位置扩展相关应用

我们知道，地理位置信息可以用来做很多相关的应用，除了我们可以知道用户所在的位置，还可以关联出一些地理位置的应用，如天气，热映影片，附近景点，附近影院，交通事件等等，反正所有和地理位置相关的信息，我们都可以根据需要做一些扩展应用。这里主要介绍利用地理位置信息，如何构建使用这些应用的操作。

1）微信的地理位置信息

在使用前，我们先来看看微信的接口，为我们定义了那些关于与地理位置的信息。其实地理位置的信息，微信分为了两个方面，一个是接收用户的地理位置请求，一个是用户允许上报地理位置操作，定时发送的地理位置信息。

地理位置的上报操作，就是在输入的地方，选择+号进行添加地理位置，然后选择当前或者指定的地理位置地图，具体操作如下所示。

首先对用户地理位置的请求，我根据数据库配置给出了一个用户选择的指令提示，如下所示。

为了对地理位置请求的处理，我定义了一个用于处理这个操作的指令操作

这样整个地理位置的指令操作，就在应答链里面进行很好的跳转管理了。几个应用扩展的界面效果如下所示。

2.16）微信扫码登录

在现今很多网站里面，都使用了微信开放平台的扫码登录认证处理，这样做相当于把身份认证交给较为权威的第三方进行认证，在应用网站里面可以不需要存储用户的密码了。

在用户列表的二维码连接上，单击可以对用户进行微信扫码绑定，这样用户可以在扫码登录处直接扫码登录，不需要输入账号密码。

一旦成功绑定用户微信，在微信端会定位到一个绑定成功的页面（自定义的H5页面），如下所示。

如果用户已经进行了二维码绑定，则可以在管理界面进行取消绑定，这样可以解绑用户账号和微信之间的关联。

2.17）微信摇一摇红包功能

摇一摇周边红包接口是为线下商户提供的发红包功能。用户可以在商家门店等线下场所通过摇一摇周边领取商家发放的红包，在线上转发分享无效。

开发者可通过接口开发摇一摇红包功能，特点包括：

可选择使用模板加载页或自定义页面调起微信原生红包页面(详见创建红包活动中字段，1为使用模板，2为使用自定义页面)原生红包页面拆红包，无需通过公众号消息下发提供关注公众号能力，用户可自行选择是否关注(裂变红包分享时无效)完成页面可配置跳转链接，可跳转商户的其他自定义页面同一个用户在单个红包活动中只能领取1次红包

用户侧交互流程

常规的摇一摇红包的流程如下所示，这里没有使用用户自定义的模板，也就是使用系统内置的（努力加载中。。。）的页面，红包需要自己拆开。

红包组件接口调用流程

申请红包接口权限：登录摇一摇周边商户后台,进入开发者支持，申请开通摇一摇红包组件接口;红包预下单：调用微信支付的api进行红包预下单，告知需要发放的红包金额，人数，生成红包；创建活动并录入红包信息：调用摇周边平台的api录入创建红包活动并录入信息，传入预下单时生成的红包；调用抽红包：在摇出的页面中通过调用抽红包，抽中红包的用户可以拆红包；调用以上接口时，红包提供商户和红包发放商户公众号要求一致。

摇一摇红包的处理过程可以先的流程说明，申请权限后，需要在摇一摇后台配置相关的红包处理页面，然后通过红包接口处理提交红包数据，最后通过摇一摇的设备摇出界面，使用实现抽取红包的操作，具体过程如下所示。

其中红包接口处理，是调用一系列的红包接口实现的，包括红包预下单、创建红包活动、录入红包信息等操作，如下所示。

其中微信支付的相关配置信息在账号的信息里面

利用摇一摇以及微信红包接口，使用手机摇一摇获得红包的过程界面效果如下所示。

对封装好的微信接口，接口成功调用后，我们可以在公众号的对话里面看到红包的信息结果，如下是整个红包发送及拆开的过程。

另外我们也对裂变红包进行了接口的封装，如果我们需要发送裂变红包的时候，直接调用裂变红包的接口即可实现红包发送的操作。

2.18）微信H5页面及JSDK开发

在我们开发微信页面的时候，需要大量用到了各种呈现的效果，一般可以使用的效果来设计不同的页面，不过微信团队也提供很多这方面的资源，包括的接口，以及Weui的页面样式和相关功能页面，给我们提供了很大的便利。

1)

微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包。通过使用微信JS-SDK，网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力，同时可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力，为微信用户提供更优质的网页体验。

目前支持的接口分类包括下面几类：基础接口、分享接口、图像接口、音频接口、智能接口、设备信息、地理位置、摇一摇周边、界面操作、微信扫一扫、微信小店、微信卡券、微信支付，随着微信功能的全部整合，估计更多的接口会陆续开放出来。

2）WeUI和 WeUI

WeUI是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页开发量身设计，可以令用户的使用感知更加统一。在微信网页开发中使用 WeUI，有如下优势：

该样式库目前包含 、cell、、、、、icon 等各式元素，已经在上开源。访问或微信扫码即可预览。

WeUI中使用的是官方 WeUI 的 CSS 代码，并提供了 / 版本的 API 实现。 WeUI相对于在官方WeUI的基础上做了一些功能扩展，已丰富界面设计和相关功能，因此我们可以考虑直接基于 WeUI的基础上进行页面开发即可。

在我前面的一些案例中，都利用了We UI样式来进行很多微信H5页面的功能设计，包括微信支付页面、签到页面等等。

如微信支付页面如下所示：

以及签到页面效果如下所示。

当然我们可以根据业务需要，增加很多这样和微信色调样式一致的页面，这个就是利用WeUI样式带来的界面体验一致性的好处。

本篇主要介绍微信H5页面开发的经验总结，上面提到了利用和WeUI来对微信应用的H5页面进行开发，因此下面的相关效果也就是利用这些技术进行处理的。

字典数据的绑定：

和常规网页功能一样，我们在设计微信页面应用的时候，很多数据也是来源字典数据的，而且需要把它们动态绑定在页面上，微信页面的 WeUI提供了一些列表字典数据的展示效果如下所示。我们在微信框架里面也使用了这些页面组件，实现字典的绑定处理，如下所示。

同时，我们则可以在微信后台对数据字典进行维护即可进行实时的数据更新。

3、设备维修案例功能介绍

本节介绍的是设备维修案例的微信应用场景，该需求主要围绕固定资产（如医疗设备）的微信应用展开，包括录入及查询资产信息、资产盘点、设备的维修保养、日常巡检、维修、计量检测等事务。

整个案例微信端应用采用的是H5页面以及微信的JSDK进行相关的接口开发，符合微信的界面风格。后端管理就是本后台管理系统。

3.1组织机构及用户分类（角色）

在系统中，根据系统应用，建立了相关的组织机构，以及对应的用户分类（即用户角色），根据不同的角色可以授权不同的功能管理界面。

组织机构如下所示。

用户角色如下所示：

系统根据角色对菜单进行不同的显示设置。

以超级管理员（账号，密码为空）登陆系统，可以对整体微信功能进行设置管理。

以普通管理员（账号gl，密码为）登录系统，可以对相关的设备信息进行维护管理，如下所示。

3.2 微信菜单

在微信端，我们需要根据我们的应用，设置一些功能菜单，我们可以通过后台进行菜单的设置，然后通过接口提交到微信服务器即可。

这样我们提交菜单后，在公众号上就可以对相关的功能进行操作了。

3.3设备添加及查看

在我们应用系统中，一般都为每个设备指定一个设备编码，我们通过生成二维码后，可以通过微信扫码进行设备信息的添加或者完善，以及相关的操作。 设备二维码采用连接+设备编码的方式生成，如下所示：

设备二维码的生成测试页面地址是：/h5/Test，测试生成二维码的界面效果如下所示。

有了这些带有链接地址的二维码，当用户使用微信扫码操作的时候，会指定调整到对应的连接，实现相应的设备添加、维修保养、日常巡检、维修、计量检测等事务。

在微信端使用对应的功能菜单扫码（如使用【设备管理】=>【设备信息录入】扫码上面的设备二维码），那么就可以进行设备信息的添加操作了。

如果是设备信息查看，那么在微信端列出主要的设备信息；