日常工作总结-2016-03-10

发表于   |   分类于   |     |   阅读次数

这个星期，接到了一个红包页面的任务，逻辑方面并不是特别复杂，但是在仔细想过之后也可以实现。最让我头疼的问题是调微信的两个接口：一个是登录接口，另一个是注册JSSDK的接口，因为我从来没有接触过这个问题，所以遇到了很多的坑，这也直接导致和我配合的后台同学受到了我的拖累，调接口用了很长很长时间。

首先我们先来看一下这个页面的逻辑，然后分析一下这两个接口的JS，最后说一说我碰到的一些坑和学到的东西吧。

1.页面的逻辑

首先来看一下页面的逻辑，我做了一张图，大致的逻辑就是这样，其中可以还包含着一些交互和动画方面的细节，我这里就详细阐述了。逻辑如下图：

2.分析接口

首先，这两个接口分别是，微信授权登录的接口和注册JSSDK的接口。

1.微信授权登录的接口

1
2
3
4
5
6

var redirect_uri = 'https://marketing.qfpay.com/v1/mkw/page_obtain?share_code=' + code;

var redirect_uri = encodeURIComponent(redirect_uri);

location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxeb6e671f5571abce&redirect_uri=https://o2.qfpay.com/trade/wechat/v1/get_weixin_code&response_type=code&scope=snsapi_userinfo&state='+redirect_uri;

具体后台是怎么处理的我不是特别清楚，大概是这样，open.weixin这个登录接口，是会接收两个参数的appid应该是公众号的一个唯一标识，标识是授权给这个公众号登陆的，还有一个参数是redirect_url这个是经过微信授权后你要跳转回的链接，这个链接是跳回到后台，后台要对url进行处理后再返回给前端的页面。

这里要注意一个问题就是本来我们要对redirect_url这个参数进行URI编码处理，原因是因为如果不进行编码处理，url传到后台的时候可能会出现问题。

2.JSSDK

这个简单来其实就是用微信给的一些方法，来调出微信一些功能，比如分享朋友圈，发送给朋友等等。也可以根据微信给出的一些方法，来禁用掉微信的一些按钮。

这也是我遇到困难最多的地方，可能是第一次接触吧，所以对其中的一些原理不是太了解，所以做了很多蠢事，再次对后台配合的同学感到抱歉啊，现在就来分析分析这个JSSDK吧。

首先我们可以看一下微信的官方文档，点击这里。

第一步我们暂时忽略，引入JS文件，这里要注意http和https协议要引入的JS是不一样的这里大家要注意一下。

第三步，wx.config这个接口，我们需要先注入一些配置信息，我在这里也遇到问题，这个是我粗心没有仔细阅读文档，在jsApiList这个配置项当中，之后所有要调用的方法都要先通过这里注册，如果没有的话，下面的调用都是无效的。

第四步，ready接口中可以监听各个接口的事件，比如点击哪个按钮后出发什么事件等等。（可能我说的不够准确，按我自己的理解来说）。

下面来读一下代码，来总结和再次理解一下，代码是原来同事已经写好的一个一些代码，就是做JSSDK注册的。我们只要读懂，并能按实际应用来修改就好了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76

//这里是来发一个ajax来获取一些，这里是用了一个原生的ajax请求

var configWx = function(cb) {
		//新new了一个xhr对象
        var xhrHttp = new XMLHttpRequest();
        //取用get请求去访问这个接口，这个接口的作用可能是会返回一些需要wx.config的配置项
        xhrHttp.open("GET",'/v1/manage/wxjs_conf?url='+ encodeURIComponent(location.href));
        xhrHttp.send(null);
        xhrHttp.onreadystatechange = function() {
        //如果服务器返回了正确而的状态码
            if ((xhrHttp.readyState == 4) && (xhrHttp.status == 200)) {
            //把返回的text变成一个json对象
                var data  = JSON.parse(xhrHttp.responseText);
                var respCode = data.respcd;
                if (respCode === '0000') {
                    data = data.data;
                    data.debug = false;
                    //这里是要调用到的所有微信的接口 必须在这里先初始化
                    data.jsApiList = [
                        'checkJsApi',
                        'hideAllNonBaseMenuItem',
                        'showMenuItems',
                        'onMenuShareTimeline',
                        'onMenuShareAppMessage',
                        'onMenuShareQQ',
                        'onMenuShareWeibo'
                    ];
                    //这里的shareUrl是 其他JS中
                    data.url = shareUrl;
                    wx.config(data);
                    if (cb) {
                        cb();
                    }
                }
            }
        }
    };
    var share = function(data) {
        //data.appId = data.appId || 'wxeb6e671f5571abce';
        data.desc = util.removeHtmlTab(util.escape2Html(data.desc)).substring(0, 100);
        if (!data.isConfiged) {
            configWx();
        }
        wx.ready(function() {
            // 2. 分享接口
            // 2.1 监听“分享给朋友”，按钮点击、自定义分享内容及分享结果接口
            wx.onMenuShareAppMessage(data);
            // 2.2 监听“分享到朋友圈”按钮点击、自定义分享内容及分享结果接口
            wx.onMenuShareTimeline(data);
            // 2.3 监听“分享到QQ”按钮点击、自定义分享内容及分享结果接口
            wx.onMenuShareQQ(data);
            // 2.4 监听“分享到微博”按钮点击、自定义分享内容及分享结果接口
            wx.onMenuShareWeibo(data);
            wx.hideAllNonBaseMenuItem({
                success: function(){
                //注意 这里因为在hideAllNonBaseMenuItem的回调里有showMenuItems接口，所以showMenuItems也必须在jsApiList中初始化。
                    wx.showMenuItems({
                        menuList: ['menuItem:share:appMessage']
                    });
                }
            });
        });
    };
    //可以自己定义分享内容接口
    // title: '', // 分享标题
    //desc: '', // 分享描述
    //link: '', // 分享链接
    //imgUrl: '', // 分享图标
    
    share({
        link: shareUrl,
        title: shareTitle,
        desc: shareDesc,
        imgUrl: shareIconurl
    });

