• mpvue 构建优化记录

    |

    本文在mpvue提供的默认项目模板的基础上,对webpack构建过程进行了优化,使其更加符合大型的小程序项目。

    1. 清理废弃页面

    随着产品的快速迭代,项目里的部分页面会逐渐下线。为了避免下线的页面突然又要重新上线,开发同学一般会把下线页面的代码保留,仅仅在app.json里移除掉相应的页面。

    但细心的同学可能会发现,尽管已经在app.json里移除了相应页面的路径,在编译出来的dist文件夹仍然能发现已下线页面的身影,这是为什么呢?

  • 让taro用上自定义webpack配置吧(taro的h5构建过程浅析)

    |

    Taro 是一套遵循 React 语法规范的多端开发解决方案。支持用 React 的开发方式编写一次代码,生成能运行在微信小程序和H5。

    背景

    事情的起源是因为需要对生成的H5应用高度个性化的 Webpack 配置,而 Taro 默认只提供了 webpack-chain 的方式来修改webpack,导致无法与组内通用的一份webpack config 直接合并(不能用webpack-merge)。不得已之下只好从taro源码寻求解决方案。

  • 多段落多行文本溢出省略号的实现

    |

    有时候我们需要实现多行文本溢出显示省略号的效果
    例如:
    目标效果

    这个效果可以通过webkit的私有属性实现,以上限三行为例:

    1
    2
    3
    4
    5
    6
    .multi-line {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    }

    对于单个段落这个样式就够用了,但是当有多个段落时情况就不一样了

  • Vue-SSR踩坑小记

    |

    写在前面:本文只是Vue-SSR的踩坑记录,Vue-SSR的具体介绍情看官方文档及官方HackerNews demo.

    前言

    服务端渲染技术其实早已存在,早期的静态内容站点(如博客等)大多采用后端模板+上下文来进行服务端渲染。随着前端框架的兴起(React、Vue、Angular等)和网络性能的提升,趋势又逐渐转移到客户端渲染。然而,服务端渲染还是有着两个重要的优势:SEO友好首屏渲染速度快

    踩坑小记

    让人又爱又恨的官方文档与示例:

    截止到目前,Vue-SSR的官方详细文档的中文版已经出炉,配合官方的HackerNews示例基本可以解决大部分的SPA问题。主要问题出在数据预取上。(不过其实Vue-SSR的核心用法已在基本用法中说明清楚,而数据预取的方案可以有很多,官方方案只是其中的一个可选的解决方案而已)

  • 异步编程的异常处理

    |

    本文主要参考自 @黄子毅 的 Callback Promise Generator Async-Await 和异常处理的演进, 对内容进行了一定的加工整理,并修改了原文中的一些错误。

    回调

    1.无法捕获的异常

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    function fetch(callback) {
    setTimeout(() => {
    throw Error('请求失败')
    })
    }
    try {
    fetch(() => {
    console.log('请求处理') // 永远不会执行
    })
    } catch (error) {
    console.log('触发异常', error) // 永远不会执行
    }
    // 程序崩溃
    // Uncaught Error: 请求失败

    执行回调时已经不是出于原本的执行栈了,Error发生在下一轮事件循环中,所以没有被try...catch捕获