问题整理（关于h5、PC、小程序、大屏）

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

---

有关h5部分

19/4/12

h5换行不能正常显示

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

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

19/8/27

IOS不能正常唤醒数字键盘

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

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

19/8/27

引入svga组件

问题描述：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/9/17

图片要求不能拉伸

问题描述：h5页面上有很多图片，并要求图片不能被拉伸，且能适应各种尺寸的图片。
解决方法：一直都没有达到想要的效果，后来发现移动端那边图片就能做到这种效果，就去请教了他们，ios那边的人告诉我，他们用的是原生属性scaleAspectFill，能达到等比例缩放且填充满容器。然后上网查了一下，发现css样式里面也有一个属性object-fit: cover，能达到同样的效果，链接如下：object-fit

高德自定义图标点击事件无效

问题描述：h5页面上高德地图上自定义图标点击事件无效。
解决方法：把onclick改为ontouchstart，这是移动端和PC端的区别引起的，因为移动端并没有鼠标点击事件。
注：改为ontouchend效果更好。

讲解ontouchstart、ontouchend、onclick区别和坑点

vant postcss-pxtorem lib-flexible适配不奏效

问题描述：按照官方文档引入postcss-pxtorem lib-flexible，以达到适配的目的，发现并不奏效。
解决方案：在按照官方文档的基础上，还需要在vue.config.js文件中加入以下语句:

postcss: {
    plugins: [
        require("autoprefixer")({
            // 配置使用 autoprefixer
            overrideBrowserslist: ["last 15 versions"]
        }),
        require("postcss-pxtorem")({
            rootValue: 37.5, // 换算的基数
            // 忽略转换正则匹配项。插件会转化所有的样式的px。比如引入了三方UI，也会被转化。目前我使用 selectorBlackList字段，来过滤
            //如果个别地方不想转化px。可以简单的使用大写的 PX 或 Px 。
            selectorBlackList: ["ig"],
            propList: ["*"]
        })
    ]
},

官方文档：vant
上面的引入还是会有问题的，层次深的不能转换，等等，还是应该改为官网的样式：

  postcss: {
                plugins: [
                    require("autoprefixer")({
                        // 配置使用 autoprefixer
                        // overrideBrowserslist: ["last 15 versions"]
                        // browsers: ['Android >= 4.0', 'iOS >= 8'],
                    }),
                    require("postcss-pxtorem")({
                        rootValue: 37.5, // 换算的基数
                        // 忽略转换正则匹配项。插件会转化所有的样式的px。比如引入了三方UI，也会被转化。目前我使用 selectorBlackList字段，来过滤
                        // 如果个别地方不想转化px。可以简单的使用大写的 PX 或 Px 。
                        // selectorBlackList: ["ig"],
                        propList: ["*"]
                    })
                ]
            },

有关微信小程序部分

19/6/25
接手了一个别人写的小程序，然后给我提了很多bug，都是一些细节问题。

后退页面不正确

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

IOS手机时间显示错误

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

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

19/11/4
需要注意的地方：

• 小程序中，如果返回的base64格式的图片，不能正常显示。Base64码中可能存在回车符，就用 let XXX= XXX.replace(/[rn]/g, ""); 把回车替换掉

h5与移动端交互问题

1.h5唤醒、下载app操作

问题描述

从分享出去的页面点击“下载app”按钮时，如果用户已经下载过app直接跳转到app内；否则进入下载页面（ios进入app store，android进入蒲公英）。ios唤醒没问题，android唤醒无效。

产生原因

前端跳转用window.location.href就可以了，主要是移动端那边。
app被唤醒有以下几种方式：
1、URL Scheme
iOS、Andriod平台都支持，只需要原生APP开发时注册scheme。
优点：开发成本低，绝大多数都支持。
缺点：错误处理情况因平台不同，难以统一处理。（只有在浏览器内核下才能正常唤醒。）
2、Universal Links
这是在2015年WWDC大会上，Apple推出的iOS 9的一个功能：Universal Links通用链接。
3、Android App Links
这是在2015年Google I/O大会上，Android M宣布的一个新特性。

在项目中，iOS那边用的就是第二种技术，可以在微信内核下直接唤醒；而Android用的时第一种技术，在微信内核下是无法唤醒的，而在浏览器打开时是可以唤醒的。

解决方案

要么让Android采用第三种方案，要么在h5页面上加“请在浏览器中打开”来提示用户在浏览器中打开。
参考资料：使用DeepLink技术唤醒App

有关大屏

建议：
1、使用setTimeout而不是setInterval（正常大屏放在那不动是没有问题的，一旦大屏页面不是浏览器的活动页，且离开时间超过定时器的时间，执行顺序就会出现问题，这与浏览器内部的循环机制有关，定时器与浏览器环境）；
2、使用rem代替px；
3、宽度和高度使用百分比；
4、页面组件化（组件化分为功能组件化、模块组件化等，还是需要深入研究的）；
5、父组件获取数据最好在mounted里面。（因为父组件的mounted比子组件晚执行，有些子组件要获取dom，子组件内数据改变的时候很有可能mounted还没执行完，会报错。）