前言

产品说什么也要在大图预览下加图片描述，我说微信小程序不支持，wx.previewImage和wx.previewMedia都是我们自己改不了的。但是无奈非得要，那我说：加可以，但是做不到像wx.preview那样完美，右上角会有胶囊按钮，其它体验也会也些差距。为了加这个图片描述，我是抽业余时间搞了好多天才搞出来，真是。。。

示例动图

实现思路和方案

1. 将navigationBar隐藏掉，然后黑色背景一搞，左右切换使用swiper。
2. 因为考虑到swiper加载item太多会有渲染问题，我们在这里使用之前写的库swiper-limited-load。
3. 图片使用movable-view来实现双指缩放和移动功能，此外图片还应该有双击缩放，单击退出等功能.
4. 视频使用video组件，要考虑到只有滑动到当前item，才去渲染当前item的video组件，要不然出现左右两个video也跟着一起播放的情况就尴尬了。
5. 视频要实现宽度铺满，按宽高比例显示，需要知道视频的宽高比，这里可以用wx.getImageInfo来获取视频封面图片的信息（网络图片需要配置download域名），或者如果你们的接口会返回视频的宽高信息，根据屏幕宽度，直接设置高度也行。

总结

微信自带的wx.previewImage和wx.previewVideo其实已经挺好用了。就为了一个图片描述，我们自己造这么个轮子，得好几天时间，而且这个轮子还不如原来的好用。面对这种情况，这就看是要如何取舍了，是要开发效率，还是要用户体验。既然产品需要，那就硬刚吧。。。

项目地址：https://github.com/pengboboer/preview-media-desc

如果错误，欢迎指出。

如有新的需求也可以提出来，如果有时间的话，我会帮你们完善。

如果能帮到你们，记得给一个star，谢谢。

微信小程序可添加图片描述的wx.previewMedia相关推荐

微信小程序之PC端不支持 wx.previewMedia 方法故用自定义轮播图进行模拟照片视频的播放
微信小程序自带的方法 wx.previewMedia 预览图片和视频. 图片 wx.previewImage 支持PC端可以进行播放, 视频没有找到对应的方法在真机和手机端都可以进项展示,PC端不 ...
微信小程序长按图片发送给好友
问题描述微信小程序长按图片发送给好友解决方法直接在<image></image>标签添加:show-menu-by-longpress="true" ...
微信小程序怎么添加底部菜单按钮
继续微信小程序方面的教程,今天讲怎么在空白的小程序页面添加几个类似菜单的按钮,实现点击某个按钮跳转到对应界面,而不是单单局限于一个页面. 需要什么: 微信小程序账户电脑一台电脑安装微信开发者工具软 ...
php 微信创建客服,如何给微信小程序内添加客服按钮
这次给大家带来如何给微信小程序内添加客服按钮,给微信小程序内添加客服按钮的注意事项有哪些,下面就是实战案例,一起来看一下. 1. 普通客服按钮添加客服-联系我们 2. 悬浮客服按钮添加,图片自定义大 ...
微信在线客服 php,微信小程序中添加联系在线客服功能
这次给大家带来微信小程序中添加联系在线客服功能,微信小程序中添加联系在线客服功能的注意事项有哪些,下面就是实战案例,一起来看一下. 1. 普通客服按钮添加客服-联系我们 2. 悬浮客服按钮添加,图片自 ...
微信小程序如何添加新的icon图标
微信小程序如何添加新的icon图标第一步先去阿里云下载图标http://www.iconfont.cn/ 根据需要把图片的代码下载下来,下载完成之后是一个压缩包,解压压缩包里面有一个css的文件 ...
微信小程序开发实现图片滚动效果
微信小程序开发实现图片滚动效果效果:左右滑动可以切换展示图片代码:   <swiper&g ...
详解 - 解决微信小程序分享功能图片比例问题 - 全局分享
前言: 我在我的博客小程序使用微信小程序分享功能图片不符合5:4问题 ,对其原理扫描下面二维码,可以体验哦准备在需要自定义分享的页面设置canvas 组件目录准备详解思路定义总函数 ...
微信小程序内拖动图片实现移动、放大、旋转
最近接到一个任务,在微信小程序内拖动图片组件实现移动.放大.旋转,并记录这些图片的移动位置,放大比例,旋转角度,在一个画布上生成一张图片,最后保存到手机相册. 我的具体实现思路是这样的:(文章底部留有 ...

微信小程序可添加图片描述的wx.previewMedia

前言

示例动图

实现思路和方案

总结

微信小程序可添加图片描述的wx.previewMedia相关推荐

最新文章

热门文章