logo

微信教程跳票好久了,今天总算更新一章,把通讯录这个案例完结掉,之前几章有不少朋友反映写的过于详细了,大家可能更多的是需要一些思路和方法,所以我这次是将通讯录完整代码提供下载,回复“微信代码”可以下载完整代码包,建议先下载安装了再看文章,以下是注意事项:

  1. 数据库结构有改动,大家可以将原来的数据库删除后重新创建,创建方法请查看《微信公众平台入门到精通》Vol.15,新数据库创建代码在weixincourse.txt里。

  2. 与微信接口文件为wx_interface.php,大家可以将里面源代码复制粘贴到自己的接口文件里覆盖掉。

  3. 其他的文件全部上传到SAE的代码编辑里,有同名文件可以先删除原来文件再上传。

  4. 文件说明:

    base-class.php 自定义函数,无需改动
    class_add.php 添加部门,无需改动
    class_manager.php 部门管理,无需改动
    roster_add.php 添加员工,需要改动118行的Storage空间名称
    roster_manager.php 员工管理
    detail.php 前端查看员工详情,无需改动
    list.php 前端查看部门列表,无需改动
    wx_tpl.php 回复消息的模板,无需改动
    wx_interface.php 微信接口文件,根据自己实际修改名称

  5. 后台文件没有加样式文件,所以看起来会很简陋,我主要是讲开发方法,CSS虽然我也很强,但是不在教程范畴里,有想学的可以自己找些网页模板。

  6. 程序没有进行优化,其实很多都可以用过程来写,但是为了让大家更好理解,就不厌其烦的写下吧……

昨天有不少朋友在问如何测试不知道如何绑定账号,具体步骤是先在后台添加一个员工,然后在微信公众账号里根据提示将添加的员工信息输入完成绑定,如图添加一个员工:
iimg-2
img-3
img-4


第十四章 公司通讯录开发

四、公司通讯录开发

首先回答有些朋友的疑问为什么要做通讯录案例?这个案例貌似没有什么价值,确实从现实使用来看这个案例真没啥价值,但我是希望通过这个案例教大家学会数据库的使用、后台的开发、微信账号绑定、微信搜索、记录翻页等一些基本方法,然后可以结合自己的实际需求来做开发。

上传员工照片

在添加员工文件(roster_add.php)中有一个图片上传功能,图片上传在表单里是使用input控件的file属性,如下图:
img-5

当提交表单后,程序会收到一个名称为roster_pic的文件变量,文件变量获取是用$_FILES,而不是$_GET或$_POST,如下图:
img-6

第97行是监测是否有选择文件,$_FILES['roster_pic']['name']是上传文件的原始文件名。

第103到105行获取上传文件名的后缀

第107到111行监测后缀是否合法。

第118行是保存图片到Storage里并返回上传后的图片实际路径赋值给$old_roster_pic。

注意:
1. 上传文件的数据会保存成一个临时文件,web是不能直接访问用户电脑文件的,所以我们读取的源文件是$_FILES['roster_pic']['tmp_name'] 。

  1. 由于我将添加和修改是放在同一个文件里,$old_roster_pic在表单内是用来存放修改状态下旧图片文件名称的,当表单提交后如果没有上传图片并且$old_roster_pic为空(即不在修改状态)则会提示上传图片,如果上传了图片则更新$old_roster_pic这个变量,最后写入数据库时使用的都是$old_roster_pic的值。
后台的程序基本就是这些,大家可以结合《微信公众平台入门到精通》Vol.15来理解,如果有不明白的可以后台咨询。下面主要讲前台与微信通讯的程序,都在wx_interface.php里。
微信账号绑定

微信用户的账号如何与自己网站的用户系统打通,这个是很多人关心的问题,其实很简单,我们都知道微信用户在关注公众号或者发送消息时都会有一个唯一的OPENID传过来,这个OPENID就是这个用户对应这个公众账号的唯一身份标示,我们只要将这个OPENID与自己网站的用户系统一一绑定就可以了。

