标签目录：前端

以下是与标签 “前端” 相关联的文章

nodejs把html转化为image

| 前端,后端 | | 暂无评论 | 2158 views

业务需求：每个用户都可以生成自己的卡片，并分享到朋友圈。 尝试：canvas画图。但是部分安卓手机不支持，iPhone6以下不支持，最大的问题是canvas功能实现的过程是比较麻烦的，尤其是布局的部分，时刻挑战你的额GPU。网上有一个html2canvas的库，可以把指定的div转化为canvas，不过如果手机本身不支持的话，恐怕这个库也……

“前端”背后刀–Lottie

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

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

微信小程序广告收益

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

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

H5调用摄像头

| 前端 | | 暂无评论 | 8346 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的注意事项

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

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

Vue的methods、computed、watch

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

methods：是方法，就是一个普通的函数，在逻辑中手动去调取

1
2
3
4
5
6
methods: {
    //一个函数方法，this为vue对象，自由使用即可
    listRolling(){
        this.classAnimate='animate'
    }
},

ps：在生命周期中直接‘this.listRolling()’调用即可 computed：是一个计算属性,类似于过滤器,对绑定到view的数据进行处理，它不能对data或者props里的对象进行重复定义。 [c……

js的深拷贝和浅拷贝

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

深拷贝和浅拷贝最根本的区别在于是否是真正获取了一个对象的复制实体，而不是引用， 1）深拷贝在计算机中开辟了一块内存地址用于存放复制的对象， 2）而浅拷贝仅仅是指向被复制的内存地址，如果原地址中对象被改变了，那么浅复制出来的对象也会相应改变。

1
2
3
4
5
6
7
8
9
10
11
//深拷贝
var a=123;
var b=a;
a=456;
console.log(b) //123
 
//浅拷贝
var obj1={name:123};
var obj2=obj1;
obj1.name=456;
console.log(obj2.name) //456

这是个极其简单的例子，深浅拷贝一……

requestIdleCallback

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

之所以单独拿出来说这，其实是给自己一个提醒。前两天去了“汽车某某”的公司面试，一开始问我是否知道RAF这个简称，是做性能优化的时候用到的，我说是requestAnimationFrame吗，巴拉巴拉说了一些，然后问我RIF，我猜测跟RAF同类型吧，但是我没用过。回来后我查了一下，其实是这个，so it is“RIC” window.req……

js获取屏幕宽度

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

先来看一下js常见的方法 网页可见区域宽： document.body.clientWidth 网页可见区域高： document.body.clientHeight 网页可见区域宽： document.body.offsetWidth (包括边线的宽) 网页可见区域高： document.body.offsetHeight (包括边线的……