微商城详情页H5效果

这个效果是仿寺库APP的效果。

CSS

商品图

这个比较好说，向上滑动到一定阶段触发动画， 商品图变小，采用的是CSS3的translateZ() perspective 实现，当然也可以通过scale()和设置外层div宽高实现，用perspective是为了顺便实现加入购物车按钮3D翻转的效果。
颜色变灰，则是 filter:grayscale()，最后消失则是 opacity，最后的这个消失效果是个兼容iOS下图片闪烁的处理，后面再谈这个兼容问题。

商品图是用了swipe.js滑动。

1
2
3
4
5
6
7

<div class="goods-img" id="slider" style="visibility: visible; opacity: 1;">
            <ul style="width: 1032.56px;">
                 <li><img src="" alt=""></li>
                 <li><img src="" alt=""></li>
                 <li><img src="" alt=""></li>
            </ul>
</div>

详情介绍部分

一直居于底部，高度发生变化，并且是可滚动查看内容的。动画效果，主要是改变容器的height，并且绝对定位，居于底部，position:absolute;, 为了滚动， 加了属性 overflow:scroll。 一开始通过JS算出总高度和商品图高度，得到详情部分的初始高度。touchstart记录初始位置， touchmove则记录即时位置，
计算出商品图变小的比例和详情部分高度的变化。 touchend和 touchcancel的时候，位移小则回复原位，大于50则向上展开。
购物车的图标的动画效果，在iOS下会使商品图-详情部分-购物车图标三者层级混乱闪烁，-webkit-backface-visibility:hidden无效，商品图隐藏可以规避这个问题。

url 处理

微信授权后，返回的链接带有code 和 state 参数， 而code是一段字符串，而且是一次性的。
如果用户在认证后的页面将链接分享出去， 那么别的用户点击这个链接将会出现认证失败的情况。
对于这个问题，有三种处理方法：

• php 尾处理，认证后queryString，将参数中的code和state去除掉
• php 首处理，首次进入页面， queryString， 处理掉code和state参数
• JS-SDK， 分享链接时，去除掉

php 尾处理

授权成功后，queryString， 将参数code和state过滤，重新拼接字符串

1
2
3
4
5
6
7
8
9
10
11
12
13

//认证成功，处于登录状态
//todo

$params = explode('&', $_SERVER['QUERY_STRING']);
$urlHost = 'http://'.$_SERVER['HTTP_HOST'].$_SERVER['PHP_SELF'].'?';
foreach ( $params as $k => $v ){
    if ( empty($v) )  //去掉空白
        continue;
    if ( preg_match("/^code=|^state/", $v) )  //过滤 code state
        continue;
    $urlHost .= $v.'&';
}
header('Location: '.$urlHost);

公众号认证授权的几种场景

上篇博文写过了，微信授权有UnionID和Oauth2.0两种机制及两者的差别，不清楚的详见微信授权。

case 1: 推广营销活动

商家让利，会有对用户的各种优惠折扣，基于口碑拓展，KPI，用户数据？ 这些猜测不重要， 关键希望公众号涨粉，至少是数据上。
而很多用户也确实愿意褥羊毛，趁机捡点便宜，反正也就在微信里面点几下，填几下~~
这种情况就需要用户关注了，因为很多统计的是关注的用户数~~ 这时候就需要UnionID机制的授权了，对没有关注的用户进行提示并跳转到一个可关注的页面。
UnionID授权机制 伪代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

require_once(dirname(__FILE__). '../cls_oauth.php'); //引入cls
$Oauth = new Oauth($db);  
$code = htmlspecialchars($_GET['code'])? htmlspecialchars($_GET['code']):'';
	if ( !$code ){
        $Oauth->basicOauth($curUrl);
	}

    $userinfo = $Oauth->getGlobalUserinfoByCode($code);  // 全局token取用户基本信息， 可以取到是否用户关注公众号

	//未关注公众号， 不能得到 用户其他信息
    if ( $userinfo['subscribe'] != 1){
        //todo code
        header("Location: subscribe.html");  
        exit ;
    }

    //已关注公众号
    //todo code

微信授权有两种： 一种是UnionID机制的授权， 还有一种是Oauth 2.0的网页授权。

UnionID机制授权

UnionID机制授权需要 openid 和 全局的access_token,与网页授权的access_token不同,这个全局token每天有更新次数限制，而网页授权token是无限的。
请求链接： https://api.weixin.qq.com/cgi-bin/user/info?access_token=ACCESS_TOKEN&openid=OPENID&lang=zh_CN
关注的用户返回数据格式：
{
“subscribe”: 1,
“openid”: “o6_bmjrPTlm6_2sgVt7hMZOPfL2M”,
“nickname”: “Band”,
“sex”: 1,
“language”: “zh_CN”,
“city”: “广州”,
“province”: “广东”,
“country”: “中国”,
“headimgurl”: “http://wx.qlogo.cn/mmopen/g3MonUZtNHkdmzicIlibx6iaFqAc56vxLSUfpb6n5WKSYVY0ChQKkiaJSgQ1dZuTOgvLLrhJbERQQ4eMsv84eavHiaiceqxibJxCfHe/0",
“subscribe_time”: 1382694957,
“unionid”: “ o6_bmasdasdsad6_2sgVt7hMZOPfL”
“remark”: “”,
“groupid”: 0
}
，未关注则返回：
{
“subscribe”: 0，
“openid”: “o6_bmjrPTlm6_2sgVt7hMZOPfL2M”
}

openid

每个用户具有唯一的openid，用户与微信、公众号消息交互的时候都会传递openid，所以解析回调的XML是可以得到openid的。当然，也可以用一些请求链接获取，
比如 网页Oauth2.0授权的第一步https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect 。

CSS3 tansform：translateZ() | tanslate3d() 可以提供一种3d效果。

tanslateX translateY 两个属性是在2d方向移动，类似于left top的位移。而我之前看translateZ()并没有出现什么效果，还以为这个属性
目前大多数浏览器还不支持。 直到我看了这篇文章 http://www.w3cplus.com/css3/css3-3d-transform.html 才知道，需要在父容器设置
属性 perspective 和 transform-style 才会生效。

依照w3clplus这内容，我自己实现了一个例子，见 https://github.com/chendongbupt/blog-example/blob/master/3D-test.html

下面一个自动旋转的图形，设置了属性 transform:rotateY(-60deg) translateZ(173px)。 其中rotateY()将某一个面绕Y轴旋转，旋转后坐标系也会跟着旋转，
也就是说，旋转60deg，这个面的Z轴也旋转了60deg。 transleteZ()将6个面隔开，形成六边形。

那么问题来了， tanslateZ()里面的数字多大呢？

当然，直接F12慢慢改变数字，看效果，最终确实可以得到一个比较准确的值。不过，以这个例子，这里分享一个公式:

1
2
3
4

面的宽度: width = 200px
六边形夹角：$ = 120deg

Z = (width/2) * (tan($/2)) = 100 * tan60 = 173

大概计算的示例图：

This is my first hexo blog page.

坑啊。。 按好几个博客教程 流程走完了， hexo deploy 没反应， 解决方法：
1：安装部署工具

1

npm install hexo-deployer-git --save

2：config.yml 文件,需要加 空格

1
2
3

type:(空格) git
repository:(空格) https://github.com/chendongbupt/chendongbupt.github.io.git
branch:(空格) master

Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.

Quick Start

Create a new post

1

$ hexo new "My New Post"

More info: Writing

Run server

1

$ hexo server

More info: Server

Generate static files

1

$ hexo generate

More info: Generating

Deploy to remote sites

1

$ hexo deploy

More info: Deployment