官方示例
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
})
}
})
