Taro各种奇怪问题集锦
Taro上挂载的很多方法都没有了
给大家提供一种思路,但凡涉及到了taro api丢失了undefined的原因 基本要么都是打包或者版本不一致,在解决了版本号cli 和 @tarojs都一致的情况下 如果还出现了这个问题,那么原因只有一个,就是runtime里initNativeApi 这个方法缺失了
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 然后迁移业务代码进行解决
文本两端对齐失效
letter spacing导致了文字元素莫名的展位
安卓下 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判断从闭合标签字符串里删掉
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组件不更新,页面同层节点更新,滚动条会被重置
解决方案,参考同掘金文章