前端小程序cover-image和image的区别

我在做微信小程序项目遇到的坑，cover-image和image都是用来显示的，但是我们要慎用cover-image，但我们写的页面是有d出层的，你使用这种标签写的，不会显示出来，但换成image就可以，所以，我们要慎用cover-image。

在小程序中image标签跟view标签上下会有空隙，我们可以在image标签中设置vertical-align:top/bottom/text-top/text-bottom，原因：文字等inline元素默许是跟父级元素的baseline对齐，而baseline又和父级底边有必定间距

微信小程序直播消息滑动，1打开微信，点击发现，找到小程序点击，进入小程序以后，在搜索框内输入手持d幕。

2进入小程序之后可以看到字幕的样式，选择中间滚动的字幕样式

3对边点击一处找到输入框，在输入框内输入你想显示的内容，点击右边的选项可以调节字幕内容的大小、颜色以及滚动速度等，然后保存到手机中就可以了。

最近要从零开发一个跟后台管理系统对接的小程序，因为功能比较复杂，时间短，选择了比较火的uni-app，因为小程序出现的时间较短，各方面并不完善，开发过程中就是不断踩坑的过程，特此记录一小下。

uni-app虽然功能还不完善，但是插件市场里东西还是不少的，在搭建框架中因为需求要求借鉴了之前开发的PC端，所以有一些跟之前开发VUE相关的插件 ，可以提高开发效率，

插件：

坑：

1覆盖原生组件，需要用cover-view容器，但是cover-view里可包含的标签有限，类似view等在真机调试时不显示，需全部替换成cover-view，且icon无法显示，可以用cover-imaga代替。

2小程序和小程序之间的跳转（如腾讯云的人机滑动验证），跳转回来时需要进行 *** 作，此时可以判断appvue中的options，如果按小程序文档中来说当optionsscene === 1038时是小程序跳回来的场景，但是部分手机跳回来是optionsscene为1001，只能将这2种都作为跳转判断的条件。

3小程序跳转回来app中的onshow有时不执行，这个原因暂未找到

4在uniapp的H5版本 ，接入 腾讯云滑动验证 ，示例的点击滑动验证元素是通过dom *** 作的，但是无效，可能跟uniAPP不支持dom *** 作有关系，采用定制接入方法一，手动调用。

微信截屏，微信小程序截屏调用教程

一、程序简介：

本程序主要是用户1通过在相机上涂鸦来描绘物体的轮廓。然后，用户2根据轮廓寻找物体。如果成功则返回正确，否则返回继续努力。（具体开发流程和功能见微信小程序应用开发计划表。）

二、开发平台

微信开发者工具V1021803210

三、进展

目前小程序的截图功能已经实现。后台识别也已经实现，同时正在完善数据库。

四、思路

想法一：

通过定位API获取用户位置，加上重力加速度或者罗盘来模拟实现。但想法一在实现的时候遇到如下问题被舍弃：

1）获取位置时使用误差不确定。（获取五次位置的平均值误差依然无法确定）

2）如果物体进行移动或同类物体无法识别。

想法二：

通过截取前后两个场景中包围轨迹的最大矩形，传输到后端进行识别。最后由后台返回结果

截屏实现大致过程：记录下用户的最大最小X、Y坐标->调用相机组件的takePhoto控件—>调用画布组件drawImage绘制图像到画布->根据最大最小X、Y坐标调用画布的canvasToTempFilePath导出图像。

遇到问题以及解决方案：

1 在调用小程序的位置API时，发现获取5次平均值是0

原因：小程序的API有些是多线程的，因此在API后面的语句不一定后执行。

2 画板无法覆盖到相机组件上：

原因：相机组件是源生组件，在上面只能覆盖cover-view和cover-image组件。

解决方法：画板也为源生组件，虽然按理来说可以覆盖。但是在页面首次加载中，相机会在画板的上面。第二次加载时，画布才可以覆盖到相机组建上面。因此，在开始界面调用一次相机，在第二界面就可以在上面覆盖画布了。

3 在画布上调用drawImage绘制照片的部分图像时有问题。

原因：没找到

解决方案：将整张图绘制到画布中进行部分截取，这个在IOS系统中是可以的。在Android系统有问题。

4 画布中导出图像中没有darwImage在画布上绘制的图。

原因：drawImage绘图需要时间。

解决方案：设置一个两秒的定时器。

5 截图功能在安卓上可以运行，在IOS上无法点击

原因：微信在两个平台上采用的是不同的运行环境。在安卓上cover控件在画板上面，IOS中cover控件在画板下面。

解决方案：在相机控件的下方添加控件，同时调用drawImage时画板坐标乘上一个比例。（其画板坐标单位是像素）

6 在API内用this指针发现无法给Page中数据赋值

原因：在部分API中，this指针可能不指向页面实例。

解决方法：先用that把this指针的值保存起来，在API内部用that。

7 在函数中给page中的字符串和对象赋值时跳出函数范围，其值变为空

原因：这应该和程序执行的内存机制有关

