微信小程序点击图片实现长按预览、保存、识别带参数二维码、转发等功能
2017-09-21 20:43
2071 查看
对微信小程序有兴趣的可以关注我或者加入我的微信小程序开发交流qq群(173683895)相互交流学习。 禁止闲扯和广告。
先上效果图,再附上完整源码:
1.多张图片循环渲染后预览、保存、识别带参数二维码
2.单张图片预览、保存、识别带参数二维码
先上效果图,再附上完整源码:
1.多张图片循环渲染后预览、保存、识别带参数二维码
<view wx:for="{{imgalist}}"wx:for-item="image"class="previewimg"> <imagesrc="{{image}}"data-src="{{image}}"bindtap="previewImage"></image> </view>
Page({ data: { imgalist: ['http://sz800800.cn/video/test.png','http://sz800800.cn/video/test.png'], }, previewImage: function (e) { wx.previewImage({ current: this.data.imgalist, // 当前显示图片的http链接 urls: this.data.imgalist // 需要预览的图片http链接列表 }) }, })
2.单张图片预览、保存、识别带参数二维码
<!--pages/dis_dil/dis_d5.wxml--> <text class='search_no'>点击可保存及分享二维码</text> <view class='view_img' > <image class='img' bindtap="previewImage" src='{{scene}}'></image></view>
// pages/dis_dil/dis_d5.js var app = getApp(); Page({ data: { scene: '' }, onLoad: function (options) { var that = this var scene_img = '' //这里添加图片的地址 that.setData({ scene: scene_img }) }, previewImage: function (e) { wx.previewImage({ urls: this.data.scene.split(',') // 需要预览的图片http链接 使用split把字符串转数组。不然会报错 }) } })
相关文章推荐
- 小程序中图片点击预览、长按转发、保存、识别图中二维码
- 微信小程序实现图片预览功能
- 小程序web-view用wx.scanQRCode实现微信扫一扫功能,识别二维码——微信序web-view高级用法8
- Android WebView实现长按保存图片及长按识别二维码功能
- 微信小程序实现图片上传、删除和预览功能的方法
- [置顶] 微信小程序识别二维码跳转 图片预览,放大图片 + 识别图中二维码 出现的坑2个
- 微信小程序实现图片放大预览功能
- 微信小程序的实现图片预览功能
- cocoscreator实现微信内置浏览器点击图片识别图中二维码
- Canvas与Image互相转换示例以及利用该技术实现微信长按自动识别二维码功能
- Android实现二维码扫描功能(四)-ZXing识别图片二维码,相册选图
- 微信识别图片功能实现(以读取银行卡为例)
- 微信小程序实现图片上传功能
- 【微信小程序】--bindtap参数传递,配合wx.previewImage实现多张缩略图预览
- jQuery实现微信长按识别二维码功能
- 微信小程序 --- 点击图片预览出现编辑器空白BUG
- 微信小程序实现点击图片旋转180度并且弹出下拉列表
- iOS使用ZBar实现二维码扫描以及实现识别相册中二维码图片功能
- 微信小程序 转发功能的实现