方法有两种,一是将OPENID作为登陆页面或者注册页面的URL参数,当用户点击这个URL时跳转到WAP页面(即自己网站)上进行绑定,另外就是在对话框里进行绑定,我今天介绍的就是在对话框里进行绑定。

首先是检测用户是否绑定了微信号,这里我写了个函数,如下图:
img-7
第593行是定义函数的名字为check_user,函数传入的变量为$fromUsername,即微信用户的OPENID。

第598行是通过传入的OPENID为条件,检测在员工数据表中是否存在某条记录的roster_openid等于该OPENID。

第600到609行是返回函数运行的记过,如果有记录的话返回该条数据,如果没有就返回失败。

在用户关注公众账号时我就判断是否有绑定过账号,并且根据绑定情况回复不同的欢迎词,如下图:
img-8

当检测到用户关注的事件,调用check_user这个函数,如果返回不是失败则提示使用帮助,否则提示绑定账号,效果如图:
img-9

当用户输入BD字符时进入账号绑定模式,如下图:
img-10

先判断用户是否已经绑定过,绑定过给提醒中断执行。否则进入绑定流程,由于绑定操作需要分多个步骤验证多个条件,然后一并查询数据库,因此我们要保存每一步的动作和数据,这里使用memcache来保存每个用户的上一步操作。这里先保存了BD_0标示这是绑定的第一个步骤,提示用户信息为“请输入你的姓名”。

img-11

memcache服务的开启请查看《微信公众平台入门到精通》Vol.13,在程序里使用方法为在代码最开头启动memcache,如下图:
img-12

保存memcache的方法为:

$mc->set(缓存变量名, 保存的数据, 0, 缓存时间单位秒);

读取memcache的方法为:

$mc->get(缓存变量名);

我在程序的开头加了获取memcache值的代码,每次用户请求时都会从memcache中获取用户上一步的操作和数据。其中 $fromUsername."_do" 为用户操作,$fromUsername."_data" 为用户数据,用 $fromUsername 可以保证每个用户都有独立的缓存变量名。
img-13

接下来等用户输入姓名后,接口会收到新的请求,这个时候由于memcache保存过上步标示,因此这里会根据操作缓存的数据判断进入到第二步,$last_do的值是从程序开始就获取memcache值后获取的,如下图:
img-14

这里多了一个保存数据的缓存设置,保存了用户提交的姓名数据,同时将操作缓存的值改为了BD_1,然后继续提示用户输入工号。
img-15

当用户输入工号后,会进入第三步,如下图:
img-16

继续保存数据,将上一步的数据(姓名)与本次数据(工号)合并用“||”分割,同时将操作缓存的值改为了BD_2,然后继续提示用户输入手机号。
img-17

当用户输入手机号后,就进入最后一步验证,如下图:
img-18
进入最后一步后先清空操作和数据缓存,然后将之前保存的数据$last_do加上本次用户输入内容合并转换成数组,并用list函数分别赋值给$roster_name,$roster_number,$roster_mp。

再进行数据库查询满足用户姓名、工号和手机与输入数据完全相同并且roster_openid(员工openid)为空的记录,如果有符合条件的记录则更新该记录,将$fromUsername(当前操作用户的openid)保存到roster_openid里,完成绑定。
img-19

这个时候我们输入“help”就会可以进行后续操作了。
img-20

PS:“输入exit退出操作”这个也很简单,当用户输入exit的时候程序会清空操作和数据缓存,也就是说所有之前的操作和数据都没有了,即所有操作重新开始,如下图:
img-21

这个流程使用了memcache来保存一些临时变量和多步骤操作,除了用来绑定用户账户外,也适合一些调查问卷或者注册登陆操作。

微信搜索

搜索其实就是编辑模式下的关键字自动回复,我这里拿姓名搜索举例,首先我们要先切换当前模式到姓名搜索,如下图:
img-22

这部分代码与账号绑定的第一步是一样的,我们用memcache存放当前的操作,这个时候存放操作动作的缓存变量里就标示了当前是在姓名搜索状态下。同时输出提示,请输入员工姓名。
img-23

其实这步可以理解为进入网站的二级导航页面,一个网站有首页和各种导航栏目,那么在这个通讯录里帮助就是首页,你输入HELP就到了首页,输入XM就到员工查询这个二级栏目,之后除非你输入BM、GH等一些栏目名,其他的操作都默认是在员工栏目下进行。

然后根据提示输入员工名字进行查询,如下图:
img-24

从数据库中查找与用户输入一致的记录,如果没有则返回提醒:
img-25

如果查询到则返回一个图文消息,这里没有去考虑员工重名的情况,所以查询和返回结果都是只取一条记录的。
img-26

前端展现原因我只取工号、姓名、当前状态、照片等字段返回,查看详情点击阅读原文进入到detail页,把该员工的ID号(不是工号)作为URL参数传递过去,然后再做一次数据库查询将所有字段提取出来展现。
img-27

微信翻页

很多人非常好奇ZTalk的公众账号是如何实现文章查询翻页的,其实原理也很简单,只是把网页上的翻页代码稍微改装一下,然后使用memcache保存每个用户当前的页码和搜索的关键字就可以了。

在通讯录里是用部门查询来示例的,首先依然是进入部门查询这个栏目,如下图:
img-28

上面的代码除了保存当前操作状态为部门查询以外,又用另外一个memcache的变量保存当前搜索关键字和页码“null || 1”,其中null为当前搜索关键字(因为一开始用户没有输入所以是空的),1表示起始页是第一页,然后输出提示,请输入部门名称。
img-29

当用户输入部门名称后,先查询这个部门的ID号,因为在员工表里没有直接存放部门名称而是存放的与部门对应的ID号,如下图:
img-30

在这里我们获取搜索关键字会有两个来源,一个是用户输入的,一个是在翻页时在缓存中保存的,所以先得尝试从缓存里获取用户之前保存的搜索关键字,如果值为null则表示这是第一次搜索,关键字为用户输入的$from_content,否则就使用缓存中保存的关键字,这就是为什么能够翻页的关键,我们利用缓存机制存放了用户之前输入的搜索关键字。

有了搜索关键字然后查询部门表获取部门ID号,获取到后再去查询员工表里该ID下的员工总数,如果总数为0则表示该部门还没有员工直接提示。否则进入到翻页计算和结果返回,如下图:
img-31

第一个是设置每页显示的条数,我这里是设置成3条,加上封面消息和尾部翻页提示消息最后显示会是5条。

当前页码是从缓存中获取,$last_data在前面已经使用explode函数以||为分割字符变成数组,$last_data[0]为搜索关键字,$last_data1为页码,根据当前页码计算数据库查询开始的记录指针位置。

查询出结果后进行数据转化,这里做了一个数组方便后面循环输入多图文消息,每个图文消息其实就4个元素:标题、描述、图片、链接,先直接用搜索关键字+当前页等做一个封面消息,然后循环将数据库查询结果也转化成图文消息的元素。

然后是判断是否有下一页,如下图:
img-32

用符合搜索条件的记录总数去除以每页显示数量,ceil是一个向上舍入为最接近的整数的函数,就是ceil(5/4)=2,而不是1.25,这样就知道总页数了,然后判断当前页是否最后一页,如果不是最后一页则将当前页加1然后存放到memcache里,在下次翻页查询时保存数据的这个memcache变量里其实已经变成“搜索关键字||2”。

最后就是输出多图文消息了,如下图:
img-33

在微信里显示的效果如下:
img-34

可能还有很多人很迷茫,如何输入任何字符查看下一页的呢?我画个流程图可能会比较清楚,看下图:
img-35

大家可以看到其实从第二页开始用户输入的字符只是触发程序运行,而不能干涉程序运行的结果,除非输入EXIT,或者HELP这些一级栏目关键字。
img-36



关于通讯录就讲到这里了,响应朋友们的建议多讲些设计理念,希望大家能够触类旁通,和自己业务相结合。后面还有两个教程也打算用这个方法来做了,会提供完整代码,讲一些要点,就是间隔时间会比较久因为要码代码……


青龙老贼
1.1k 声望498 粉丝

WeMedia自媒体联盟创始人,自媒体人,移动互联网分析师