uniapp微信开发者工具效果正常,真机上显示不出效果

1.问题描述

 如上图,我需要给页面加入两个icons,页面属于分包内页面,icons使用的uni-icons组件,微信开发者工具中显示效果一切正常,但是在真机上预览页面显示错乱,没有图标,其他数据也显示不出来。

开启真机调试后,发现控制台报以下错误: 

uniapp微信开发者工具效果正常,真机上显示不出效果_第1张图片

2.真机调试数据不显示

报错:TypeError: undefined is not an Object (evaluating ''getApp().$vm)

可能原因:(1)uniapp在scss样式中使用条件编译影响了,要去掉条件编译,放.vue页面编写

(2)使用iconfont图标,小程序手机预览不能显示出本地的图标,所以引入的时候需要通过网上链接来引入图标字体

发现警告:

[pages/home/home] Some selectors are not allowed in component wxss, including tag name selectors, ID selectors, and attribute selectors.(./app.wxss:2451:149)

3问题解决:微信官方问题:更新官方最新版本后就没问题了

发现警告:

[pages/home/home] Some selectors are not allowed in component wxss, including tag name selectors, ID selectors, and attribute selectors.(./app.wxss:2451:149)
参考:
https://docsxyz.com/zh-hant/wiki/javascript/miniprogram-taro-weapp
在公共 scss 文件中定義了 page 樣式,去掉page樣式,問題解決。如果在組件中使用會發出警告,微信開發文檔說明如下:

組件對應 wxss 文件的樣式,只對組件wxml內的節點生效。編寫組件樣式時,需要注意以下幾點:

組件和引用組件的頁面不能使用id選擇器(#a)、屬性選擇器([a])和標籤名選擇器,請改用class選擇器。
組件和引用組件的頁面中使用後代選擇器(.a .b)在一些極端情況下會有非預期的表現,如遇,請避免使用。
子元素選擇器(.a>.b)只能用於 view 組件與其子節點之間,用於其他組件可能導致非預期的情況。
繼承樣式,如 font 、 color ,會從組件外繼承到組件內。
除繼承樣式外, app.wxss 中的樣式、組件所在頁面的的樣式對自定義組件無效(除非更改組件樣式隔離選項)。
#a { } /* 在組件中不能使用 */
[a] { } /* 在組件中不能使用 */
button { } /* 在組件中不能使用 */
.a > .b { } /* 除非 .a 是 view 組件節點,否則不一定會生效 */
css不要用 swiper-item { ... } 特别是轮播图处

警告:WASubContext.js?t=wechat&s=1686625167615&v=2.32.1:1 Setting data field "uP" to undefined is invalid.

真机调试渲染不出来,也不报错:
https://developers.weixin.qq.com/community/develop/article/doc/000826faa68ae033e2cf7ab6b5c813?highline=%E7%9C%9F%E6%9C%BA%E8%B0%83%E8%AF%95
微信官方问题:更新官方最新版本后就没问题了,只能说微信开发者工具坑太多了
切换到真机调试1.0能报错

你可能感兴趣的:(uni-app,前端)