解决方法：在给变量申请一个空间，如 str：new string（）。之后赋值时问题便会解决。

8 画板的drawImage绘制图形问题

原因：经过测试drawImage中的单位确实是像素。不过手机的像素为360560，照片的像素却为7201136。

解决方案：无

9 程序的涂鸦和识别分为两个窗口后。识别窗口会显示轨迹，但背景却是黑色。

原因：不明

解决方案：在识别窗口第一次调用drawImage时，现调用一下clearfill（）清空画布。

10 记录轨迹

原因：前期我们是用点来描述用户的轨迹的，具体见边框绘制。但这样绘制出的点我们感觉贴的图不美观，之后想要改为用户自己绘制的轨迹

解决方案：在用户点击完成后先把用户的轨迹导入成一张透明，传入识别界面。然后贴在画板上。

小程序项目中涉及到视频功能，需求就是禁止拖动进度条。但是小程序video并没有提供一个属性用来禁止进度条拖动

以上是从微信官方论坛中找到的答案，就是说如果想实现禁止拖动进度条，要么就是隐藏掉，要么就是自己自定义一个进度条。如果用show-progress=‘{{false}}’，这个属性隐藏掉了进度条，那video原本自带的底部控制栏中（播放/暂停 ，进度时间，进度条，总时长，全屏/退出全屏），这些按钮中，就只剩下全屏/退出全屏了。

开始，我决定自定义进度条，但是我发现video里嵌套的组件，虽说官网给出的是可以使用view，但是只有界面效果，却触发不了view对应的方法，也就是说，我用slider组件自定义了一个进度条，并且禁用，然而不管用。

于是乎，几经波折，来回调试，最终还是决定用video自带的控制栏，通过在进度条位置，设置一个遮罩层，再设置一下透明度，这样，光标点不到进度条，就拖动不了了。当然，这个遮罩层也是要用<cover-view>

在设置遮罩层时，还遇到了问题，就是position: relative; opacity:0;无效！！！

改成这样：：position: absolute;opacity:0;模拟器，安卓手机上都没问题，iOS真机上无效！！！

但是我发现，将透明度改大一点，大于0，iOS上就可以了。

所以，我用

wxgetSystemInfo,来判断设备，如果是iOS，那就设置透明度为01，如果是安卓，就为0

其实到这里，问题基本解决了，但是还有一点点瑕疵，就是因为保留了本身的控制栏，那全屏/退出全屏的按钮功能要保留，所以遮罩层不能罩到要用的按钮，不然就都点击不了，所以在使用的按钮上我用view，设置了一个跟遮罩层一样颜色一样透明度的还补全，这样从视觉效果上才算是过关。

appjson 直接配置:

官方文档： 自定义 tabBar

custom-tab-bar/index

在小程序根目录下新建 custom-tab-bar 文件夹，文件夹下建立相应的组件。

wxml 文件：

推荐使用 cover-view + cover-image 组件渲染样式，以保证 tabBar 层级相对较高。不过现在使用 view 也可以，之前是因为使用 map 组件可能会导致无法覆盖，现在 map 组件已经支持同层渲染，所以使用 view 也是没问题的。

js 文件：

tabbar 的配置主要在这里。

因为每个 tab 页下的自定义 tabBar 组件实例是不同的，在跳转新的tab 后，是一个新的 tabbar 实例，先前那个已经被销毁了，所以要重新设置。

在每个自定义的 tab 页面 onShow 方法中，

可见使用系统提供自定义 tabbar 方式不好的地方在于每个 tabbar 页面都要手动设置一遍选中状态。

为什么说是系统自定义的？

因为我们自定义的组件 custom-tab-bar/index 并没有在每个页面的 json 中进行单独配置进行组件的引用，都是系统默认配置好的。

官方文档 Tabbar 。

通过 useExtendedLib 扩展库 的方式引入 weui 组件库。

appjson 配置：

在 tab 页面的 pagejson 中引入 tabbar 组件即可：

wxml 使用：

直接将第二种方式 使用系统自定义的方式 custom-tab-bar/index 文件夹及文件移动到 components 自定义组件文件夹中 ，并将 appjson 中的 tabbar 配置删除即可。

在相应的 tab 页面引入自定义 tabbar 组件即可。

屏幕有效区域高度 windowsHeight，需要手动维护，系统不再维护。使用系统的 tabbar，屏幕的有效区域高度 windowsHeight = 屏幕高-状态栏高度-导航条高度-tabbar高度 ；而自定义的 tabbar 则没有计算 tabbar 高度，即 windowsHeight = 屏幕高-状态栏高度-导航条高度 。

你这是啥场景需求？cover-view肯定是放在小程序的原生组件里面的，但是一般不建议 *** 作原生组件，所以你可以在原生组件外在套一层view，然后针对这一层做 *** 作或者动画都可以，不过要注意原生组件z-index优先级最高的问题

以上就是关于前端小程序cover-image和image的区别全部的内容，包括:前端小程序cover-image和image的区别、微信小程序直播消息滑动、uni-app小程序开发踩坑记录等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！