“前端”背后刀–Lottie

| 前端 | | 暂无评论 | 2171 views

最近一个项目中UI同学给了我一个json文件，说可以用lottie操作，完成一个动画——哇？！设计同学都这么牛了吗！ 话不多说，按照惯例，先上代码图： 代码不难，就是引用一个库文件，然后初始化，文章末尾附上了比较官方都手册，其中的animationData可以换成path，定义一个在线路径，这样可以在打包的时候减少包的大小，而且还可以随时……

Charles之Map Local

| 鲜货 | | 暂无评论 | 2718 views

这两天测试同学反复来找我，说他们无法mock数据，导致好多状态难以复现。因为在做连续看视频领金币的功能，有进度条，每个节点还有额外操作，所以他们要覆盖每个过程来测试。 有个同学说自己页面https无法抓取到，被我猜测了一番，说是不是换了手机或者电脑，果然，他换了电脑(俩月了)，我不知道他这么久是怎么测试的[捂脸]，今天主要是想解决一个代理……

微信小程序广告收益

| 前端 | | 暂无评论 | 4433 views

没事弄个小程序，等累计用户过千，就可以投放一些广告进去，坐等收益，想象很美好。而现实确实，收益甚少！ 广告收益计算方式 单日广告收入流水10万元以内（含）的部分，开发者可获其中50%， 单日广告收入流水超过10万元的部分，开发者可获其中30%。 以单日广告收入15万元为例，开发者收益=10万 * 50% + 5万 * 30% = 6.5万……

测试和开发

| 闲谈 | | 暂无评论 | 2328 views

作为一名开发，我肯定是跟广大开发同学站在一起的。 今天突然想写这么个东西，主要是因为最近公司来协助的测试都是外包，测试过程中很多能力不达标，让人有些纠结。 产品出PRD，设计出图，产品审图，开发进入，提交测试后测试介入，开发跟进，最后产品确认和上线。这是一个完整的流程。其中，出图可能会分段给到，产品可能会改需求，这两点都是开发来承担风险的……

PHPStorm破解和错误解决

| 鲜货 | | 暂无评论 | 11724 views

俗话说“祸不单行”，疫情期间在家办公，phpstorm突然不能用了，说我体验到期了，但是我之前做了永久破解的，结果整了整，后来打开就报错。。。 没办法，首先得能进入对吧，搜索了半天，网上说的也是各种方法，修改文件名啊、删除plugin啊，都是不行的，即便是所谓的“亲测可用”也都无济于事，于是这样： [crayon-67422a58a0e2……

白领陋习

| 闲谈 | | 暂无评论 | 8505 views

一般来说，在北京大公司工作的年轻白领，我们想当然的认为，无论是职业素养还是品行习惯，相对来说都是达到某种高度，以至于对得起共建文明城市的slogen。当然了，林子大了，什么鸟都有，今儿就拿几个事儿单独拎出来跟大家聊聊。 第一个场景：电梯，一般站在门边靠近电梯按键的人，在电梯打开有人下电梯后，都不会顺手按一下关门键，就这样一直等它自动关。这……

H5调用摄像头

| 前端 | | 暂无评论 | 8347 views

最近要做的一个项目需要调用移动摄像头，想必大家也都清楚，这个兼容性很不好，除了在pc上测试通过，移动端很少有可行的。最终这个功能弱化，而在端内进行。但是我还是把代码贴出来，方便学习。 HTML代码

1
2
3
4
5
6
7
8
<!--video用于显示媒体设备的视频流，自动播放-->
<video id="video" autoplay style="width: 480px;height: 320px;background: #999">当前浏览器不支持video</video>
<!--拍照按钮-->
<div>
    <button id="capture">拍照</button>
</div>
<!--描绘video截图-->
<canvas id="canvas" width="480" height="320"></canvas>

js代码

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
//访问用户媒体设备的兼容方法
function getUserMedia(constraints, success, error) {
    if (navigator.mediaDevices.getUserMedia) {
        //最新的标准API
        navigator.mediaDevices.getUserMedia(constraints).then(success).catch(error);
    } else if (navigator.webkitGetUserMedia) {
        //webkit核心浏览器
        navigator.webkitGetUserMedia(constraints,success, error)
    } else if (navigator.mozGetUserMedia) {
        //firfox浏览器
        navigator.mozGetUserMedia(constraints, success, error);
    } else if (navigator.getUserMedia) {
        //旧版API
        navigator.getUserMedia(constraints, success, error);
    }
}
 
var video = document.getElementById('video');
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
 
function success(stream) {
    //兼容webkit核心浏览器
    var CompatibleURL = window.URL || window.webkitURL;
    //将视频流设置为video元素的源
    console.log(stream);
    //video.src = CompatibleURL.createObjectURL(stream);
    video.srcObject = stream;
    video.play();
}
 
function error(error) {
    console.log(`访问用户媒体设备失败${error.name}, ${error.message}`);
}
 
if (navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia) {
    //调用用户媒体设备, 访问摄像头
    getUserMedia({video : {width: 480, height: 320}}, success, error);
} else {
    alert('不支持访问用户媒体');
}
 
document.getElementById('capture').addEventListener('click', function () {
    context.drawImage(video, 0, 0, 480, 320);
})

……

mpvue的注意事项

| 前端 | | 暂无评论 | 5427 views

最近手贱，写了个mpvue的项目，有一些问题和想法，跟大家分享一下。 比较打击人的一点是美团对这个孩子的关注下降了，从官方的log记录来看，19年以来，都没在更新了，有一些其他的框架可能更好，所以mpvue的使用可能比较受限，但是如果你是vue用户倒是可以尝试。另外是如果你在js中写了wx的方法，它是不会给你转化成my的，所以用起来可能要……