详细讲解制作一个微信H5页面的流程

背景描述

日前，微信转发相关项目开发后，这是首个微信相关项目开发。为什么是第一个？最后一个根本没有使用任何微信相关的界面。添加了一个带有表格的动画宣传页面。这一次，它被称为“微信H5页面”，但它并不觉得那么简单。之前只是自己写写玩玩，关注了微信的相关界面，也就是5分钟热度。到现在那个微信官方账号只能简单翻译(用的是百度翻译接口，完全不涉及微信接口，因为是微信演示，所以根本没看)。说了这么多，我用一个字概括就是“小白”

我在这里想吐。有段时间在微博里看到一些大牛在讨论“HTML5缩写为H5？”其实一开始我也没在意，但是就是这个微信项目开发出来之后让我觉得有点烦。也许是今天的情绪原因。

一个用于状态分析和认证的订阅号

没有

原型图需求分析领导指定的交接人员给了我一份PPT项目讲解方案和一份PPT制作的原型图。这些图纸被我用蹩脚的PS复制了一遍，省略了一些类似的内容界面。

图1 用户关注我们“* *科技公司”官方微信后的新闻推送。下面是官方微信导航。推送活动信息，导航活动添加入口。这里需要两个微信相关的接口。

界面关注/不关注微信事件。

自定义菜单管理界面

图2 用户打开或查看众筹详情时，一定要检查是否关注了我们的订阅号，需要当前微信用户的用户信息才能打开众筹详情。此界面只能由微信认证服务号使用。因为没有账号权限，所以决定申请一个只做开发使用的服务号来配合这个活动，但前提是用户必须关注我们的订阅号才能参与这个活动。因此，当两个帐户直接关联时，需要UnionID。说到UnionID，需要区分两个平台:微信公众平台和微信开放平台。对我来说，一开始，很傻，不清楚。经过“亲爱的，晚安~ ~”的解释，我意识到如果需要关联这两个账号，需要使用UnionID。先绑定账户。

报名微信开放平台。

管理中心& # 8211；微信官方账号& # 8211；Binding 其次，通过认证订阅号获取所有关注用户的unionid，保存该表备用，关注或取消关注更新该表的数据。最后，授权登录后，根据当前授权用户的信息，获取服务号并返回unionid，检查用户是否关注了订阅号，如果没有则跳转到一个二维码显示页面。

概要构思图

界面网页授权用户获取基本信息。

获取关注者列表

获取用户基本信息(UnionID机制)

图3 这个示意图实际上是一个简要的图，这个页面如果要做的话实际上需要多个附加页面。

众筹开启后，这个界面也是众筹界面给我看的。首页需要显示的信息有我的众筹详情。我可以自己养一次，分享出来让微信好友帮我养。

微信好友进入我的分享界面后，首先我的邀请是“你好，我正在参加……”。微信好友可以帮我养一次。微信好友也可以开通自己的众筹账号，或者分享给自己的微信好友。

我筹到钱后，可以10倍额度兑换优惠券。有些接口需要认证服务号或者微信认证。

界面微信分享

微信支付

微信卡卷界面

其他页面

描述游戏的规则

关注订阅号

token开发者中心配置常见问题汇总微信官方账号后台配置完成后，设置token等信息。在服务器环境中为演示文件设置令牌。如果令牌保存失败，确认模式设置为明文模式，其他模式需要先处理信息再验证返回。确认演示文件中设置的令牌与微信官方账号后台配置一致，最后输出echostr。

& lt？Php//简单总结后应该是这样的。对于后续发展来说不应该是这样的。应结合实际开发情况使用，但令牌验证仅够定义(& quot令牌& quot，& quot非官方& quot);函数checkSignature() { //如果(！已定义(& quot令牌& quot)){抛出新异常(& # 039；令牌未定义！');} $ signature = $ _ GET[& quot；签名& quot];$ timestamp = $ _ GET[& quot；时间戳& quot];$ nonce = $ _ GET[& quot；nonce & quot];$ token = TOKEN$tmpArr = array($token，$timestamp，$ nonce)；//使用SORT_STRING规则排序($tmpArr，SORT _ STRING)；$tmpStr =内爆($ TM parr)；$ tmp str = sha1($ tmp str)；if($ tmpStr = = $ signature){ return true；}else{返回false} } if(check signature()){ echo $ _ GET[& # 039；echostr & # 039];}?& gt当订阅号权限不够时，可以借助单独申请的服务号进行开发。unionid的用法上面已经介绍过了，我就不详细总结了。

