分类目录：前端

以下是分类 前端 下的所有文章

node发起axios请求报错：Socket hang up

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

看这一段人畜无害的代码，axios的引入和配置，再加上超长的超时限制 那么问题来了，第一个请求之后，node处理了很多逻辑操作，以至于要等好久才会发起第二次请求，第二次请求的拦截已经可以打印config，但是后面完全没有响应了，并且报错：socket hang up 最喜欢疑难杂症，因为比较有意思，但也最怕这种坑，因为老板总是催业务，不敢……

react-intl 实现 React 国际化多语言

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

随着应用广度不断增加，有时候我们需要设置多种语言，最近帮朋友做一个网站用到react-intl这个库，还是挺好用的，这里跟大家分享一下。 首先我们来明确一下它的原理，这样比较好理解，其实也比较简单，就是把需要展示的文本赋给一个key或者id，在页面中使用变量去获取这个文本，那么多种语言自然就对应了多套设置。下面所讲的都是使用方法而已，re……

JavaScript模板引擎Nunjucks

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

接触低代码后才认识了这个家伙： 提供丰富的语言特性和块继承、自动转移、宏和异步控制等等。 模板引擎就是基于模板配合数据构造出链输出的一个组件。 尽可能情况下，我们都需要读取数据后渲染模板，然后呈现给用户。故我们需要约会对应的模板引擎。 简单来说，Nunjucks就实现了在后台服务器显示内容的模板。 下面来看看一些使用方法 一、node上的……

Vue不能检测数据变动的原因和解决办法

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

熟悉vue的同学都有过这样的经历，操作数据的时候，如果“使用不当”可能让你的页面“无动于衷”。这也是大家经常会聊的问题，vue中的数据操作，没有更新视图，今天来细说一下这个点。 一、直接给data里塞入一个数据 需要在UI上显示的数据没有在data里进行声明，于是不显示。 原因： vue无法检测实例被创建时，不存在于data中的prope……

浏览器存储：cookie、webStorage、webSQL、IndexedDB、locaForage

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

随着前端业务的不断扩展，逻辑也越来越复杂，就连服务端存储都逐渐渗透到前端来。几种常见的浏览器存储，了解一下。 一、Cookie 存储 cookie 是浏览器的功能，浏览器下有一个 cookie 文件夹专门存放各个域下设置的 cookie。Cookie都是name=value的结构，name和value都为字符串。另外，Cookie是有生命……

微信小程序和H5的差异

| 前端,鲜货 | | 暂无评论 | 481 views

最近参加了几次面试，有面试官问到了这类问题：微信小程序比h5的优势是什么，为什么小程序要比h5更流畅，小程序内如何使用h5减少包大小等。 个人而言，不太喜欢这样的问题，首先，面试官的问题可能更倾向于对运行优化或者小程序的原理，而且也不是小程序和原生html的差异，毕竟原生不具备数据驱动等新开发模式，没啥可比性。后面小程序特指微信小程序，h……

微信小程序进行时优化

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

小程序的运行时性能直接决定了用户在使用小程序功能时的体验。如果运行时性能出现问题，很容易出现页面滚动卡顿、响应延迟等问题，影响用户使用。如果内存占用过高，还会出现黑屏、闪退等问题。 在优化运行时性能前，建议开发者先了解下小程序的运行环境和运行机制。 开发者可以从以下方面着手进行启动性能的优化： 合理使用 setData 渲染性能优化 页面……

H5打开微信小程序

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

在用户增长业务中，通过各种取巧方式打开微信小程序是一个特别常见的业务需求，但是微信也不想就这么“被利用”，以前微信可能还是很好的分享渠道，但是随着更新迭代，已经关闭了很多入口。我们也是在业务需求下不停的寻找更多的解决办法。 一、URL Scheme 原理：前端提供路径和appid，后端对接微信获取accesstoken和短链，最后前端负责……

js实现同步等待

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

