如文档 ，h5 编译后的静态文件目录，存储图片等静态资源。

试试

npm cache clean --force

参考 https://stackoverflow.com/questions/40566348/maximum-call-stack-size-exceeded-on-npm-install

@Loocor ，首发论坛了

Taro Next

自 Taro 2.0 起，我们将会启动对整个 Taro 系统架构的革新，这次革新我们将其称之为 Taro Next。Taro Next 革新完成之后，Taro 本身的拓展性、稳定性、可维护性都会大幅提高，相应地，使用 Taro 的开发者也会获得更好的开发体验，降低更多开发成本和学习成本。

我们目前已经完成了编译系统和小程序端的重构，通过 npm i -g @tarojs/cli@next 安装 Taro CLI 预览（alpha）版之后，使用 taro init 创建新项目即可体验 Taro Next 的新特性：

同时支持 React/Vue/Nerv 三种框架

在旧版本的 Taro，我们以微信小程序的开发规范为基准，使用 React/JSX 的方式来进行开发。而在 Taro Next，我们把这一思路量化为一个编程模型：

设微信小程序生命周期为一个 interface，不同的框架实例的生命周期虽然不尽相同，但我们可以根据框架生命周期分别新建一个 class 去 implements 小程序生命周期的 interface。相应地，小程序的组件/API/路由规范可以使用同样的思路和模型让不同框架的代码，运行在不同的端上：

不限制语言、语法

由于 Taro Next 的架构出现了变化，表面上来看 Taro 从一个编译型框架变成了一个运行时框架。但究其内核是整体的设计思路出现了变化：从前是「模拟（mock）」，现在是「实现（implements）」。在 Taro Next 我们实现了 React 在小程序中的完整支持，因此这类曾经的 Taro 无法运行的代码在 Taro Next 中完全没有压力：

import { View } from '@tarojs/components'
function Page (props) {
    const view = React.createElement(View, null, props.text)
    return [view, React.Children.only(this.prosps.children)]
}

在旧版本的 Taro 中我们对 JavaScript 和 TypeScript 进行了 First Class 的支持，Taro Next 我们更进一步，原理上最终可以编译到 JavaScript 的语言都可以用来构建 Taro 项目，以下是一个在 Vue 中使用 CoffeeScript 的例子：

// config.js
{
    webpackChain (chain) {
        chain.merge({
            module: {
                rule: {
                    test: /\.coffee$/,
                    use: [ 'coffee-loader' ]
                }
            }
        })
    }
}

<template>
    <view>{{ title }}</view>
    <view>{{ text }}</view>
    <input v-model='text' />
</template>

<script lang="coffee">
export default
    props:
        title:
        type: String
        required: true
    data: ->
        text: 'text'
</script>

更快的运行速度

运行时性能主要分为两个部分，一是更新性能，二是初始化性能。

对于更新性能而言，旧版本的 Taro 会把开发者 setState 的数据进行一次全量的 diff，最终返回给小程序是按路径更新的 data。而在 Taro Next 中 diff 的工作交给了开发者使用的框架（React/Nerv/Vue），而框架 diff 之后的数据也会通过 Taro 按路径去最小化更新。因此开发者可以根据使用框架的特性进行更多更细微的性能优化。

初始化性能则是 Taro Next 的痛点。原生小程序或编译型框架的初始数据可以直接用于渲染，但 Taro Next 在初始化时会把框架的渲染数据转化为小程序的渲染数据，多了一次 setData 开销。

为了解决这个问题，Taro 从服务端渲染受到启发，在 Taro CLI 将页面初始化的状态直接渲染为无状态的 wxml，在框架和业务逻辑运行之前执行渲染流程。我们将这一技术称之为预渲染（Prerender），经过 Prerender 的页面初始渲染速度通常会和原生小程序一致甚至更快。

更快的构建速度和 source-map 支持

作为一个编译型框架，旧版本的 Taro 会进行大量的 AST 操作，这类操作显著地拖慢了 Taro CLI 的编译速度。而在 Taro Next 中不会操作任何开发者代码的 AST，因此编译速度得到了大幅的提高。

正因为 AST 操作的取消，Taro Next 也轻松地实现了 source-map 的支持。这对于开发体验是一个巨大的提升：

不忘初心

在做到以上各项特性的同时，我们也没有丢掉原来就已经支持的特性：

• 支持微信小程序、百度智能小程序、支付宝小程序、QQ 小程序、字节跳动小程序
• 使用原生小程序第三方组件/插件
• 多端条件编译
• 跨端 API 和样式处理

