2018-09-29

歌路营公益活动【为爱走一路】

偶尔参加一下公益活动！

2018-09-04

Planting绘制css的translateZ影响

话不多说看个例子，这个是使用translateZ的css 之后对渲染性能有多少影响
http://works.ibeeger.com/dev/chrome/
单纯从视觉角度就能感觉出来前后的差异，分析了6秒钟，结果页一目了然。
在这里插入图片描述
下图是启用translateZ的效果

Painting 占比很大，我简单的查了下影响panting的像背景图片、颜色等因素

然后取消使用咱们看看结果
在这里插入图片描述
差距很明显，下次进行位置样式对比 translate 和 top left ；
也可以自己动手实践下。
最后奉上源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>transform-渲染性能</title>
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <style>
        *{ 
            margin: 0;
            padding: 0
        /*    -webkit-transform: translateZ(0);
            -ms-transform: translateZ(0);
            -o-transform: translateZ(0);
            transform: translateZ(0);*/
         }
         .box{
             width: 100px;
             height: 100px;
             box-sizing: border-box;
             border:1px solid #ccc;
             display: flex;
             float: left;
         }
         #btn{position: absolute; left: 50%; top: 50%;
            width: 300px;
             height: 80px;
             color: #c00;
             background-color: #fff;
             border:1px solid #f00;
             display: block;
             border-radius: 20px;
             cursor: pointer;
             -webkit-transform: translate(-50%, -50%);
             -ms-transform: translate(-50%, -50%);
             -o-transform: translate(-50%, -50%);
             transform: translate(-50%, -50%);
             z-index: 999;
         }
    </style>
</head>
<body>
    <button id="btn">开启</button>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div><div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div><div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <script>
        var open = false;
        var doms = document.querySelectorAll('.box');
        document.getElementById('btn').addEventListener('click',function(e) {
          open = !open;
          this.innerHTML = open ? '关闭优化' : '开启优化'
        });

        function change() {
             doms.forEach((dom) => {
               !open ? dom.style.transform = ' translateZ(0)' : dom.style.transform = '';
               dom.style.backgroundColor = `rgba(${parseInt(Math.random() * 255)},${parseInt(Math.random() * 255)},${parseInt(Math.random() * 255)},1)`
             })
            requestAnimationFrame(change)
        }
        change()
    </script>

</body>
</html>

文章来源: Planting绘制css的translateZ影响

2018-08-28

点滴

【团建】草原两日游

忙了几一段时间终于有时间休息休息了，加油努力~

文章来源: 【团建】草原两日游

2018-05-13

技术

webpack前端开发环境配置整理

前后端分离已经不是什么新鲜事件了，虽说仓库已经分开开发了，但是数据接口还是避免不了的，如何方面快速成功的调用到后台的服务也需要前端不断的get新技能，今天就分享一下前端本地开发环境的配置。
可能涉及的知识点：
1、后台：跨域、鉴权
2、nginx 配置
3、webpack 配置

就拿 vue 项目 vue init webpack 创建的项目，以前的文章介绍过vue create 和 vue init 区别，有兴趣的小伙伴可以翻翻下。

这个是项目整体目录
从简单到复杂一步一步循序渐进，如果你的项目里面只是通过接口查询数据，都是通过携带参数取数据，这类情况可以只通过配置webpack的 proxyTable 就可以解决，

更多

2018-04-14

其它

如何用拼音输入不认识的字

用拼音的小伙伴，有时候碰见自己不认识的汉字，不知道怎么读，没办法把文字打出来。我前几天从小伙伴哪里get到的新技能，分享下~ 啦啦啦

在中文输入法情况下，敲u字母然后用拼音拼出来偏旁部首，就可以找到你要打的汉字了~

哈哈哈

文章来源: 如何用拼音输入不认识的字

2017-07-04

技术

微信公众号前端开发学习整理

前两天有同事问微信自定义分享没有生效的，以前开发过，作为一个前端中间碰见的问题可能会比较多，今天就花一些时间整理下。

下面几点可能需要注意下

获取access_token
获取ticket
签名算法的实现
权限配置

上面这三点都是在服务端实现（本文例子都是用nodejs去实现）

获取access_token

这步需要在微信公众号后台添加ip白名单

const https = require('https');

https.get('https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET
', function(d) {
    let str = ""
    d.on('data', function (r) {
        str+=r
    })
    d.on('end', function () {
        console.log(str)
    })
})

获取ticket

根据第一步获取的access_token来获取ticket

其实和上面的代码一样只不过请求的地址是另外一个参数也不一样

https.get('https://api.weixin.qq.com/cgi-bin/ticket/getticket?type=jsapi&access_token=${access_token}',function(d) {
    let str = ""
    d.on('data', function (r) {
        str+=r
    })
    d.on('end', function () {
        console.log(str)
    })
})

签名算法

这里需要的字段有

noncestr 自己按要求随机生成
jsapi_ticket 上一步获取的结果
timestamp 获取时间戳

url 需要获得权限的页面地址

var crypto = require("crypto");
const querystring = require('querystring');
var input = {
 noncestr: Math.random().toString(36).substr(2),
 jsapi_ticket: 'HoagFKDcsGMVCIY2vOjf9nUvyztP12HK4UOcxRCtyL_7ETi5mhBkQ5CIIRx5tcqbq3Lm7L8jiZkcOy4_gd6vNg',
 timestamp: Date.now(),
 url: 'https://xym.ibeeger.com'
}


最后关键一步，在h5页面config 调用的时候需要
timestamp,nonceStr,signature,这三个字段对号入座才能够成功调用权限。

```javascript
wx.config({
    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
    appId: '', // 必填，公众号的唯一标识
    timestamp: , // 必填，生成签名的时间戳
    nonceStr: '', // 必填，生成签名的随机串
    signature: '',// 必填，签名
    jsApiList: [] // 必填，需要使用的JS接口列表
});

时间不早了，后面给再补充一个完整的demo，

========== 更新提供一个接口 ============
https://ibeeger.com/wxsign/sign?appid=1234444&secret=xxxxx123123&url=https://xym.ibeeger.com

======= android bug问题 =======

分享朋友圈的需要两个事件都配上

'onMenuShareAppMessage',
'onMenuShareTimeline'

文章来源: 微信公众号前端开发学习整理

2017-06-04

技术

微信支付服务端开发整理

这篇文章出现也算是机缘巧合，去年年初，还在上家公司的时候，由于java后端工作量大抽不出人员进行微信支付开发的工作，我就硬着头皮上了，用nodejs （expressjs）+ mongodb 开发完成，迭代修复了几次bug，要不就没缘分给大家分享了。因为涉及到money 所以这块我尽可能把容易出问题的地方说下。

步骤大概是这样的
1、下单：携带自己的订单id [‘out_trade_no’]
2、下单成功之后：记录自己的订单id，用于后面的支付成功的状态更新
3、等待微信端支付：支付成功之后会调用 [‘notify_url’] 回调地址
4、支付成功回调接口：携带 [‘out_trade_no’] 更新支付状态

更多

2017-06-03

技术

微信支付前端开发整理

这篇说下前端部分，流程上一篇已经介绍了，第3部是调用微信端的支付方法

这里再把详细的步骤通俗一下：
1、首先前端选择商品下单调用自己服务器的接口
2、服务端收到后，生成自己订单id并保存，在服务端请求微信的下单接口，
3、微信下单接口返回之后再通知到前端，package字段，调用微信的支付方法
4、微信支付成功或失败进入各自业务流程
5、成功之后会通知的自己的服务接口，携带自己的订单id 用语更新状态。

更多

2017-05-25

技术