這篇文章主要為大家展示了“微信小程序中wx.previewImage的示例分析”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“微信小程序中wx.previewImage的示例分析”這篇文章吧。

白銀網(wǎng)站制作公司哪家好，找創(chuàng)新互聯(lián)建站！從網(wǎng)頁設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、APP開發(fā)、響應(yīng)式網(wǎng)站開發(fā)等網(wǎng)站項(xiàng)目制作，到程序開發(fā)，運(yùn)營維護(hù)。創(chuàng)新互聯(lián)建站成立與2013年到現(xiàn)在10年的時(shí)間，我們擁有了豐富的建站經(jīng)驗(yàn)和運(yùn)維經(jīng)驗(yàn)，來保證我們的工作的順利進(jìn)行。專注于網(wǎng)站建設(shè)就選創(chuàng)新互聯(lián)建站。

小知識

wx.previewImage是微信小程序官方提供的預(yù)覽圖片功能的api。

在新頁面中全屏預(yù)覽圖片。預(yù)覽的過程中用戶可以進(jìn)行保存圖片、發(fā)送給朋友等操作。

那么他有哪些坑呢？

我遇到的問題藏得比較深，我是在使用wxParse解析富文本時(shí)發(fā)現(xiàn)的。wxParse在解析img時(shí)會給它加上點(diǎn)擊事件，那么這個(gè)點(diǎn)擊事件是什么呢？

圖在下面：

從中可以看到是微信的圖片預(yù)覽功能。其中that.setData({isPreview:true})是我加上去用來判斷是否點(diǎn)擊了圖片，本身是沒有的，此時(shí)先忽略掉。

首先，點(diǎn)擊圖片預(yù)覽時(shí)，會終止頁面一切正在執(zhí)行的操作，這是為什么呢？我猜測是觸發(fā)了頁面的onHide函數(shù)，我在onHide中打log時(shí)果不其然，驗(yàn)證了我是正確的。

當(dāng)你再次點(diǎn)擊圖片回去時(shí)，會再次觸發(fā)頁面的onShow事件。所以，當(dāng)你在onHide或者onShow函數(shù)里有執(zhí)行的操作的時(shí)候就要注意了，這兩個(gè)函數(shù)都會被觸發(fā)，所以這時(shí)候就需要判斷，這兩個(gè)函數(shù)被觸發(fā)是來源于正常的頁面加載隱藏還是來源于點(diǎn)擊圖片預(yù)覽，于是便有了我上面在wxParse的源碼wxParse.js里的wxParseImgTap里加了一句that.setData({isPreview:true}) ，而后我們可以用isPreview來判斷onShow和onHide是否是被預(yù)覽圖片觸發(fā)的。

此時(shí)我們并沒有解決頁面事件被終止的事實(shí)，因?yàn)榫€程被終止了。因?yàn)閖s里是單線程的，預(yù)覽圖片時(shí)會向服務(wù)器請求圖片src,所以此時(shí)其他的異步操作便被停止，因?yàn)轭A(yù)覽圖片是一個(gè)同步操作，所以當(dāng)你點(diǎn)擊圖片時(shí)，圖片預(yù)覽優(yōu)先級最高，其他動作暫停，當(dāng)你再次點(diǎn)擊圖片回到原樣時(shí)，圖片預(yù)覽完成，在開發(fā)者工具里會自動繼續(xù)之前頁面被暫停的動作，但是真機(jī)調(diào)試卻不會。

以上是“微信小程序中wx.previewImage的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！