比木白-web

发表于 | 分类于

web

如何添加微信朋友圈分享网站页面的小图标

原因

最近在搞欧冠”数说”欧冠的h5项目时,遇到了在手机浏览器分享和微信内部浏览器分享的问题。在都分享到朋友圈的情况下,手机浏览器分享,会截当前网站的图作为分享朋友圈的小图标,而微信内部浏览器分享朋友圈的小图标就为空(什么也没有,就是一个灰色的链接图)。后来发现,原来在微信内部分享至朋友圈,必须有公众号,绑定网站安全域名,使用JS接口调用缩率图…且此配置必须经手公众号后台配置,由前端调用weixin JSSDK方可设置小图标,微信非常保护自己的内部生态～～

详情

如何添加微信朋友圈分享网站页面的小图标

findIndex与IndexOf

原因

最近在搞CBA m站的适配,其中有一个ES6的方法让我耳目一新,那就是findIndex,与IndexOf类似,但是比其强大且更灵活,其强大更灵活的在于可以利用回调函数来找到数组或者字符串中的某数据类型的数据所在的位置,而类似的在于,两者返回的结果是一致的,如果不存在返回-1,如果存在则返回数组中数组元素的下标或者字符串中字符的下标。

详情

1
2
3
4
5
6
7
8
9
10
11
12
13
let strArr = ['a', 'b', 'c', 'd', 'e'],
    char = 'e',
    anoChar = 'f';
console.log(strArr.indexOf(char));
console.log(strArr.indexOf(anoChar));
//在这里打印:
//4
//-1
console.log(strArr.findIndex((item) => item === char));
console.log(strArr.findIndex((item) => item === anoChar));
//在这里打印:
//4
//-1

上传资源连接OSS(browsers.js)

原因

最近在写拓海官网后台的需求,在上传资源时,需要上传到阿里云OSS上面,经过了一番的折腾(查资料、询问同事…)终于搞懂了上传、授权访问和下载的流程。

因为是私有域和资源,所以上传肯定需要带有accessKeyId和accessKeySecret,而访问和下载也需要带着keyId和keySecret,而访问和下载的资源链接都是临时的(30分钟一改变),因此上传时要存储到后台的字段不能为文件链接,只能是文件名称;为了防止命名重复冲突,导致文件覆盖,我对文件名称进行了处理(+时间戳+随机数)。

详情

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
import OSS from 'ali-oss';

const endpoint = process.env.NODE_ENV === 'development' ? 'oss-cn-hongkong.aliyuncs.com' : 'oss-cn-hongkong-internal.aliyuncs.com';

const client = new OSS({
    //这里为阿里云OSS服务器节点
    region: 'oss-cn-hangzhou',
    //keyId
    accessKeyId: 'xxx',
    //keySecret
    accessKeySecret: 'xxx',
    //endpoint地域节点
    endpoint,
    //阿里云OSS项目名
    bucket: 'xxx',
    //阿里云项目后面的目录
    dir: 'xxx'
});

//上传阿里OSS配置
function multipartUpload(files = [], func = () => {
}) {
    let file = files[0]['file'] || '',
        extraPoint = file['name'].lastIndexOf('.'),
        name = file['name'].slice(0, extraPoint),
        extra = file['name'].slice(extraPoint);
    //这里在上传的文件上面+时间戳+随机数
    name = `${name}_${Date.now()}_${Math.ceil(Math.random() * 10000)}${extra}`;
    return client.multipartUpload(name, file, {
        progress: (p, checkpoint) => {

        }
    }).then((res) => {
        func(res);
    });
}

export {
    client,
    multipartUpload
};

上传搞定之后,可以查看阿里OSS的文档(文档在下方链接),搞定授权访问和下载。


阿里OSS browsers.js 下载

分页删除功能交互处理

原因

最近在做小程序时,开发列表页面,列表有增删改查四个功能,在删除时,被要求需要有最优质最可靠最易于理解的交互,但是却在交互方面犯了难,如何在用户没有感知的情况下,将列表项删除.

方案

  1. 不再使用pageNum和pageSize(页码和每页多少条列表项)来进行分页,使用某一页的最后一条的id来进行分页,在删除时,直接请求当前页最后一条id的列表项后面十条.
    但是此方案有一个很大的缺点,在分布式后台系统的情况下,列表新增产生的列表项id并不会随着时间递增,并不一定id较大的一定排在id较小的列表项的后面,所以可能请求时,可能漏掉列表项.

  2. 还是使用pageNum和pageSize(页码和每页多少条列表项),只是在删除时,直接请求删除数据位置的页码的数据,如果正好分页请求到删除数据位置的页码,则不请求下一页;如果分页请求大于删除数据位置的页码,则请求删除数据位置的当前页以及下一页,而再接下来的页码,需要用户重新下拉请求.
    此方案经过检验,是最好的分页删除功能交互处理方案,所以推荐此方案使用.