微信小程序實戰篇-圖片的預覽、二維碼的識別

開篇

　　今天，做的小程序項目要求，個人中心的客服圖片在用戶長按時可以識別其二維碼，各種翻閱查找，采坑很多，浪費了很多時間，在這里記錄下需要注意的點，以及對小程序官方提供的API做一個正確和清晰的認知，希望能幫助到大家
   

參考小程序官方文檔后，發現：

1.文檔中有一句提示：
    "image組件中二維碼/小程序碼圖片不支持長按識別,僅在 wx.previewImage 中支持長按識別"
2.即便實現了 “wx.previewImage” 效果，但依舊是不支持二維碼識別的

 

代碼

①. wxml 頁面元素設計

    作為引導界面，只需放置一張圖片即可，以我的代碼為例

//# 使用簡單的實現方式，直接賦值一個圖片鏈接得了

<image src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1540964455347&di=68ac28aa79382ee2bc8dce10d5966e39&imgtype=0&src=http%3A%2F%2Fup.enterdesk.com%2Fedpic_source%2Fdb%2Ff1%2Fec%2Fdbf1ec353b17dce848676e2fdb7f9bb4.jpg" mode="widthFix"  
    data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1540964455347&di=68ac28aa79382ee2bc8dce10d5966e39&imgtype=0&src=http%3A%2F%2Fup.enterdesk.com%2Fedpic_source%2Fdb%2Ff1%2Fec%2Fdbf1ec353b17dce848676e2fdb7f9bb4.jpg"
    bindtap="previewImage"></image>

②. js 文件實現 “previewImage”方法

    在對應的 js 文件中，添加了如下的方法

 /**
  *  圖片預覽方法
  *  此處注意的一點就是，調用 "wx.previewImage"時，第二個參數要求為數組形式哦
  *  當然，做過圖片上傳功能的應該會注意到，如果涉及到多張圖片預覽，圖片鏈接數組集合即為參數 urls！
  */
  previewImage: function(e) {
    var current = e.target.dataset.src;
    wx.previewImage({
      current: current,
      urls: [current]
    })
  },

 
重點來了...

 

特別需要注意的是：

　　1.如果需要識別二維碼，那必須是小程序的二維碼

　　2.圖片路徑中有中文無法顯示圖片

　　3.圖片地址不能為http開頭，否則圖片只能在調試模式中顯示，真機也必須開調試。

　　4.圖片名稱不能有空格

　　5.圖片的后綴必須為小寫的.png或者.jpg