做一个微信H5页面的过程详解

发布日期： 2018-05-19 阅读量： 作者： 网络

背景描述

前几天微信转发相关项目开发后，这是第一个微信相关项目开发，为什么这个才叫第一个？上一个完全没有用到任何微信相关接口，一个动画宣传页加一个表单，这次这个名曰“微信H5页面”却感觉不是那么简单。只是之前自己写着玩，关注过微信的相关接口，也就是5分钟热度，到现在那个公众号还是只是会简单的翻译（用的百度翻译接口，完全没有涉及到微信接口，因为用的就是微信Demo，根本就没细看）。
说了这么多，总结为一个词“小白”

这里我想吐槽一下。有一段时间看见微博上有一些大牛在讨论“HTML5简称为H5？”，其实一开始我是无所谓的，但就是这次微信项目开发完以后让我觉得有些讨厌了，也许是今天的情绪原因。

现状分析

认证订阅号一枚
无

分析原型图需求

leader指定的交接员给我的是一个PPT的项目解说方案，以及一个PPT做的原型图，这些图是我用蹩脚的PS重新COPY的一份，部分相似内容界面略去。

图一

www.unofficial.cn
用户关注了我们“**科技公司”官方微信后的消息推送，下方是官方微信导航。推送活动信息，导航活动添加入口。这里需要用到两个微信相关的接口。

接口列表

关注/取消关注微信事件
自定义菜单管理接口

图二

www.unofficial.cn
用户开启或者查看众筹详情的时候必须检测用户是否关注了我们的订阅号，以及开启众筹详情需要用到当前微信用户的用户信息。此接口仅限微信认证的服务号使用。由于账号权限没有，决定申请一个仅用于开发使用的服务号用于配合此次活动，但前提还是用户必须关注我们的订阅号才能参与此次活动。于是在两个账号直接关联就需要用到UnionID。
提到UnionID就需要区分一下两个平台：微信公众平台与微信开放平台，对于我来说一开始是傻傻分不清楚的，在“Dear，Good night～”的解释下，我才明白如果需要关联这两个账号需要用到UnionID。
首先绑定账号。

注册登录微信开放平台
管理中心--公众号--绑定

其次通过认证订阅号获取所有关注用户的unionid存表备用，关注或者取消关注去更新这个表的数据。
最后授权登录后根据当前授权用户的信息，获取服务号返回unionid，检查用户是否关注订阅号，没关注的情况下跳转一个二维码展示页面。
总结思路图

接口列表

网页授权获取用户基本信息
获取关注者列表
获取用户基本信息(UnionID机制)

图三

www.unofficial.cn
这个示意图其实是一个简要的图，如果要做的话这个页面其实需要多个附加页面。

开启众筹后，这个界面也是展示我的众筹界面。首页需要显示的信息有我的众筹详情，我可以自己为自己筹一次，分享让微信好友帮我筹。
微信好友进入我分享的界面后，首先是我的邀请语“HI，我正在参加……”，微信好友可以替我筹一次。微信好友也可以开启自己的众筹账户，也可以分享出去给自己的微信好友。
我众筹到钱以后可以按照额度10倍兑换优惠券。
一些接口需要认证服务号或微信认证。

接口列表

微信分享
微信支付
微信卡卷接口

其他页面

www.unofficial.cn

描述游戏规则
关注订阅号

常见问题总结

关于token开发者中心配置的问题
公众号后台配置好以后，设置好token等信息。服务器环境下的demo文件设置好token。保存如果出现token失败，确认模式设置的是明文模式，其它模式需要对信息先处理再验证返回，确认demo文件设置的token与公众号后台配置一致，最后输出echostr

<?php //简单总结后就应该是这样子，为了后续开发不应该是这样子，结合实际开发情况使用，但token验证仅仅如此就够了
define("TOKEN", "unofficial");
function checkSignature() {
    // you must define TOKEN by yourself
    if (!defined("TOKEN")) {
            throw new Exception(&#39;TOKEN is not defined!&#39;);
    }

    $signature = $_GET["signature"];
    $timestamp = $_GET["timestamp"];
    $nonce = $_GET["nonce"];

    $token = TOKEN;
    $tmpArr = array($token, $timestamp, $nonce);
    // use SORT_STRING rule
    sort($tmpArr, SORT_STRING);
    $tmpStr = implode( $tmpArr );
    $tmpStr = sha1( $tmpStr );

    if( $tmpStr == $signature ){
        return true;
    }else{
        return false;
    }
}

if( checkSignature() ) {
    echo $_GET[&#39;echostr&#39;];
}
?>

# 微信开发 # H5页面

下一篇: 查看linux下所有用户的方法是什么

做一个微信H5页面的过程详解

随便看看