官方示例

index.wxml

<view class="page">
    <image style="width: 750rpx; height: 1000rpx; background-color: #ffffff;"  src="{{src}}"></image>
</view>

750rpx：小程式定義的寬度

index.js

var imgPath=''
Page({
  data: {
    src: imgPath
  }
})

在Page()外可以定義變數，此處需要注意，若Page中有多個data，以最後一個data為準

頁面

頁面組成：提示資訊+掃碼按鈕+圖片

index.wxml

<view>
  <text>掃碼檢視二維碼內容</text>
  <button>請掃描二維碼</button>
</view>

<view class="page">
  <image style="width: 750rpx; height: 1000rpx; background-color: #ffffff;" src="{{src}}"></image>
</view>

頁面展示如下

紅框處是有一個image的空間，只是顏色設定為白色
src接收到Page中data的src的值”，在程式碼中，使用的是rpx的單位，此處自動轉為px

呼叫掃碼

index.js

var imgPath=''
Page({
  scanningCode:function(event){
    wx.scanCode({
      success: (res) => {
        console.log(res)
      },
      fail: (res) => {
        console.log(res)
      },
      complete: (res) => {
        console.log(res)
      }
    })
  },
  /**
   * 頁面的初始資料
   */
  data
 
: {
    src: imgPath
  }
})

給button加上點選方法
index.wxml

<button bindtap="scanningCode">請掃描二維碼</button>

至此，就能夠點選button，開啟掃碼，然後讀出掃碼資訊。
注意 ：
1、此次要有AppId才能掃出結果，否則會提示錯誤
2、外連結需要先在開發者平臺配置，且要使用https協議

獲取掃碼結果

掃碼後，結果如下

console

Object {errMsg: "scanCode:ok", result: "https://xxxxxx", scanType: "QR_CODE", path: "", charSet: "UTF-8"}

真正的結果存在result中

更換圖片地址

index.js

scanningCode:function(event){
    wx.scanCode({
      success: (res) => {
        console.log(res)
        this.setData({
          src: res.result
        })
      }
    })
  }
}

至此，當掃碼得到二維碼中圖片地址時，就可以在image中顯示圖片

加入loading

由於訪問的是外連結，不可避免的存在延遲，優化使用者體驗，在載入圖片時，加入loading遮罩層

index.js

scanningCode:function(event){
    wx.scanCode({
      success: (res) => {
        console.log(res)
        this.setData({
          src: res.result
        }),
        wx.showLoading({
          title:'正在載入',
          mask:true
        })
      }
    })
  }

加入遮罩層後，希望在圖片載入完的時候，遮罩層就隱藏掉
加入loading，效果如下

遮罩層隱藏

wx.hideLoading()

圖片載入完成事件

<image bindload="hideLoading"></image>

結合

index.wxml

<view>
  <text>掃碼檢視二維碼內容</text>
  <button>請掃描二維碼</button>
</view>

<view class="page">
  <image style="width: 750rpx; height: 1000rpx; background-color: #ffffff;" src="{{src}}" bindload="hideLoading"></image>
</view>

index.js

Page({
    hideLoading:function(event){
        wx.hideLoading()
    },
    ...
})

至此，圖片載入時，有loading提示，載入完成後，loading提示消失

圖片載入完成後隱藏提示資訊和按鈕

在view中加入hidden

<view hidden="{{scanHidden ? true : false}}">
  <text>掃碼檢視二維碼內容</text>
  <button bindtap="scanningCode">請掃描二維碼</button>
</view>

初始化view是否隱藏

var imgPath=''
var hiddenView=false
Page({
    data: {
        src: imgPath,
        scanHidden:hiddenView
    },
    ...
})

當圖片載入完成，隱藏view

Page({
    hideLoading:function(event){
        wx.hideLoading()
        this.setData({
          scanHidden:true
        })
    }
})