小程序扫码图片加载如何设置?

　　小程序扫码图片加载如何设置?小程序扫码后都会有一个图片加载的动画，那么我们该如何设置，让自己的小程序界面更加美观呢?下面一起随小编看看吧。

　　小程序扫码图片加载如何设置?

　　官方示例

　　index.wxml

　　750rpx：小程序定义的宽度

　　index.js

　　var imgPath=''

　　Page({

　　data: {

　　src: imgPath

　　}

　　})

　　在Page()外可以定义变量，此处需要注意，若Page中有多个data，以最后一个data为准

　　页面

　　小程序页面组成：提示信息+扫码按钮+图片

　　index.wxml

　　页面展示如下

　　红框处是有一个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，打开扫码，然后读出扫码信息。

　　注意 ：

　　1、此次要有AppId才能扫出结果，否则会提示错误

　　2、外链接需要先在开发者平台配置，且要使用s协议

　　获取扫码结果

　　扫码后，结果如下

　　console

　　Object {errMsg: "scanCode:ok", result: "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">

　　结合

　　index.wxml

　　index.js

　　Page({

　　hideLoading:function(event){

　　wx.hideLoading()

　　},

　　...

　　})

　　至此，图片加载时，有loading提示，加载完成后，loading提示消失

　　图片加载完成后隐藏提示信息和按钮

　　在view中加入hidden

　　初始化view是否隐藏

　　var imgPath=''

　　var hiddenView=false

　　Page({

　　data: {

　　src: imgPath,

　　scanHidden:hiddenView

　　},

　　...

　　})

　　当图片加载完成，隐藏view

　　Page({

　　hideLoading:function(event){

　　wx.hideLoading()

　　this.setData({

　　scanHidden:true

　　})

　　}

　　})

　　上面讲解了很多关于小程序扫码图片的东西，希望可以更加全面的帮助大家处理小程序扫码图片的问题，当然，你如果还有更多小程序的问题，可以来微小乔看看。

　　微信小程序扫码失败的原因及解决方法

　　微信小程序扫码demo实现的功能介绍

　　小程序扫码打开页面带参数相关讨论