Taro各种奇怪问题集锦

1,615 阅读3分钟

Taro各种奇怪问题集锦

Taro上挂载的很多方法都没有了

给大家提供一种思路,但凡涉及到了taro api丢失了undefined的原因 基本要么都是打包或者版本不一致,在解决了版本号cli 和 @tarojs都一致的情况下 如果还出现了这个问题,那么原因只有一个,就是runtime里initNativeApi 这个方法缺失了

image

taro中很多的api都是靠源码的这个地方完成初始化,当我们加载@tarojs/taro会进到这个地方来 但是由于taro版本已经设计,打包策略/分包等诸多原因,可能会导致加载@tarojs/taro会先顺序执行其他的代码,从而导致我们的undefined报错。

那么我们解决问题的方法也很简单,先在我们的src目录下新建一个api.ts

import { processApis } from '@tarojs/shared'
export const noPromiseApis = new Set([
    'getAccountInfoSync',
    'getEnterOptionsSync',
    'offBLEPeripheralConnectionStateChanged',
    'offBeaconServiceChange',
    'offBeaconUpdate',
    'offDeviceMotionChange',
    'offHCEMessage',
    'offKeyboardHeightChange',
    'offLocalServiceDiscoveryStop',
    'offLocalServiceFound',
    'offLocalServiceLost',
    'offLocalServiceResolveFail',
    'offLocationChange',
    'offThemeChange',
    'offVoIPChatInterrupted',
    'offVoIPChatMembersChanged',
    'offVoIPVideoMembersChanged',
    'offWifiConnected',
    'offWindowResize',
    'onBLEPeripheralConnectionStateChanged',
    'onBackgroundAudioPause',
    'onBackgroundAudioPlay',
    'onBackgroundAudioStop',
    'onBackgroundFetchData',
    'onHCEMessage',
    'onKeyboardHeightChange',
    'onLocalServiceDiscoveryStop',
    'onLocalServiceFound',
    'onLocalServiceLost',
    'onLocalServiceResolveFail',
    'onLocationChange',
    'onThemeChange',
    'onVoIPChatInterrupted',
    'onVoIPChatMembersChanged',
    'onVoIPChatSpeakersChanged',
    'onVoIPVideoMembersChanged',
    'onWifiConnected',
    'onWindowResize',
    'reportMonitor',
    'onGyroscopeChange',
    'offGyroscopeChange',
    'createAudioContext',
    'createLivePusherContext',
    'createMediaContainer',
    'createMediaRecorder',
    'createOffscreenCanvas',
    'createRewardedVideoAd',
    'createUDPSocket',
    'createVideoDecoder',
    'createWorker',
    'getLogManager',
    'getNFCAdapter',
    'getPerformance',
    'getRealtimeLogManager',
    'pauseBackgroundAudio',
    'pauseVoice',
    'reportPerformance',
    'stopBackgroundAudio',
    'stopRecord',
    'stopVoice',
    'onBluetoothDeviceFound',
    'onBluetoothAdapterStateChange',
    'offBluetoothDeviceFound',
    'offBluetoothAdapterStateChange',
    'onBLEConnectionStateChange',
    'onBLECharacteristicValueChange',
    'offBLEConnectionStateChange',
    'offBLECharacteristicValueChange',
    'onCopyUrl',
    'offCopyUrl'
])