这些特性基本涉及到了小程序开发的方方面面，虽然是预览版，但 Taro Next 已经具备了开发生产级小程序的准备，在 Taro 团队内部和兄弟团队也有多款小程序正在使用 Taro Next 进行开发。而在 Taro Next 的 H5 端和移动端，我们还在进行紧张的开发。当 Taro Next 测试（beta）版发布时，使用 Taro Next 构建的一套代码，就可以同时运行在各种小程序、快应用、H5 和移动端当中。在未来，我们还会把 Taro Next 的能力开放出去，让开发者只要写少量的接入代码，就可以使用自己喜欢的任意框架（Angular, Flutter, svelte...）开发小程序或多端应用。

牢记使命

正如我们在 Taro 2.0 发布时所言：

节物风光不相待，桑田碧海须臾改。

20 年代呼啸而来，下一个 10 年，很多框架都会死去，很多技术也会焕然而生，没有什么是不变的，唯一不变的只有变化，我们能做的也只能是拥抱变化。

前端技术一直在高速发展，流行的技术和框架每年都各不相同。但我们始终没有忘记开发 Taro 的初心和使命：降低开发成本，提高开发体验和开发效率。

「不忘初心，牢记使命。」

这就是 Taro 团队拥抱变化的方式。

参考资料

[1] 小程序跨框架开发的探索与实践: https://www.infoq.cn/article/TMqBzVFTSiQTUbgxydPm

[2] Taro Next 旧版本迁移指南：https://github.com/NervJS/taro/blob/next/docs/migration.md

[3] Prerender: https://github.com/NervJS/taro/blob/next/docs/prerender.md

[4] 性能测试：https://github.com/NervJS/taro-benchmark/tree/next

[5] 与其它新型小程序的对比：https://github.com/NervJS/taro/blob/next/docs/difference-to-others.md

珍爱生命，从我做起，快点戴上口罩吧。(*￣︶￣)

采用 Tarojs 跨端框架，采用腾讯云源开发模式，采用基于腾讯云的五官分析的人脸识别，实现了自动为头像戴上口罩的功能。

源码地址：https://github.com/shenghanqin/quick-mask。

作者简介：盛瀚钦，沪江CCtalk前端开发工程师，Tarojs框架的issue维护志愿者，主要侧重于前端UI编写和团队文档建设。

主要功能

• 智能识别人脸，进行五官定位
• 支持多人识别
• 支持添加加油图片

扫码预览

微信搜一搜：快快戴口罩

小程序截图

Tarojs云开发模式

Taro 是一套遵循 React 语法规范的 多端开发 解决方案。使用 Taro，我们可以只书写一套代码，再通过 Taro 的编译工具，将源代码分别编译出可以在不同端（微信/百度/支付宝/字节跳动/QQ/京东小程序、快应用、H5、React-Native 等）运行的代码。

本来呢，我的方案是小程序配合放在腾讯云个人服务器搭建的 nodejs + express实现的API服务。只不过呢，我个人配置的API请求不够理想，因为从小程序到腾讯云个人服务器再到腾讯云服务，中间路径比较长。

此时发现，Tarojs已经集成了腾讯云云开发模式，从小程序+个人服务器切换到腾讯云开发模式，也就花了一个多小时的时间（历经了熟悉云开发、配置云开发环境等小细节）。

// taro/src/pages/wear-a-mask
Taro.cloud.callFunction({
  name: 'analyze-face',
  data: { fileID: '12345' }
}).then(res => console.log(res))

// cloud/functions/analyze-face 腾讯云人脸识别效果
return new Promise((resolve, reject) => {
  // 通过client对象调用想要访问的接口，需要传入请求对象以及响应回调函数
  client.AnalyzeFace(faceReq, function (error, response) {
    // 请求异常返回，打印异常信息
    if (error) {
      const { code = '' } = error

      resolve({
        data: {},
        time: new Date(),
        status: -10086,
        message: status.FACE_CODE[code] || '图片解析失败'
      })
      return
    }
    console.log('AnalyzeFace response :', response)

    // 请求正常返回，打印response对象
    resolve({
      data: response,
      time: new Date(),
      status: 0,
      message: ''
    })
  })
});

腾讯云五官识别

其实，启发我做这个小程序的是这两个文章，《「圣诞特辑」纯前端实现人脸识别自动佩戴圣诞帽》和《我要戴口罩 – 为微信、微博等社交网络头像戴口罩》。

因为新冠病毒疫情蔓延，而戴口罩就是一个必备的预防措施啦。那怎样才能创新呢，我在使用“我要戴口罩”小程序过程中发现，口罩的位置是手动移动的，我就想如何自动戴过去呢，正好先前看到的“自动识别戴圣诞帽”，那我来一个戴口罩就好了。

在“自动佩戴圣诞帽”中，使用的方案是纯前端的face-api，想放到小程序中就会有如下几个小问题：

