Taro引用微信小程序人脸核身问题总结
程序员文章站
2022-03-05 11:25:05
Taro 引用微信小程序人脸审核问题总结...
基础信息
Taro版本 3.0.15
人脸核身SDK:faceid-interactive-video-mpsdk (这个SDK名字可能和腾讯开发文档上的有区别,出现的问题都差不多)
开发预览主包超限
由于小程序主包限制2M,而微信小程序人脸审核SDK就占用500K。如果直接引用人脸核身小程序SDK,加上Taro编译后的胶水代码。在开发的时候就会出现超出2M的情况。
解决方案
- 将人脸核身SDK放入分包目录
- 修改SDK内部路径代码,由于人脸核身SDK 默认是放在主包目录,内部路径引用也是直接根目录。所以需要根据自己的分包情况修改里面路径引用
修改faceid-interactive-video-mpsdk内部文件路径引用方法
1、使用vs code全局搜索替换 举个例子2、自己写个node程序统一处理,有利于后期sdk升级。
上面解决sdk 文件存放问题。但是这样处理还是不够的。因为Taro会把一些公用文件编译打包至comm.js。这个就需要把这个SDK踢出Taro编译。
- 修改 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: {}, };
- 修改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