uni-app框架开发app中出现的问题
- uview中图标不显示
- 无法使用彩色iconfont
- 滚动回顶部
- 监听横屏和录屏的变化
- ucharts双指缩放24小时曲线
- 引入iconfont
uview中图标不显示
uniapp中使用uview2.0无网络状态下不显示Icon。
因为在uview中的图标字体资源使用的是阿里的线上地址，我们将文件下载下来，然后引入本地资源就行了。
下载链接https://at.alicdn.com/t/font_2225171_8kdcwk4po24.ttf（具体看uview中的地址是哪个）中的图标字体文件font_2225171_8kdcwk4po24.ttf，保存到本地，可以放入static文件夹中。
找到uview-ui/components/u-icon/u-icon.vue中修改文件的第41、163行两个线上地址为本地地址@/static/fonts/font_2225171_8kdcwk4po24.ttf。
无法使用彩色iconfont
有的代码在H5端可以运行，但是在APP端显示为空白页面，报错为
reportJSException >>>> exception function:createInstanceContext,
exception:white screen cause create instanceContext failed,check js
stack ->Uncaught TypeError: Cannot read property
‘getElementsByTagName’ of undefined 17:22:16.801 at
(app-service.js:6288:1) 17:22:16.822 at webpack_require
(app-service.js:80:30) 17:22:16.883 at (app-service.js:6278:1)
17:22:16.904 at webpack_require (app-service.js:80:30)
通过查找后发现，是APP端无法加载iconfont.js，那就css修改图标字体颜色吧，删除掉iconfont.js就没有出现报错了！
滚动回顶部
// uni.pageScrollTo({//点击页签，滚动到页面顶部
// scrollTop:0, // 滚动到页面的目标位置 这个是滚动到顶部, 0
// duration:100 // 滚动动画的时长
// })监听横屏和录屏的变化
// 监听尺寸变化
onResize(){
let _this = this
uni.getSystemInfo({
success: function(res) {
if (res.windowWidth > res.windowHeight) {
// 横屏，书写横屏需要处理的内容
} else {
// 竖屏，书写 竖屏需要处理的内容
}
}
})
},
参考：uni-app监听横竖屏切换不同样式
ucharts双指缩放24小时曲线
以组件为例，组件上加上可滚动和可缩放的属性：
<qiun-data-charts type="line" :opts="lineOpts" :chartData="chartData" :ontouch="true" :canvas2d="true" :onzoom="true"/>
在配置对象中，配置图表可滚动，一屏显示所有数据点，labelCount的值代表屏幕中显示的横轴的文本的个数。
引入iconfont
更新iconfont资源必须更改iconfont.css中字体文件引入地址
@font-face {
font-family: "iconfont"; /* Project id 3619109 */
src: url('~@/static/font/iconfont.woff2?t=1667800968234') format('woff2'),
url('~@/static/font/iconfont.woff?t=1667800968234') format('woff'),
url('~@/static/font/iconfont.ttf?t=1667800968234') format('truetype');
}