• face-api 的识别模型有 5M 大小还多，即使纯前端加载，也显得比较大。而小程序的canvas与web网页中的还是有差异的，没法直接用face-api。
• face-api放在nodejs上加载，还需要配合tensorflow和canvas模拟。实际实现后发现，图片识别过程还是比较慢的（图片上传后、获取图片内容、识别五官位置、返回五官数据），容易让接口请求发生超时的情况。

在使用腾讯云的过程中，我就发现，腾讯云的人工智能大类目下居然有人脸识别功能，细致推究发现里面有“五官分析”，其返回的数据跟face-api返回的数据格式还是非常像的，“人脸识别”的每月免费额度10000次，当时就让我开心了一大把。

当然，使用过程中非常大的坑就是，我的实现过程是需要上传1M以上大小的图片，而“五官分析”签名方法需要TC3-HMAC-SHA256，官方提供npm版本tencentcloud-sdk-nodejs是不支持这个签名方法的，需要从官方GitHub库的signature3分支上下载对应的代码。

裁剪图片

在“我要戴口罩”小程序中的另一个痛点就是如果上传一个长方形图片，会被强行变成正方形。我就想如何裁剪出正方形图片呢，此时在npmjs仓库中发现了taro-cropper这个强大的图片裁剪插件。

口罩定位

从“五官分析”中得出人脸的五官数据后，如何基于此给人脸戴上口罩呢？“自动识别戴圣诞帽”是基于“三庭五眼”来计算出圣诞帽的位置，而口罩呢，其实更简单，获取嘴部的中点位置，再旋转缩放一下就行了。

• 获取嘴部信息，请先阅读《「圣诞特辑」纯前端实现人脸识别自动佩戴圣诞帽》，再看taro/src/utils/face-utils.js中的getMouthInfo方法。
• 口罩定位呢，可以看下方代码~

let shapeList = info.map(item => {
  let { faceWidth, angle, mouthMidPoint, ImageWidth } = item
  let dpr = ImageWidth / CANVAS_SIZE * (375 / windowWidth)
  const maskCenterX = mouthMidPoint.X / dpr
  const maskCenterY = mouthMidPoint.Y / dpr
  const scale = faceWidth / MASK_SIZE / dpr
  const rotate = angle / Math.PI * 180

  return {
    maskSize: DEFAULT_MASK_SIZE,
    maskCenterX,
    maskCenterY,
    scale,
    rotate,
  }
})

口罩定位

• 当 touchstart 时，保存此时的 touch 起始点，并以此时的底图和口罩位置作为旋转角度和缩放比例值计算的参考点
• 当 touchmove 时，根据起始点 和 临时的终止点 计算在 x/y 方向上的移动距离，计算参考点分别 加上这个距离，得到移动后的位置，通过移动前后的位置 计算移动前后位置的变动 计算旋转角和缩放比例
• 当 touchend 时，重置底图和口罩的位置及旋转角和缩放比例

Canvas画图

• 首先绘制底图（根据屏幕大小、图片大小计算左上角和右下角坐标）
• 绘制口罩（计算最终口罩的大小及中心位置 旋转角度,移动画布原点到口罩的中心位置，旋转画布 并绘制口罩）

在微信小程序中，canvas画图需要将网络图片变为本地图片的，如果绘制时再下载，存在下载时间挺长且容易下载失败的风险，还是使用本地图片更加靠谱一些。
在Tarojs项目，canvas画图的drawImage(src, 0, 0, 300, 300)方法，如果src为require('../../images/xxx.png')的话，一定要记住修改以下配置，否则小程序就会报http 500错误。

{
  mini: {
    imageUrlLoaderOption: {
      limit: 0
    }
}

参考项目

• 小程序：我要戴口罩，idealclover/Wear-A-Mask
• 自动圣诞帽：christmas-hat
• 自动识别人脸示例：bnk48-face-recognition
• 小程序：圣诞帽：jasscia/ChristmasHat
• face-api.js justadudewhohacks/face-api.js
• 腾讯云人脸识别： https://cloud.tencent.com/product/facerecognition
• Tarojs版本图片裁剪：SunnyQjm/taro-cropper
• 病毒演化模拟器：qqqdu/zhonghuajia

@jd_52943d2cf3181 在componentwillunmount这里咯 https://nervjs.github.io/taro/docs/tutorial.html#componentwillunmount

@jd_6872cbf37c456 文档的目录在 https://github.com/NervJS/taro-ui/tree/dev/docs ，提个PR 咯

@zimeizhuju isShow ? <View> 111</View> : (isShow2 ? <View> 222</View> : <View> 333</View>)呢

@jd_657ea9f59156b 我得意思是动态的内容是你输出的，所以你自己应该知道大概的高度，可以算出来的

@390825867-969293 你这个得去taro-ui提个issue哦