微信小程序 扫码 加载图片

官方示例

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
        })
    }
})
发布了60 篇原创文章 · 获赞 7 · 访问量 5万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 编程工作室 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览