平武建站

mpvue开发小程序手机书店详情页封面预览问题

问题

当前，我在使用mpvue+vant weapp开发小程序手机书店详情页。期间，遇到了图书封面预览的问题。
开发中，我选择使用van-card组件展示图书的基本信息。此组件中可以显示一个图书缩略图。但是，实际应用中，读者在购买时往往要观察一下图书封面的图像细节，从而从一个侧面预估计图书的质量。那么，如何在使用vant weapp组件库开发的同时又尽量不受其束缚，尽可能实现理想的效果呢？
试验中，我注意到van-card组件提供了一个属性thumb-link，从其官方网站介绍及源码分析来看，有如下特征：

站在用户的角度思考问题，与客户深入沟通，找到铁东网站设计与铁东网站推广的解决方案，凭借多年的经验，让设计与互联网技术结合，创造个性化、用户体验好的作品，建站类型包括：成都网站建设、成都网站设计、企业官网、英文网站、手机端网站、网站推广、主机域名、雅安服务器托管、企业邮箱。业务覆盖铁东地区。

使用原生wx.navigateTo实现在点击图书缩略图时跳转到另一个小程序内的页面
细致分析，使用这种思路来专门开发一个页面展示一个封面图的原图意义不大。进一步分析，上述属性thumb-link的引入的主要目的估计是导航到对应的详情页等目的使用的。

另一方面，我想到了小程序原生的wx.previewImage这个API，所以，可以使用此API实现封面图的细节展示（当然，用户在预览时可以进一步用手形控制放大与缩小）。因此，这个方案就足够了。

效果

详情页效果如下所示：
mpvue开发小程序手机书店详情页封面预览问题

顺便提一下，图书的内容提要展示方案我使用了van-button结合van-dialog的思路，效果感觉尚可，如下图所示：
mpvue开发小程序手机书店详情页封面预览问题

其中，对话框的内容可以滚动展示，相关代码如下：

      showAbstract(event) {
        console.log('event:',event)
        Dialog.setDefaultOptions({
          messageAlign: 'left'
        })
        Dialog.alert({
          title: '内容简介',
          message: this.abstract_info
        });

注意，默认情况下，对话框中内容是水平居中显示的，需要先修改成左对齐显示更好一些。
接下来是使用van-collapse展示作者简单与图书目录，效果如下：
mpvue开发小程序手机书店详情页封面预览问题

文本内容同样可以垂直滚动。

最后是最关键的封面图预览问题，我借助于van-card内置支持的slot技巧，在其中放置了一个“封面图预览”按钮，相关代码如下：

    
      
        
          封面图预览
          内容提要...

对应的脚本函数previewImage代码如下：

        wx.previewImage({
          urls: this.imglist // 需要预览的图片http链接列表
        })

当然，这是wx.previewImage的简化使用版本，详情请参考官方网站API说明。

于是有点击按钮的预览效果如下：
mpvue开发小程序手机书店详情页封面预览问题

此图中你可以手动放大与缩小（与普通微信应用中效果一致，还可以实现转发目的）。而且，真机测试中确认，在点按一下这个预览图片后切换到原来的详情页。从而达到了预定目的。

注意事项

注意的问题其实是有关wx.previewImage　API使用的问题。仅有一点需要小结，即它不能展示内置于小程序内的图片，但是观看网络图片与借助于wx.wx.chooseImage加载本机中图片后也可以使用wx.previewImage预览图片。

引用

https://developers.weixin.qq.com/miniprogram/dev/api/wx.previewImage.html
https://blog.csdn.net/hangGe0111/article/details/81109429
http://html51.com/info-39090-1/
https://youzan.github.io/vant-weapp/#/card
https://bbs.csdn.net/topics/390991571
https://www.cnblogs.com/jvziking/p/8462068.html


文章名称：mpvue开发小程序手机书店详情页封面预览问题
本文网址：http://pwwzsj.com/article/pphjgi.html

其他资讯