微信小程序 扫码 加载图片

官方示例

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
        })
    }
})