|
编者按继2014年8月23日微信开发者大会北京站成功举办后，大会得到了业界人士的一致好评。尽管大会仅过去一月有余，CSDN却收到了诸多开发者的建议，无不强烈要求再次举办一场纯干货的微信开发技术会议，聆听标杆企业的经典案例，学习他们敢于吃螃蟹的经验得失。为此，CSDN即将迎来微信开发者大会深圳站活动。本次将邀请更多重量级嘉宾，内容设置更丰富。届时，来自全国各地与会者将齐聚一堂，围绕微信开发中的难点、热点及行业解决方案、未来发展机遇展开深入讨论与分享。了解更多微信开发，请访问微信技术社区。 打开朋友圈，微信俨然成为了传播信息的主流手段之一。对于许多女性而言，时常会关注一些护肤品信息，既想买到好的产品又不想花冤枉钱，又或者担心在网上买到假货。对此如何解决呢？也许大多数人会选择参照互联网信息，而妆媒体就是不错的选择，其除了向专业用户提供全球化妆品资讯外，妆媒体也会面向大众用户推出化妆品的真假评测方法。 妆媒体Vide1.0自上线以来，发展至今，粉丝量已突破10万。妆媒体微信公众号是如何开发而来的？期间遇到了哪些痛点呢？在功能设计和产品用户体验上又采取了哪些方法？一起来品读妆媒体微信公众号背后的酸甜苦辣。（注：本文是CSDN所做的微信开发系列案例之一，首发于2014年《程序员》杂志9月刊。） 中国的化妆品行业长期都处于闭塞状态，落后国际市场3~5年。有实力的从业人员或者大公司，能穿洋过海去化妆品的产地国研究，创业公司就只能参加国内的博览会。两者都无法快速全面了解国际化妆品趋势—包材、配方、产品研究等。这一需求是妆媒体在化妆品领域摸爬滚打数十载，对国内化妆品开发现状非常了解的基础上发现的。 所以当微信这个天生的CRM平台起来时，我们决定以微信为基础，做一个付费、有特色的化妆品资讯平台，将90多个化妆品主要产地国的化妆品装进手机里，让国内化妆品从业人员通过微信随时成为VIP并且查看最新和最特色的化妆品资料。 开发和调试之殇 微信公众号的开发，说简单也简单，说麻烦也麻烦，麻烦的不是开发过程，而是搭建开发环境的过程。不过俗话说得好，磨刀不误砍柴工，我们有必要花点时间来研究下如何攻破微信公众号的开发环。说白了，公众号的开发就是基于HTML/CSS/JS的移动端Web App的开发，但微信公众号和普通的移动Web App开发还略有不同，因为很多情况下我们会调用公众号的接口，而只要涉及微信接口的请求，都必须通过微信内置的浏览器来访问，如果我们想把请求放到PC桌面浏览器上运行调试，就会跳转到一个笑脸，提醒你出错了（图1）。
图1 微信应用无法直接在PC浏览器中调试 这样的安全机制和门槛是可以理解的，因为微信浏览器在Webkit内核的基础上扩展了很多方法，也包装了很多接口。此路是微信开，此树是微信栽，要想开发公众号，你就必须从此路过。这就意味着我们没法直接在PC浏览器里开发调试公众号的页面。那妆媒体的开发者们是怎么解决这个问题的呢？首先，我们要达成一个共识，在一个小小的手机上开发调试，实在施展不开，如果我们能在PC上进行开发，有Chrome的审查元素或Firefox的Firebug这样的利器，何愁拿不下公众号的开发？所以我们的目标是，在PC浏览器中进行公众号的开发和调试，在手机微信上测试结果。我们只需要两个步骤就可以实现这样的效果。 第一，用代理访问服务器 不要被“代理服务器”这个名词吓到了，其实我们只要有一台笔记本，或者插有无线网卡的台式机就足以搭一个代理。这一步对于开发过移动端Web应用的开发者来说，并不陌生，可能你也猜到了，这至关重要的第一步在微信的公众号开发中同样适用，下面我就简单叙述一下。这里主要为Windows提供方法，Mac/Linux的方法类似，点到为止，就不着重介绍了。 把电脑设置成代理服务器 下载并安装Fiddler2（如果是Windows 8，请下载Fiddler4；Mac/Linux用户可以使用Charles/Nproxy等代理工具）。安装后配置Fiddler：Fiddler菜单ToolsFiddler OptionsConnections，如图2配置。
图2 Fiddler配置过程 绑定hosts 进入windows/stystem32/driver/etc/目录。（Mac/Linux用户的hosts目录在/etc/下。）备份hosts文件，并用记事本修改hosts文件，在最后追加hosts，如：203.195.198.53 app.。这里的203.195.198.53是线上环境的服务器IP，app.是公众号所请求的域。 设置手机代理服务器 开始菜单运行cmd，打开命令行窗口，输入ipcong，找到自己的IP地址，如：192.168.2.102。以iPhone为例，进入设置无线局域网选中自己的网络，设置代理服务器和端口，如图3中的配置。 Android手机也有类似配置功能，不详细说明了。
图3 手动设置HTTP代理 原理及注意事项 自己的电脑一定要和手机在同一个网络内，否则手机无法连接到代理服务器。当手机访问app.域的时候，会访问代理服务器，而这个代理的hosts被设置成了我们指定的IP，所以访问开发环境就如同在微信里访问公众号一样。 第二，开发设计Debug模式 如果说以上的第一点是一匹好马，那这第二点就是一个好鞍。没错，好马配上好鞍才能日行千里。 要想在PC浏览器里访问请求微信公众号接口的URL，这是不可能实现的，但是我们可以通过Debug模式绕过微信的接口，继续执行接口以后的逻辑。方法有很多，需要开发者们发挥想象，各显神通。这里是妆媒体的开发者们提供的正在使用的一种方法，以供参考。 我们是通过URL后拼接参数来调起Debug模式，如：http://app./main.html?debug。 然后在代码中判断Debug并模拟微信接口返回的数据，以此绕过微信公众号的接口请求，这样就可以顺利地在PC浏览器里开发和调试了。如： i f ( wi n d o w . l o c a t i o n . h r e f .indexOf(?debug) > 0) // 模拟微信公众号接口返回的数据 else // 访问微信公众号接口 特点？弱点？亮点！ 除研发技术上的多处突破外，妆媒体在功能设计、产品用户体验上也实现了诸多创新之处。创新地图模式妆媒体将位置服务与媒体相结合，这一创举得到业内的广泛好评和认可。但从开发角度来看，这并不是一气呵成的，我们从中经历了多个版本的迭代才有了现在你所看到的效果。 众所周知，位置服务的接口提供商屈指可数，因为妆媒体的产品覆盖范围是全球，像国内比较稳定且知名的百度地图和搜狗地图API仅提供了国内陆图的API，所以遗憾放弃。 在妆媒体开发的第一个版本中，我们尝试使用了Google地图API。如我们所期望的，甚至超出我们预期的结果，使用地图服务来直观地显示化妆品出产地，这一功能获得了用户的肯定，同时也获得了很多反馈，大多数用户表示地图加载太慢。确实，在移动端的加载速度本来就捉襟见肘，再加上Google遭遇的某些“不可抗力”因素导致加载速度更加慢。 妆媒体的开发者们本着工匠精神，誓将提升用户体验进行到底。终于，在妆媒体最近的一个开发版本中，我们将Google地图迁移至了高德地图API（图4），同样覆盖全球范围，而且速度杠杠的！
图4 妆媒体利用地图服务展示化妆品出产地 微信对话框改造成搜索入口 默认情况下，用户输入的任何关键字都会先走一遍产品库的搜索，如果产品库检索不到，那么这条消息就会推送到客服消息。 普通用户的阅读权限和VIP入口 利用微信的CRM属性，普通用户只能使用10次阅读权限，并且在这个基础上引入VIP的入口。 VIP系统 和微信完美融合，获取用户头像、昵称。 VIP支付 微支付的接入极大地方便用户进行VIP的购买（图5）。
图5 妆媒体接入VIP支付 结语 自2014年5月7日妆媒体Vide1.0上线以来，发展至今，粉丝量已突破10万。除了向专业用户提供全球化妆品资讯外，妆媒体也会面向大众用户推出化妆品的真假评测方法。 公众号的发展依赖于微信的成长，妆媒体的未来和微信紧紧地捆绑在一起。我们期望微信在公众号的生态圈里可以更加开放，提供给开发者们更多接口，比如一键关注、消息模板、更智能的点对点推送，这样微信和公众号才能更好地结合在一起，也能玩得更出彩。会开发和交互UI的“伪全能”产品经理。 作者简介： 大白菜，会开发和交互UI的“伪全能”产品经理。万戈，前端开发工程师，专注于网站重构、前端技术以及PHP开发。
更多微信开发案例分享交流，请参见微信开发者大会深圳站。 CSDN特别开设了微信开发者社区供企业共同探讨、借鉴其他行业优秀的应用开发案例，为开发者带来一线“吃螃蟹”的经验得失。另外，企业/用户还可以借助微信项目对接平台，发布微信开发需求、寻找微信开发项目。
作者：大白菜万戈 |
|
|