这个就是大概我在这个JSSDK中所用到的代码了，但是因为是第一次用，在修改代码的时候，出现了很多错误，这也导致了，分享的JSSDK注册的失败，在调用分享接口获取分享内容时，调用失败，等等的错误。下面我来举几个例子。

首先，是我在调用接口之前，没有在jsApiList当中注册，这就导致调用的这个接口是不起作用的。还有当我们调share这个函数的时候，我们把所有所有要自定义的内容其实都写到了data这个对象的里面了。当时我一开始自己手贱删了wx.onMenuShareAppMessage(data)这个，导致再按了分享按钮之后，不能正常定义分享的内容了。之后把这个加上了但还是不起作用。这是因为我蠢，我的代码是这么写的。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

wx.onMenuShareAppMessage(data);
// 2.2 监听“分享到朋友圈”按钮点击、自定义分享内容及分享结果接口
wx.onMenuShareTimeline(data);
// 2.3 监听“分享到QQ”按钮点击、自定义分享内容及分享结果接口
wx.onMenuShareQQ(data);
// 2.4 监听“分享到微博”按钮点击、自定义分享内容及分享结果接口
wx.onMenuShareWeibo(data);

wx.hideAllNonBaseMenuItem({
    success: function(){
        wx.showMenuItems({
            menuList: ['menuItem:share:appMessage']
        });
    }
});
wx.onMenuShareAppMessage({
    success: function () {
        $('#cover').css({display : 'none'});
    },
    trigger : function(){
        $('#cover').css({display : 'none'});
    },
});

不知道大家看没看出来问题。我原意是想，在定义了分享内容的同时，来监听一下这个按钮，如果确认分享以后，我执行回调函数，把引导分享的遮罩层隐藏掉。但是这里问题出现了，我很想当然的觉得这么写没有问题，但如果两次来调用这个接口，其实第一次调用时的赋值就被覆盖了。所以我不能正常的自定义分享内容了。

那应该怎么写呢？应该这样，把这个也写到data对象当中。

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

share({
        link: shareUrl,
        title: shareTitle,
        desc: shareDesc,
        imgUrl: shareIconurl,
        success : function(){
        		//回调
        },
        trigger : function(){
        		//回调
        }
    });

如上代码，就可以完成这个功能了。

其实我觉得呢，调用这些接口都是一个熟练功，第一次可能会出现很多问题，但是越用就会越熟悉，我觉得在我下次再调用这个接口的时候，我该不会出现这些低级的问题了。（话说我觉得我计算机基础真的很差）。

3. 这次项目遇到的一些坑

这次的坑我觉得有两个：

1. translate3d 位移后会占据空间

这个问题和需求是有关系的，红包要求上下打开，我使用的就是translate3d配合animation来实现的，一般在css中动画不要用position的位移，因为如果手机性能不好的话，动画会很卡。所以都会用translate、transform、animation配合来用。但是我发现了，translate之后的部分，是会占据空间的。这个导致我的红包上下打开之后，下面会把页面撑的很长，即使在我页面下面没有内容的时候，依旧会留下很大的空白。

我解决的本法是，用了一种变通的方法。

1
2
3
4
5

@keyframes downward {
  0% {-webkit-transform:translate3d(0,0,0); transform:translate3d(0,0,0); display: none; opacity: 1;}
  99% {-webkit-transform:translate3d(0,15.3333rem,0); transform:translate3d(0,15.3333rem,0); display: none; opacity: 0.5;}
  100%{-webkit-transform:translate3d(0,-20.3333rem,0); transform: translate3d(0,-20.3333rem,0); display: none; opacity: 0;}

如上代码所示，因为我发现，在页面的上边超出的部分是不会使页面变化的，所以我在动画结束之前，把向下移动的部分，变成透明并快速移到页面的上方。这样视觉上并不会有变化，也能解决这个问题，但是我觉得这始终是个投机取巧的办法。但是因为我上网没有搜索到答案，和问题的根源，所以最后用了这种折中的方法。

2. iOS微信不能识别二维码的问题

这个问题在安卓手机上是不存在的，之后再iOS中会存在。网上搜索了一下解决办法，但是说的那些问题可能微信官方其实已经解决了，所以我试了那些办法都没有成功。我不知道产生的原因是什么，但是加上这个meta标签确实是可以识别二维码了。<meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0,user-scalable=no"/>。

还学到了一些经验吧，在不同环境测试的时候，需要配置的域名都是不一样的，所以在切换环境的时候，如果你配置的域名是写死的，那等到切换环境的时候是非常辛苦而且容易出错的。就拿昨天的上线来说，我真是对和自己配合的后台小伙伴感到抱歉，因为我经验的不足，从线上测到线下。。。。来回切环境，结果就是域名得来回改。

下次我知道了，应该把需要配置的参数，写到一个对象里面，改的时候直接改这个对象就可以了，而不用在所有代码中来回改。。。。只能说我太年轻了。。。哎悲剧死了。。。。。

问题差不多就这么多总结完了，回家睡觉。