在开发过程中，我们可以申请一个测试账号来开发测试。对测试号的使用有一些限制。测试号开发的web账号授权需要在测试前关注测试号，否则会提示测试号未被关注。

需要根据配置的url请求部分接口测试。我常用的方法是修改本地主机文件来实现这一点。还有一些其他的解决方法，但这是我经常使用的。

区分accessTokenaccess_token是微信官方账号的全局唯一票，微信官方账号在调用各个接口时需要使用access_token。开发者需要妥善保管。至少应为access_token的存储保留512个字符空间。access_token的有效期目前是2小时，需要定期刷新。重复获取会导致上次获取的access_token失效。因为请求的数量是有限的，所以最好缓存它。但这里我想说的是，web账号的请求也需要一个accessToken，非此即彼。网页的授权通过代码换取access_token。没有请求限制，但是仍然需要为当前登录的用户进行缓存。在请求用户信息或切换页面时，仍然需要验证用户信息。刚开始有困惑，下面总结一下。

sae作为服务器环境时需要注意的一些问题。我用sae版本的thinkphp来开发这个项目。官网下载了sae版本，sae代码版本管理工具选择了git，我就提交了代码。为什么错了？sae的环境因素决定了Memcache在使用时需要初始化。5.3以后的数据库链接模式推荐pdo模拟，所以如果使用sae官方版本直接使用内置配置，就不需要按照在线教程手动创建添加配置config_sae.php。

php函数优化的研究，目的是对url中的数据进行编码。

//base64 _ encode()；//base64 _ decode()；函数base 64 URL _ encode($ data){ return rtrim(strtr(base 64 _ encode($ data)，& # 039；+/', '-_'), '=');} function base64 URL _ decode($ data){ return base64 _ decode(str _ pad(strr($ data，& # 039；-_', '+/')，strlen($data) % 4，& # 039；='，STR _ PAD _ RIGHT))；}前端路由工具早在去年就面临公司项目的问题。当时为了解决一个cms页面不修改页面本身的问题，在加载不刷新的情况下也研究了这个问题。然而，对于多变的工作条件，没有实际的成功。但基本上是有一套不考虑性能的方案，但最后都是“没用，没优化”，不了了之。就在这时，我看到了张的mobilebone手机终端的骨架。后来由于公司重心的转移，我也没有继续思考这个问题。没想到这次用的是mobilebone。在问题面前徘徊的时候，我想到了有角，其实没必要。我也想到了vue。本来准备用vue -路由器的，但是感觉和我想要的有点不一样，就暂时放弃了。不过，我还是可以关注一下的。vue挺好的。@叶小钗在群里咨询的时候推荐了他的刀锋，但是由于时间关系，没有继续研究。以后他要好好看看，向柴哥学习。

故事的结局是为了进步。周末在家值班的时候，我尽可能的赶进度。今天沟通的时候领导说“这个要再做一个，一个H主机频道CSS3的要再做一个”。其实一开始我是想让领导送点奖励的。毕竟我以为我活该，但是领导让我经理直接找我谈话。我不得不回到我的工作岗位，告诉我的直接领导我不会这么做。之前的奖励我也没要。毕竟，这还不够。至少我的心理平衡失去了。就这样，我拒绝了领导。不知道未来会怎么样，但还是有原则性的问题。我认为我做得很好。虽然很浪费时间，我也有些心理欠账，但是更“爽”！最新的情况是项目已经被另一个同事接手了。由于需求变了，也没办法。后续会继续完善这个结局。

2015年11月24日12点31分，再来详细说说。如果其他部门需要开发技术项目，非纯技术性质的互联网公司需要提供需求批准文件。现在部门领导内部讨论了一些方案，最后选择了方案a，技术协助已经按照需求方案a实施了项目，项目交付的时候部门领导直接临时更改了方案，之前的工作白做了，但是事出有因。部门由老板直接管理，项目开发后需要填写审批文件。最后直接改了方案。据我所知，这是不尊重，不管是领导还是什么，尊重自己的决定，尊重技术工作。都是基本的。可能我说的有点过了，不是技术问题。也许看起来这是一个静态的HTML5页面。无论何时我改变计划，你都能按时交货。你需要做的就是完成它。我觉得这是对我的不尊重。我最后的选择是拒绝下一个新的需求。之前的发展是我在学，在玩。以上只是对这个发展的总结，说清楚一点，有些事情真的不是我看到的或者感受到的那么简单。这其实和这个项目要花多少钱，你开发这个功能要花多长时间是一样的。经验只能提高我们判断的准确性，但不能绝对。

VIP推荐:22门课程，总价3725元。VIP会员免费。