export const needPromiseApis = new Set([
    'addCard',
    'authPrivateMessage',
    'checkIsOpenAccessibility',
    'checkIsSoterEnrolledInDevice',
    'checkIsSupportSoterAuthentication',
    'chooseInvoice',
    'chooseMedia',
    'chooseMessageFile',
    'compressVideo',
    'connectWifi',
    'createBLEPeripheralServer',
    'disableAlertBeforeUnload',
    'enableAlertBeforeUnload',
    'exitVoIPChat',
    'getBLEDeviceRSSI',
    'getBackgroundAudioPlayerState',
    'getBackgroundFetchData',
    'getBackgroundFetchToken',
    'getGroupEnterInfo',
    'getHCEState',
    'getSelectedTextRange',
    'getShareInfo',
    'getVideoInfo',
    'getWeRunData',
    'join1v1Chat',
    'joinVoIPChat',
    'makeBluetoothPair',
    'openCard',
    'openVideoEditor',
    'playBackgroundAudio',
    'playVoice',
    'previewMedia',
    'requestPayment',
    'saveFileToDisk',
    'scanItem',
    'seekBackgroundAudio',
    'sendHCEMessage',
    'setBLEMTU',
    'setBackgroundFetchToken',
    'setEnable1v1Chat',
    'setTopBarText',
    'setWifiList',
    'setWindowSize',
    'showRedPackage',
    'startGyroscope',
    'startHCE',
    'startLocalServiceDiscovery',
    'startLocationUpdate',
    'startLocationUpdateBackground',
    'startRecord',
    'startSoterAuthentication',
    'startWifi',
    'stopGyroscope',
    'stopHCE',
    'stopLocalServiceDiscovery',
    'stopLocationUpdate',
    'stopWifi',
    'subscribeVoIPVideoMembers',
    'updateShareMenu',
    'updateVoIPChatMuteConfig',
    'updateWeChatApp',
    'sendBizRedPacket',
    'getUserProfile',
    'stopBluetoothDevicesDiscovery',
    'startBluetoothDevicesDiscovery',
    'openBluetoothAdapter',
    'getConnectedBluetoothDevices',
    'getBluetoothDevices',
    'getBluetoothAdapterState',
    'closeBluetoothAdapter',
    'writeBLECharacteristicValue',
    'readBLECharacteristicValue',
    'notifyBLECharacteristicValueChange',
    'getBLEDeviceServices',
    'getBLEDeviceCharacteristics',
    'createBLEConnection',
    'closeBLEConnection',
    'startFacialRecognitionVerify'
])



declare const wx: any

export function initNativeApi(taro) {
    processApis(taro, wx, {
        noPromiseApis,
        needPromiseApis
    })
    taro.cloud = wx.cloud
}


const { CurrentReconciler } = require('@tarojs/runtime')

CurrentReconciler.initNativeApi = initNativeApi

然后把这个文件放在我们的入口文件的第一行

import './api'; // !important 一定要先引入api 提前hotfix taro的bug

这么做的目的是绕过taro设计的策略,手动将所有taro api进行初始化

渲染层错误 TypeError: Cannot read property '$$'

该问题主要出现在swipper的组件使用

亲测跟基础库版本无关并且跟开发者工具没有关系

主要解决方案是保持tarojs和tarocli版本一致

如果实在通过重装node_modules无法解决,那么建议通过cli taro init 一个new app 然后迁移业务代码进行解决

文本两端对齐失效

image.png

letter spacing导致了文字元素莫名的展位

image.png

安卓下 input placeholder被弹起的键盘顶飞产生偏移

解决:去掉页面高度

svg没有单独渲染

还是只能依赖于Image标签导入相对路径,没办法活用svg 标签的fill属性

SyntaxError: missing ) after argument list

代码逻辑没有任何问题,报错,但凡是用了defineConstants内的变量,没有JSON.stringfy

图片渲染mode

小程序中image不设置mode无法正常渲染,极大受限于width/height 如果不设置width/height 图片无法渲染 在web中,img src="xxxx"会展示初始大小的图片元素 小程序下无法使用auto这种渲染模式

Taro 版本升级遇到postCss版本问题

报错Error: true is not a PostCSS plugin

解决方案:手动yarn add postcss -D

Taro版本升级后 input near template

报错闭合标签问题

解决方案:找到node_modules里的html-minify 将input判断从闭合标签字符串里删掉

image.png

Taro打包 报错# error:0308010C:digital envelope routines::unsupported

rror:0308010C:digital envelope routines::unsupported
出现这个错误是因为 node.js V17版本中最近发布的OpenSSL3.0, 而OpenSSL3.0对允许算法和密钥大小增加了严格的限制,可能会对生态系统造成一些影响.

在node.js V17以前一些可以正常运行的的应用程序,但是在 V17 版本可能会抛出以下异常

解决方案:

"build": "export NODE_OPTIONS=--openssl-legacy-provider && set NODE_ENV=production && taro build --type weapp",

Taro ScrollView组件不更新,页面同层节点更新,滚动条会被重置

解决方案,参考同掘金文章