微信小程序點(diǎn)擊圖片實(shí)現(xiàn)長(zhǎng)按預(yù)覽、保存、識(shí)別帶參數(shù)二維碼、轉(zhuǎn)發(fā)等功能

更新時(shí)間：2019年07月20日 09:09:36 投稿：mrr

這篇文章主要介紹了微信小程序點(diǎn)擊圖片實(shí)現(xiàn)長(zhǎng)按預(yù)覽、保存、識(shí)別帶參數(shù)二維碼、轉(zhuǎn)發(fā)等功能,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

1.多張圖片循環(huán)渲染后預(yù)覽、保存、識(shí)別帶參數(shù)二維碼

wxml頁(yè)面

<view wx:for=“{{imgalist}}” wx:for-item=“image” class=“previewimg”>
<image src=“{{image}}” data-src=“{{image}}” bindtap=“previewImage”></image>
</view>
js頁(yè)面
Page({
data: {
imgalist: [‘http://sz800800.cn/video/test.png','http://sz800800.cn/video/test.png'],
},
previewImage: function (e) {
wx.previewImage({
current: this.data.imgalist, // 當(dāng)前顯示圖片的http鏈接
urls: this.data.imgalist // 需要預(yù)覽的圖片http鏈接列表
})
},
})

2.單張圖片預(yù)覽、保存、識(shí)別帶參數(shù)二維碼

<!–pages/dis_dil/dis_d5.wxml–>
<text class=‘search_no'>點(diǎn)擊可保存及分享二維碼</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(‘,')
// 需要預(yù)覽的圖片http鏈接 使用split把字符串轉(zhuǎn)數(shù)組。不然會(huì)報(bào)錯(cuò)
})
}
})

總結(jié)

以上所述是小編給大家介紹的微信小程序點(diǎn)擊圖片實(shí)現(xiàn)長(zhǎng)按預(yù)覽、保存、識(shí)別帶參數(shù)二維碼、轉(zhuǎn)發(fā)等功能,希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺(jué)得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！

您可能感興趣的文章:

相關(guān)文章

js實(shí)現(xiàn)跨域的4種實(shí)用方法原理分析
這篇文章主要分析了js實(shí)現(xiàn)跨域的4種實(shí)用方法原理，主要是使用jsonp跨域，使用window.name來(lái)進(jìn)行跨域，對(duì)這方面感興趣的朋友可以參考一下
2015-10-10
js核心基礎(chǔ)之閉包的應(yīng)用實(shí)例分析
這篇文章主要介紹了js核心基礎(chǔ)之閉包的應(yīng)用,結(jié)合具體實(shí)例形式分析了javascript閉包使用過(guò)程中常見(jiàn)問(wèn)題及相應(yīng)的解決方法,需要的朋友可以參考下
2019-05-05
bootstrap 通過(guò)加減按鈕實(shí)現(xiàn)輸入框組功能
這篇文章主要介紹了bootstrap 輸入框組通過(guò)加減按鈕來(lái)增加刪除內(nèi)嵌輸入框組,當(dāng)我點(diǎn)擊 + 按鈕時(shí)，會(huì)添加一行輸入框組；當(dāng)點(diǎn)擊 - 按鈕時(shí)，會(huì)刪除這一行輸入框組。具體實(shí)現(xiàn)代碼大家參考下本文
2017-11-11
一文搞懂webpack?hash持久化的原理
本文主要介紹了webpack?hash持久化的原理，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2022-06-06
JavaScript Promise原理與實(shí)現(xiàn)刨析
首先呢，Promise是異步中比較重要的知識(shí)點(diǎn)，學(xué)習(xí)的最好方法就是掌握它的基本原理。所以這一篇主要說(shuō)一下如何用JS來(lái)實(shí)現(xiàn)一個(gè)自己的promise
2022-10-10
JS搜狐面試題分析
這篇文章主要介紹了JS搜狐面試題,涉及javascript數(shù)組、字符串及面向?qū)ο蟪绦蛟O(shè)計(jì)相關(guān)技巧,需要的朋友可以參考下
2016-12-12
在JavaScript中正確引用bind方法的應(yīng)用
本文的重點(diǎn)在于討論bind()方法的實(shí)現(xiàn)，在開(kāi)始討論bind()的實(shí)現(xiàn)之前，我們先來(lái)看看bind()方法的使用，有需要的小伙伴可以參考下。
2015-05-05
一個(gè)簡(jiǎn)單的js鼠標(biāo)劃過(guò)切換效果
一個(gè)實(shí)用的簡(jiǎn)單的鼠標(biāo)劃過(guò)切換效果,附帶ie6兼容png js
2010-06-06
layui點(diǎn)擊導(dǎo)航欄刷新tab頁(yè)的示例代碼
今天小編就為大家分享一篇layui點(diǎn)擊導(dǎo)航欄刷新tab頁(yè)的示例代碼，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-08-08
JS中prototype關(guān)鍵字的功能介紹及使用示例
prototype 關(guān)鍵字可以為JS原有對(duì)象或者自己創(chuàng)建的類(lèi)中添加方法或者屬性。也可以實(shí)現(xiàn)繼承，下面以實(shí)例的方式為大家詳細(xì)介紹下
2013-07-07