微信小程序扫码加载图片

官方示例

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

微信小程序扫码加载图片相关推荐

微信小程序封装懒加载图片
微信小程序封装懒加载图片 js /components/LazyImage/index.js // components/LazyImage/index.js Component({/*** 组件的属 ...
微信小程序首次页面加载图片加载加载页面时候会闪一下
微信小程序图片加载 image标签如果不给高度加载页面时候会闪一下至于原因,我的理解是:小程序图片闪烁是因为图片没有高度,加载时从第最高高度变到最适合高度的过程,高度加载是需要一定时间计算的解 ...
微信小程序图标不支持html,微信小程序实现自定义加载图标功能
效果图实现思路 1.首先通过HTML+CSS实现加载动画的静态效果: 2.根据需求给每个动画设计不同的动画效果. 例如第一个加载图标的静态绘制 1.首先确定动画的盒子宽高: 2.设置盒子中每一个长方 ...
微信小程序之下拉加载和上拉刷新
微信小程序之下拉加载和上拉刷新微信小程序下拉加载和上拉刷新两种实现方法方法一:onPullDownRefresh和onReachBottom方法实现小程序下拉加载和上拉刷新首先要在json文件里 ...
Android 仿微信小程序开屏页加载loading
Android 仿微信小程序开屏页加载loading 废话不多说,先上效果图~ 首先就是底层有一个灰色的圆,然后按照圆形的轨迹进行绘制. 啊~说那么多也没用,还是直接上代码吧,哈哈哈哈绘制底部圆形及 ...
【微信小程序】自定义加载动画3
目录效果图配置版本1 版本2 结语效果图配置配置方法参考上一篇文章:[微信小程序]自定义加载动画版本1 Component({behaviors
【微信小程序】自定义加载动画4
目录效果图配置文件结语效果图配置文件配置方法参考上一篇文章:[微信小程序]自定义加载动画组件源代码: Component({behaviors: [],properties: {
微信小程序扫码实现web自动登录
清明假期在家无聊,写了一个微信小程序扫码,web登录的demo 技术栈前端:vue2+vue-socket.io+uuid,微信小程序原生+weapp.socket.io 后端: eggjs+red ...
微信小程序扫码报工案例分享
使用微信小程序结合PC端ERP完成工序扫码报工+扫码出入库,可以实现生产管理全流程自动化作业,使生产效率比之前手工操作有了质的飞跃. 本案例背景介绍这是一家生产二极管的电子生产企业,车间自动化生产设 ...

微信小程序扫码加载图片

官方示例

index.wxml

index.js

页面

index.wxml

调用扫码

index.js

获取扫码结果

console

index.js

加入loading

index.js

遮罩层隐藏

图片加载完成事件

结合

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

在view中加入hidden

初始化view是否隐藏

当图片加载完成，隐藏view

微信小程序扫码加载图片相关推荐

最新文章

热门文章

微信小程序 扫码 加载图片

官方示例

index.wxml

index.js

页面

index.wxml

调用扫码

index.js

获取扫码结果

console

index.js

加入loading

index.js

遮罩层隐藏

图片加载完成事件

结合

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

在view中加入hidden

初始化view是否隐藏

当图片加载完成，隐藏view

微信小程序 扫码 加载图片相关推荐

最新文章

热门文章

微信小程序扫码加载图片

微信小程序扫码加载图片相关推荐