平时遇到的问题整理（包括h5、PC、小程序）

2019年9月10日 191次阅读 来源: 喆喆

这篇文章主要整理了一些平时遇到的问题，不定时更新，仅供自己学习所用。若有更好的解决方案，欢迎指出~

有关h5部分
19/4/12
问题描述：PC端用textarea获取数据，经过后端，传到h5页面显示。遇到换行等操作，不能正常显示。
解决方法：textarea内容有换行等操作经过数据库后显示不正常问题
解释：关于该问题，网上还有其他的方法，多是用'<br>’换掉’\n’，但如果文中输入’\n’这样的字符串，显示就会有问题，就会自动换行，上面这个方法就没有这样的问题了。

pre 元素可定义预格式化的文本，被包围在 pre 元素中的文本通常会保留空格和换行符，而文本也会呈现为等宽字体。

19/8/27
问题描述：input使用type=”number”类型使移动端调起数字键盘，Android能正常唤起，但是IOS不行。
解决方法：input属性还需要加一个pattern=”[0-9]*”，如下：

<input type="number" v-model="num" pattern="[0-9]*" />

19/8/27
问题描述：h5需要一个类似于loading一样的动态效果，使用svga组件，官网：SVGA
解决方法：你会发现按照gitlab上的指引，无法正确显示动态图，这是因为用了vuejs的框架，并且.svga不能像.png格式的图片那样引入，而且相对位置的路径也会发生改变，所以引入的路径应该是服务器上的文件路径（也就是打包后的文件路径）。（比如：如果将.svga文件放入public里面，引入的路径就应该是”./XXX.svga”）。（但是到了最后开发的时候，还是去掉了这种loading的方法，因为它的样式真的很难修改，改了一天多，也没法定位，css不行，js也不行😭）

19/4/16
问题描述：写h5和小程序与PC最大不同是字体大小的设置。
解决方法：加一个文件mixins.scss，里面内容如下（这个栗子是针对h5，小程序也同样适用）：

@function strip-units($number) {
  @return $number / ($number * 0 + 1);
}

// px change to rem
@function rem($px) {
  @return strip-units($px) / 50 + rem;
}

有关微信小程序部分
19/6/25
接手了一个别人写的小程序，然后给我提了很多bug，都是一些细节问题。
问题描述：手机上的后退键，后退的页面不是产品所想要的页面。
解决方法：只要好好了解小程序的路由，这个问题修改起来就很容易。这下面是官方文档里面介绍的路由，最重要的是标红的三种写法：先说navigateTo，它的意思就是把下一个页面入栈（栈就是将页面后进先出的一个容器）；reLaunch表示的是跳转到某个页面，并把栈里面的页面数据都清除，只保留下一个页面；redirectTo表示销毁当页（又把当前页从栈中拿出并销毁，这是和navigateTo最大的区别），把下一页入栈。

《平时遇到的问题整理（包括h5、PC、小程序）》

问题描述：ios手机时间显示错误，显示为NaN。
解决方法：这是因为ios系统不支持“yyyy-mm-dd”这样的格式，要替换成“yyyy/mm/dd”的格式，用.replace(/-/g, ‘/’)就好，具体方案可以看这ios时间显示问题

问题描述：微信开发工具上图片可以显示，但是到了真机就不显示。
解决方法：那是域名信息没有备案，并且微信开发工具关闭了校验。

css样式：
19/8/19
文本内容过多以省略号的形式进行隐藏：

.context{
    width: 50px; // div必须是定宽
    overflow: hidden; // 超出隐藏
    text-overflow: ellipsis; // 隐藏部分用省略号代替
    white-space: nowrap; // 文本内容不换行（默认在定宽的情况下是换行的）
}
    原文作者：喆喆
    原文地址: https://segmentfault.com/a/1190000019579986
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