Taro 小程式 踩坑記錄
- taro2.x、3.x不支援commonJS寫法(自測3.0.16版本以上支援),類似於下面這種寫法,渲染不出來圖片
<Image src={require('../../images/icon.png')} /> // require commonJS寫法
可參考:https://blog.csdn.net/qq_44114279/article/details/107359920
-
執行時使用yarn dev:weapp,當生成的包大小大於2048kb時真機無法預覽或者除錯,建議執行命令為NODE_ENV=production taro build --type weapp --watch ( NODE_ENV 為 production 可以開啟壓縮)
-
如果你的設計稿不是750、640、828三種尺寸之一(假如設計稿尺寸為375),config/index.js檔案下的designWidth要配置為375,同時要在DEVICE_RATIO中新增換算規則,官方文件提供的是2/1(taro 3.x 1/2正常)
-
如果你的設計稿尺寸不是750、640、828三種尺寸之一(假如設計稿尺寸為375),但是元件庫taro-ui的使用的尺寸是750,此時使用taro-ui裡的元件,顯示的效果是不對的,解決辦法安裝postcss-px-scale外掛,並在config/index.js中配置
{ mini: { postcss: { "postcss-px-scale": { "enable": true, "config": { "scale": 0.5, // 縮放為 375/750 "units": "rpx", "includes": ["taro-ui"] } }, ......
-
已經發布的小程式除錯開啟方法:體驗版或者開發版開啟除錯,再進入釋出版小程式就好,或者通過程式碼開啟關閉除錯開關
// 開啟除錯 Taro.setEnableDebug({ enableDebug: true }) // 關閉除錯 Taro.setEnableDebug({ enableDebug: false })
- webview網頁跳小程式傳值不建議使用.postMessage(向小程式傳送訊息,會在特定時機(小程式後退、元件銷燬、分享)觸發元件的message事件)
具體使用 https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html
- Taro.showToast新增image屬性時,圖片不顯示bug,原因是Taro.showToast中引用了圖片,但該圖片無法被打包到微信小程式中,解決方法是在檔案config/index.js裡進行下面處理
copy: { patterns: [ { from: 'src/imgs/', to: 'dist/imgs' } // 指定需要copy的檔案 ] } // 使用時image路徑 Taro.showToast({ title: '上傳成功', image: '/imgs/success.png', duration: 2000 })
-
VirtualList 在3.0.5 ios上滑動時抖動嚴重,版本升級到3.0.17 正常
-
自定義分享朋友或者朋友圈時(圖片、標題、路徑),onShareAppMessage 和 onShareTimeline這兩個處理函式必須跟生命週期函式同級(屬於兄弟關係),且必須在頁面(page)裡定義,不可以定義在元件中,同時在根目錄下的global.d.ts檔案下定義頁面配置,增加以下程式碼
declare module '@tarojs/taro' { interface PageConfig { /** * 是否啟用分享給好友。 * * @default false */ enableShareAppMessage?: boolean /** * 是否啟用分享到朋友圈。 * * @default false */ enableShareTimeline?: boolean } }
在需要轉發的配置頁面增加
export default { enableShareAppMessage: true, enableShareTimeline: true }
相關文章
- 微信小程式踩坑記錄微信小程式
- 微信小程式BLE踩坑記錄微信小程式
- 小程式踩坑日記 (一)
- Taro踩坑實踐
- Taro開發小程式填坑筆記(一)筆記
- 使用 Taro 開發微信小程式的實踐 + 踩坑合集微信小程式
- 小程式踩坑
- sealos踩坑記錄
- strtotime 踩坑記錄
- DietPi踩坑記錄
- laravel踩坑記錄Laravel
- 小程式踩坑填坑
- 微信小程式框架wepy踩坑記錄(與vue對比)微信小程式框架Vue
- [小程式] mpVue 踩坑Vue
- 小程式踩坑(2)
- node link 踩坑記錄
- ABP框架踩坑記錄框架
- Electron工程踩坑記錄
- gorm踩坑記錄(一)GoORM
- MySQL_踩坑記錄MySql
- Android Studio踩坑記錄Android
- Go json 踩坑記錄GoJSON
- 微信小程式 海報生成踩坑記微信小程式
- mpvue小程式踩坑之旅Vue
- ES6踩坑記錄
- React專案踩坑記錄React
- ijkplayer編譯踩坑記錄編譯
- Laravel7 踩坑記錄Laravel
- vuePC專案踩坑記錄Vue
- Next.js踩坑記錄JS
- uniapp開發踩坑記錄APP
- list複製踩坑記錄
- React同構踩坑記錄React
- 工作踩坑問題記錄
- Mac下Charles踩坑記錄Mac
- mpvue開發微信小程式踩坑筆記Vue微信小程式筆記
- Electron Built-in AutoUpdater 踩坑記錄UI
- H5 Video踩坑記錄H5IDE