场景：用户下单后需要支付，但是支付前需要确定用户的订单是否生成，这就需要在用户操作后，不断查询订单状态。 方法：无非就是设置一个定时器，每隔n秒去查一下，如果状态ok就走下一步，不行就等待，直到获取成功。当然了，可以设置一个最多界限。 第一种方法：promise

1
2
3
4
5
6
7
8
9
10
11
12
const check = async (times=0) => {
    if(times > 3){
        return;
    }
    const res = await new Promise((resolve) => {
        setTimeout(async () => {
            const prom = await check(times + 1);
            resolve(prom);
        }, 1000);
    });
    return res;
}

第二种方法……

userAgent判断合集

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

通过navigator.userAgent判断一些设备和环境类型，总结了一些：

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
//系统
var webkit = ua.match(/Web[kK]it[/]{0,1}([\d.]+)/);
var android = ua.match(/(Android);?[\s/]+([\d.]+)?/);
var osx = !!ua.match(/\(Macintosh; Intel /);
var ipad = ua.match(/(iPad).*OS\s([\d_]+)/);
var ipod = ua.match(/(iPod)(.*OS\s([\d_]+))?/);
var iphone = !ipad && ua.match(/(iPhone\sOS)\s([\d_]+)/);
var webos = ua.match(/(webOS|hpwOS)[\s/]([\d.]+)/);
var wp = ua.match(/Windows Phone ([\d.]+)/);var touchpad = webos && ua.match(/TouchPad/);
 
//app
var chrome = ua.match(/Chrome\/([\d.]+)/) || ua.match(/CriOS\/([\d.]+)/);
var firefox = ua.match(/Firefox\/([\d.]+)/);
var firefoxos = ua.match(/\((?:Mobile|Tablet); rv:([\d.]+)\).*Firefox\/[\d.]+/);
var webview = !chrome && ua.match(/(iPhone|iPod|iPad).*AppleWebKit(?!.*Safari)/);
var safari = webview || ua.match(/Version\/([\d.]+)([^S](Safari)|[^M]*(Mobile)[^S]*(Safari))/);
var qq = ua.match(/(QQBrowser)\/([\d.]+)/);
var baidubox = ua.match(/baiduboxapp\/([\d.]+)/i);
var baidubrowser = ua.match(/baidubrowser\/([\d.]+)/i);
var weixin = ua.match(/MicroMessenger\/([\d.]+)/i);
var iqiyi = ua.match(/iqiyi\s*IqiyiVersion\/([\d.]+)/i);
var uc = ua.match(/(?:ucbrowser|ucweb)\/([\d.]+)/i) || typeof ucweb !== 'undefined';
var qqApp = ua.match(/(QQ)\/([\d.]+)/);
var readApp = ua.match(/iqiyireader IqiyiReaderVersion\/([\d.]+)/i); // 爱奇艺阅读
var readPlugin = ua.match(/IqiyiVersion_Reader\/([\d.]+)/i); // 爱奇艺阅读插件
var youku = ua.match(/Youku\/([\d.]+)/i);
var xigua = ua.match(/VideoArticle\/([\d.]+)/i);
var toutiao = ua.match(/NewsArticle\/([\d.]+)/i);
 
//设备
var oppo = ua.match(/OPPO (\w+) |OppoBrowser\/(\w+)/i);
var vivo = ua.match(/vivo (\w+) /i);
var sumsung = ua.match(/SM-(\w+) /i);
var le = ua.match(/(?:Letv|Le) (\w+) Build/i);
var mi = ua.match(/(?:MI) ([\w ]+) Build/i);
var huawei = ua.match(/(?:HUAWEI ([\w-]+) Build)|(?:; (?:HW-)?([\w-]+) Build\/(?:HUAWEI|HONOR))/i);
var redmi = ua.match(/(?:Redmi|HM) ([\w ]+) Build/i);
var meizu = ua.match(/(((?:meizu\/|m|mx|PRO) ?(?:[0-9]+)) ?(?:\w*)) Build/i);