官方示例

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

總結

以上是生活随笔為你收集整理的微信小程序 扫码 加载图片的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。