BYR Achieve · 镜像论坛

【别想歪了】在坚持了三天之后我还是献出了自己的第一次三天前，我突发奇想，看见朋友圈疯转的各种测试题，我也想去实现一下（可我只是个小白），在这三天的水深火热之中，终于在刚刚做了出来，在此写下本次学习以及实现过程，在文章结尾附上链接，希望大家多多批评指教~ 一、申请微信公众平台（30min）现在微信公众平台可以以个人的身份申请，也没有太多的审核，直接就能申请成功。二、想要实现的功能想要实现测试的功能，比如当用户向平台发送关键字，如“测试”后，平台会自动回复链接地址，在点击链接后进入测试页面，在测试页面点击测试后显示结果。三、具体实现过程虽然前段后端都需要稍微了解一点，但是用上的其实并不多，只是对于我这个小白难度略大，基本都是边查边学边用的。 1）测试首页面（适配问题3h，跳转按钮4h，了解相关名词含义1h）首先要有一个测试的首页面，内容包括该测试的主要内容（自己发挥就好，主要是为了吸引用户）还有一个测试按钮，点击该按钮得到测试结果。该页面需要自己去实现，用到HTML,CSS,JS等，除了那些美化布局的代码，如何适应手机端打开网页的大小（也就是屏幕适配问题）以及随机跳转以得到测试结果是最核心的两部分。适配问题：我所做的第一个界面中只有一样图片（我把所有内容和文字都P在了一张图上，为了方便），所以在写尺寸的时候只要不要用px而用%就可以解决这个问题，在网上也查到了相关的适配技术，比如首先获取屏幕的尺寸然后加载相应的CSS文件，不过我不是很懂CSS….在这个方面今后还是要不断的去学习。测试按钮：同样由于缺乏HTML,CSS,JS等知识，我只能做出一个很简陋的button按钮，在onclick事件中自己定义一个随机跳转函数来实现页面的随机跳转（学习这个很简单的随机跳转函数就花费了不少的事件才看懂。）编写好了首页之后，要想让其他人能够访问得到这个页面，就需要把它上传到服务器上，这也是我遇到的第二大麻烦，啥是服务器啊！？我只能从百度百科扫盲开始，一步步了解相关知识，后来终于找到新浪SAE可以提供这个服务，又开始研究SAE如何使用，如何上传代码，如何访问自己的页面…… 2）测试结果页面（1.5h）这次一共设计了24个测试结果页面，需要在微信公众号的后台分别做好每一个页面的预览版，并得到每一个页面的链接，放到首界面的随机跳转代码中。 3）公众平台的自动回复到此为止测试首页已经和测试结果页面链接好了，只需要在微信公众号中引导用户去点击链接即可。在微信公众号的后台设置好相应的关键字，并回复测试首页的链接，这样就实现了整个功能。四、总结 1.新手在第一次的摸索中总是要走许多弯路的（5h）开始以为微信公众号的后台只能回复文字或链接，而不能把链接附在文字中，就像HTML中<a href=”http://www.xxxxx.com”>这是链接</a>，开始认为这是不能使用的（后来才发现我在第一次试验的时候忘记了加上http://）我就上网查如何才能实现这一功能，也就是从这了开始，我第一次跑偏，而且花费了大量的时间去研究如何用其他方法实现，在查询一段时间之后，发现了微信公众号后台的“开发者中心”在这里可以把用户发送给公众号后台的内容，由微信作为中介，转发给自己的后台，并通过自己后台根据收到的内容做出相应的处理，并返回给微信，然后微信再把结果发送给用户，那么问题来了，啥是后台啊？后台在哪呢？后台怎么处理啊？我又开始了不断地百度……也不知道过了多久，我终于弄懂了这个流程，首先在SAE创建了一个应用，把在网上copy的可以实现自动回复的PHP代码稍加修改之后上传了上去（对于一个一点都不懂PHP的我这是多么的痛苦啊！），并成功在微信后台启用了服务器配置（那个TOKEN总是验证失败，简直让我要绝望了！）稍加调试后终于可以按需求返回链接文字了，不过还是有一定代价的，微信后台自带的自动回复等功能全部都被停用了。 2.感想从开始了解到最后实现大概用了15个小时时间，主要是因为自己懂得太少，走了很多弯路，不过在这些弯路中我也学到了很多其他的知识。对于HTML,CSS,JS等知识的匮乏是硬伤，直接导致了制作过程中的需要先凭空想出一项功能，再去百度是否可以实现，能实现就去学着做，实现不了再继续凭空想……而且在制作过程中遇到的麻烦也层出不穷，各种BUG %￥！%@……设计出来的页面也很粗糙，分辨率和美观都大打折扣。总之能真正做出来一个能让别人用的东西还是很有成就感的，虽然有很多不足，但毕竟是第一次，而且也发现了自己的很多问题，也知道了自己该去向什么方向努力，想到的事都去试着做一做，还是很有好处的~ 我所做的测试题是关于“六一”的测试，奉献给了“识趣儿”微信公众号，关注后回复“六一”即可看到我所做的粗糙的成果，请大家多多指教~（※※※注：这不是广告！※※※） http://mmbiz.qlogo.cn/mmbiz/tBPbdz96lYImG6BAdIPy8mYMAkW8opanh9ZlMl902CAUMmEw03ACFdDm3ZPYicZeLBONeYFxJlzHHibdHaAkKlNg/0?wx_fmt=jpeg PS：在附件中附上我所使用的（自己写+网上查到）代码及图片~本人微信号：cy450444174 对技术充满渴望的小伙伴们可以加我好友一起交流与学习~共同进步~ 附件(4.9KB) index.html 附件(2.2KB) index.php