欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  科技

Taro引用微信小程序人脸核身问题总结

程序员文章站 2022-03-05 11:25:05
Taro 引用微信小程序人脸审核问题总结...

基础信息

Taro版本 3.0.15

人脸核身SDK:faceid-interactive-video-mpsdk (这个SDK名字可能和腾讯开发文档上的有区别,出现的问题都差不多)

开发预览主包超限

由于小程序主包限制2M,而微信小程序人脸审核SDK就占用500K。如果直接引用人脸核身小程序SDK,加上Taro编译后的胶水代码。在开发的时候就会出现超出2M的情况。

解决方案

  1. 将人脸核身SDK放入分包目录
  2. 修改SDK内部路径代码,由于人脸核身SDK 默认是放在主包目录,内部路径引用也是直接根目录。所以需要根据自己的分包情况修改里面路径引用
    修改faceid-interactive-video-mpsdk内部文件路径引用方法
    1、使用vs code全局搜索替换 举个例子

    Taro引用微信小程序人脸核身问题总结

    2、自己写个node程序统一处理,有利于后期sdk升级。

上面解决sdk 文件存放问题。但是这样处理还是不够的。因为Taro会把一些公用文件编译打包至comm.js。这个就需要把这个SDK踢出Taro编译。

  1. 修改 config文件夹下面 配置文件 增加copy配置
    module.exports = {
      outputRoot: `./dev/${process.env.TARO_ENV}`,
      defineConstants: {},
      copy: {
        patterns:
          process.env.TARO_ENV === 'weapp'
            ? [
                {
                  from: 'src/pages_sub/faceid-interactive-video-mpsdk/',
                  to: 'dev/weapp/pages_sub/faceid-interactive-video-mpsdk/',
                },
                
              ]
            : [],
      },
      mini: {},
      h5: {},
    };
    

     

  2. 修改app.config.js,不要将sdk里面的page配置进app.config.js pages 里面,否者Taro还是会编译文件。可使用webpack 插件配合处理app.config.js
    export default {
      outPushPage: {
        subPackages: [
          {
            root: 'pages_sub',
            pages:
              process.env.TARO_ENV === 'weapp'
                ? [
                    'faceid-interactive-video-mpsdk/room/room',
                    'faceid-interactive-video-mpsdk/index/index',
                  ]
                : [],
          },
        ],
      },
      pages:
        process.env.TARO_ENV === 'weapp'
          ? []
          : [],
      subPackages: [
        {
          root: 'pages_anys',
         pages:[]
        },
        {
          root: 'pages_sub',
          pages:[]
        },
      ],
      networkTimeout: {
        request: 60000,
        downloadFile: 100000,
      },
      debug: false,
      
    };
    

    config/index.js  增加 webpackChain 配置项

    import path from 'path';
    
    const changeAppJson = require('../webpackPlugin/changeAppJson');
    
    function resolvePath(str) {
      return path.resolve(__dirname, '..', str);
    }
    
    const config = {
      projectName: '诺诺网小程序',
      date: '2020-10-22',
      designWidth: 750,
      deviceRatio: {
        640: 2.34 / 2,
        750: 1,
        828: 1.81 / 2,
      },
      sourceRoot: 'src',
      outputRoot: `./dist/${process.env.TARO_ENV}`,
    
      defineConstants: {},
      // copy:{
    
      // },
      framework: 'react',
      
      mini: {
        miniCssExtractPluginOption: {
          ignoreOrder: true,
        },
        csso: {
          enable: true,
          config: {
            // 配置项同 https://github.com/css/csso#minifysource-options
          },
        },
        postcss: {
          autoprefixer: {
            enable: true,
          },
          pxtransform: {
            enable: true,
            config: {
              // pxtransform 配置项,参考尺寸章节
              selectorBlackList: ['body'],
            },
          },
          url: {
            enable: true,
            config: {
              limit: 1024, // 设定转换尺寸上限
            },
          },
          cssModules: {
            enable: true, // 默认为 false,如需使用 css modules 功能,则设为 true
            config: {
              namingPattern: 'module', // 转换模式,取值为 global/module
              generateScopedName: '[name]__[local]___[hash:base64:5]',
            },
          },
        },
        compile: {
          exclude: [resolvePath('src/pages_anys/utils/crypto-js')],
        },
        commonChunks (commonChunks) {
          // commonChunks 的取值即为默认的公共文件名数组
          return commonChunks
        },
        webpackChain(chain, webpack) {
         
          chain.plugin('changeAppJson').use(changeAppJson);
        },
    
        
      },
      h5: {
        
      },
    };
    
    module.exports = function (merge) {
      if (process.env.TEST_ENV === 'test_domain') {
        return merge({}, config, require('./prod_test'));
      }
      if (process.env.NODE_ENV === 'development') {
        return merge({}, config, require('./dev'));
      }
    
      return merge({}, config, require('./prod'));
    };
    

    changeAppJson.js 参考:webpack 插件开发

    /**
     * @desc 将第三方sdk的page手动写入 app.json 不使用Taro打包
     *
     */
    const deepClone = require('./utils');
    
    function ChangeAppJSonPlugin() {}
    
    ChangeAppJSonPlugin.prototype.apply = function (compiler) {
      compiler.plugin('emit', function (compilation, callback) {
        var filelist = '';
    
        for (var filename in compilation.assets) {
          if (filename === 'app.json') {
            // 获取app.json 内容
            try {
              const source = JSON.parse(compilation.assets[filename].source());
              const outPushPage = source['outPushPage'];
              const newPage = deepClone(outPushPage, source);
              delete newPage.outPushPage;
              filelist = JSON.stringify(newPage);
            } catch (err) {
              console.log(err);
              callback();
            }
          }
        }
    
        // 将这个列表作为一个新的文件资源,插入到 webpack 构建中:
        compilation.assets['app.json'] = {
          source: function () {
            return filelist;
          },
          size: function () {
            return filelist.length;
          },
        };
    
        callback();
      });
    };
    
    module.exports = ChangeAppJSonPlugin;
    

    到这基本解决 引用SDK编译超限问题。上面只是提供一种解决思路。应该还有其他解决方法,可自行探索。快乐源于探索


 

本文地址:https://blog.csdn.net/u010206286/article/details/110220291