ucharts图表第一次加载不显示

问题：ucharts图表在初始化的时候，后台已经返回了数据，但是页面没有显示图表。
解决方案：强制重新渲染，使用组件的属性reshow。

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-app中页面滚动回顶部的方法：

// uni.pageScrollTo({//点击页签，滚动到页面顶部
//  scrollTop:0,   // 滚动到页面的目标位置  这个是滚动到顶部, 0
//  duration:100  // 滚动动画的时长
// })

监听横屏和录屏的变化

问题：在手机端ucharts图表的时候，手机转为竖屏，图表显示就出现错误。
解决方案：可以在ucharts的配置文件中，将图表改为横屏模式。因为我们在收集竖屏的时候要显示图表的竖屏模式，横屏的时候要显示图表的横屏模式，所以我们要监听收集横屏和竖屏的变化，可以使用钩子函数onResize，与methods同级。

// 监听尺寸变化
onResize(){let _this = thisuni.getSystemInfo({  success: function(res) {  if (res.windowWidth > res.windowHeight) {  // 横屏，书写横屏需要处理的内容} else {  // 竖屏，书写 竖屏需要处理的内容}  }  })
},

ucharts配置文档：

参考：uni-app监听横竖屏切换不同样式

ucharts双指缩放24小时曲线

问题：ucharts横轴的数据非常多，但是横轴的文本只需要显示几个节点，双指缩放图表可以查看更加详细的数据。
解决方案：以ucharts组件为例，组件上加上可滚动和可缩放的属性：

<qiun-data-charts type="line" :opts="lineOpts" :chartData="chartData" :ontouch="true" :canvas2d="true" :onzoom="true"/>

在配置对象中，配置图表可滚动，一屏显示所有数据点，labelCount的值代表屏幕中显示的横轴的文本的个数。

如果一开始我们不知道具体的数据到底有多少个，我们也可以在获取到后台的数据以后，修改itemCount 的值。

this.lineOpts.xAxis.itemCount = this.categories.length;

引入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');
}

uview组件u-icon使用iconfont的图标

问题：通过<u-icon>形式来调用uview的图标，设置name参数为图标名即可，只能使用uview的内置图标。

<u-icon name="photo"></u-icon>

或着uview的组件中用到的图标，我们修改图标名，也只能使用内置图标

解决方案：我们可以在uni-app项目中引入iconfont的字体图标资源，使用iconfont的图标。
在App.vue中全局引入iconfont的字体图标资源以后，使用custom-prefix属性，填入字体图标名，就可以自定义修改图标。

<u-icon class="u-icon iconfont" :name="delIcon" custom-prefix="icon-shanchu" size="32" :color="delColor"></u-icon>

参考：uView 扩展图标(使用阿里iconfont图标)

uni-app框架开发app中出现的问题（持续更新中...）相关推荐

Android开发人员不得不收集的代码(持续更新中)（http://www.jianshu.com/p/72494773aace，原链接）
Android开发人员不得不收集的代码(持续更新中) Blankj 关注 2016.07.31 04:22* 字数 370 阅读 102644评论 479喜欢 3033赞赏 14 utilcode D ...
【Python全栈开发从入门到实战】持续更新中......
本专栏为Python全栈开发系列文章,技术包括Python基础.函数.文件.面向对象.网络编程.并发编程.MySQL数据库.HTML.JavaScript.CSS.JQuery.bootstrap.W ...
阿里开发10年大牛：Android开发人员不得不收集的代码(持续更新中)
前言 1.软件吃掉世界,而机器学习正吃掉软件在数据爆炸的时代,如何创建「智能系统」成为焦点.这些应用程序内所体现的智能技术,并非是将实用指令添加到代码中,而是可以让软件自己去识别真实世界中发生的事件 ...
idea中刷新项目快捷键_IntelliJ Idea中常用快捷键（持续更新中）
alt+insert-----------创建包.类.文件等(本人笔记本电脑组合键为:fn+alt+insert) alt+enter------------导入包,补全内容,修改类名等 Ctrl+i ...
【微信小程序/云开发bug解决方案合集】持续更新中（最新22-11-21）
一.小程序前端 1. chooseMessageFile没反应在电脑端测试是调不出来微信聊天界面的,需要在真机调试中使用 2. pages/kaifazhe/kaifazhe" does ...
java开发中遇到的Bug(持续更新中)
1.Error creating bean with name 'XXX': Injection of autowired dependencies: 错误原因:实体类中没有@Component(&q ...
短链服务和应用场景介绍-初级入门(一) 连载持续更新中
目录 1.什么是短链? 2.为什么需要这种短链服务? 3.短链组成 4.最简单的方式 5.短链创建者和访问者周期 6.短链URL生成服务里面的问题你能提前想到哪些? 1.什么是短链? 协议://短链域 ...
mysql查询更新优化_mysql查询优化(持续更新中)
1.索引不会包含有NULL值的列 (1) 应尽量避免在where子句中对字段进行null值判断,否则将导致引擎放弃使用索引而进行全表扫描 (2) 数据库设计时不要让字段的默认值为null,可以 ...
uni-app框架开发app发布流程
uni-app框架开发app发布流程 1.首先公司申请软著步骤:申请软著详细流程 - 阿长*长 - 博客园 (cnblogs.com) 一.安卓端 1,点击发行>原生-app云打包正式包和自 ...

uni-app框架开发app中出现的问题（持续更新中...）

uni-app框架开发app中出现的问题