小程序开发中遇到的问题

1、background-image

背景图不能用本地地址，会报错，如果要用image替代。在行间样式上可以写本地地址，微信开发者工具能显示，ios也能显示，但是Android不能显示。所以还是不行。

2、字体的加载问题

字体的加载在Android和ios上表现得不一致，要知道小程序的代码包可是不能超过4mb的一个字体如果3mb那就凉了。所以把字体传到服务器上，用线上的地址，是最好的方式，但是。天不遂人愿，用线上的地址在开发者文档中可以，在ios上也可以，就是在我的华为的手机上不行，我就暂时定义在Android上不行吧。于是，只能用本地的，发现本地也不行，百度以后发现，微信小程序 @font-face 里 添加url地址没用， 所以 URL地址替换掉，把字体转成base64。发现是ok的。但是这个字体一定不能太大。1m左右就差不多了！！！在这里推荐一个字体包转成base64的网站。https://transfonter.org/

image.png

image.png

3、ios视频播放问题：

ios视频播放的时候，小程序切到后台，视频自动暂停了，再打开，依然不会重新播放。如果做的小程序有控制按钮，这个问题自然不是问题，但是，如果做的小程序是全屏播放的，而且是，没有控制按钮的，这个就是个大问题了。没法控制播放，视频又是全屏的，这样用户会以为卡了。其实没有卡，只是视频暂停了。这个问题的解决方案是：
定义两个开关，一个是a，一个是b。a是检测视频是否播放完毕，b是检测用户是否切到后台，两者都是false，当用户从小程序切到后台的时候，触发的是onhide，这个时候把b变为true，而且是在视频播放的时候，也就是说在a为false的前提下，把b变为true。当用户切会前台的时候，判断b为true的时候，播放视频，在视频播放完毕以后把a变为true，b变为false。就ok了；
逻辑很清晰，然而理想很丰满，现实很骨感。不行，为什么呢，因为，小程序从后台切到前台的时候，需要反应时间，上来就执行播放的函数，是不行的。加一个settimeout就可以了。。。

4、ios视频左右滑动会出现时间。

ios在播放视频的时候，虽然视频没有控件，但是左右滑动的时候，会出现时间，好像左右滑动可以控制视频的进度似的，但是视频的进度并没有改变，这个问题虽然小，不影响功能，但是影响用户的体验。
解决的方案是：既然不想要操控你，可以把这个视频覆盖住，不让用户操控就行了。但是video组件有一个特性，那就是层级最高，不是z-index就能解决的。微信小程序里提供了，cover-view和cover-image 来解决这个问题。但是要嵌套的video组件的里面。这样就可以了。

5、video组件的注意点：

image.png

因为遇到过一个需求就是在视频播放完以后，要有评论的输入框。本来没有多想，做下来才发现，video组件是一个坑，微信小程序提供了cover-view和cover-image这两个可以覆盖在原生组件之上的，我本来是想在cover-view里嵌套textarea然而，现实很打脸，报错了。。。

image.png

没办法，这个只能改需求了。
所以说，这个是一个很大的坑，如果遇到客户提这样子的需求，就要赶紧拒绝吧。。。