• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

微信小程序商品图片点击预览功能、富文本图片点击预览功能 ...

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

一、图片预览

先放效果图:

微信开放文档有官方的方法,使用 wx.previewImage()

首先,我们可以新建一个util.js文件,在这里统一封装方法

/**
 * 图片预览
 * @param {string} current 当前显示图片的http链接 
 * @param {array} urls 需要预览的图片http链接列表
 */
function previewImage(current, urls) {
  if (!urls || urls === null) return
  // 确保数组的图片是绝对路径,否则加上自己公司服务器的请求头
  for (let key in urls) {
    if (urls[key].indexOf(\'thhp\') < 0) {
      urls[key] = \'https://aimpcdncs.app307.com/\' + urls[key]
    }
  }
  wx.previewImage({
    current: current,
    urls: urls 
  })
}

module.exports = {
  previewImage: previewImage
}

然后在js页面调用这个方法

// ../../../utils/util 是util文件的路径
import { previewImage } from \'../../../utils/util\'

/**
* 商品图片预览
*/
preview(event) {
  // this.data.pictures 这是图片数组
  previewImage(event.currentTarget.dataset.src, this.data.pictures)
}

最后在图片上绑定这个方法就好啦~

<image bindtap="preview" src="{{mTools.formatImgUrl(item)}}"  lazy-load="true"></image>

二、富文本图片点击预览功能

这个更简单,直接在微信开放文档下载Parser插件https://github.com/jin-yufeng/Parser/tree/master/parser

下载后按照这个步骤来就好啦

这是components目录下的parser,components一般都是用来放组件的

 

 

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
银河宿舍微信记账小程序发布说明发布时间:2022-07-18
下一篇:
Java Servlet:服务器小程序发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap