欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

詳解微信小程序「渲染層網絡層錯誤」的解決方法

 更新時間：2021年01月06日 10:42:24   作者：石璞東 | haha  
這篇文章主要介紹了詳解微信小程序「渲染層網絡層錯誤」的解決方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

問題描述：

情況是這樣的，我需要在小程序中通過image標簽顯示三張我的圖片，毫無疑問，其重點部分肯定在image的src屬性上，請看思路分析：

我們可以新建一個專門放圖片的文件夾，然后將我們項目所需要的圖片文件全部放到這里。但是這會引發(fā)一個問題：微信官方對上線的小程序有大小的限制，所以如果你只是本地跑跑，那無可厚非，你開心就好；如果要做上線，這種方法的可行度不高；

使用外部鏈接。成功發(fā)布過小程序的小伙伴們都知道，外部鏈接必須使用https協(xié)議，且所使用域名必須設置在request合法域名列表中，這就為我們指明了三個途徑：

  • 使用圖床來存儲我們的圖片文件，然后使用其鏈接就好；
  • 自建網站，但必須使用https協(xié)議（下文中所使用外部圖片均存儲在我自己的服務器上）；
  • 使用微信小程序云存儲（我認為很香的方法咯）

開發(fā)環(huán)境基本信息：

微信開發(fā)者工具：RC 1.03.2011111

調試基礎庫：2.14.1

出現(xiàn)bug的代碼及報錯信息：

<image src="https://www.shipudong.com/otherFiles/MyImage/%E7%9F%B3%E7%92%9E%E4%B8%9C.jpg"></image>
<image src="https://www.shipudong.com/otherFiles/MyImage/%E7%9F%B3%E7%92%9E%E4%B8%9C_hahaCoder.jpg"></image>
<image src="https://www.shipudong.com/otherFiles/MyImage/%E7%9F%B3%E7%92%9E%E4%B8%9C_book.jpeg"></image>

首先，我們明確一點哈，上述三行代碼沒有一丟丟的語法錯誤哈～

在這里插入圖片描述

既然沒有語法錯誤，為什么會報錯呢？

究其原因，還是因為異步請求需要一定的時間，而小程序一進頁面就開始加載，請求速度沒跟上，這時頁面顯示加載的時候image里面的值是空的，就會出現(xiàn)渲染層、網絡層錯誤。

所以既然是加載速度的原因，我們完全可以讓其完全加載完成之后在顯示，所以我們可以通過拖延加載時間的方法來解決這個bug，小伙伴們是不是想到了定時器、async等，別，千萬別，就是個圖片顯示的事，用不著大動干戈，小心走火入魔，哈哈哈，接下來我們介紹兩種比較性價比比較高的方法。

解決方案：

修改調試基礎庫版本

在開發(fā)環(huán)境基本信息一部分中，我們已說明上述報錯代碼所依賴的調試基礎庫版本信息，這里我們不需要修改任何代碼，只需要修改一下版本信息即可讓代碼跑通，請看修改信息：

在這里插入圖片描述

使用微信小程序云開發(fā)

關于云開發(fā)環(huán)境的初始化，這里我們不再贅述，我們直接貼出云函數(shù)的實現(xiàn)代碼，以及本地獲取可用https鏈接的代碼，請看代碼：

首先，我們上傳三張我們項目所需要的圖片文件，請看：

在這里插入圖片描述

接著我們在我們新建的云函數(shù)中編寫如下代碼，并對其進行增量上傳、更新文件（我們所定義的云函數(shù)名為ImgURL）：

在這里插入圖片描述

// 云函數(shù)入口文件
const cloud = require('wx-server-sdk')
cloud.init()
// 云函數(shù)入口函數(shù)
exports.main = async (event, context) => {
 const fileList = [
  'cloud://hahacoder-2gfmedh2dc1701dd.6861-hahacoder-2gfmedh2dc1701dd-1304334959/石璞東.jpg', 
  'cloud://hahacoder-2gfmedh2dc1701dd.6861-hahacoder-2gfmedh2dc1701dd-1304334959/石璞東_hahaCoder.jpg',
  'cloud://hahacoder-2gfmedh2dc1701dd.6861-hahacoder-2gfmedh2dc1701dd-1304334959/石璞東_book.jpeg'
  ]
 const result = await cloud.getTempFileURL({
   fileList: fileList,
  })
   return result.fileList
}

接著我們在本地js文件中編寫如下代碼：

data: {
  imgURL:[]
 },
 /**
  * 生命周期函數(shù)--監(jiān)聽頁面加載
  */
 onLoad: function (options) {
  
  let that = this
  wx.cloud.callFunction({
   name:"ImgURL",
   success(res){
    that.setData({
     imgURL : res.result
    })
   }
  })
 }

最后，我們來到wxml頁面，通過列表渲染來展示這三張圖片，請看代碼：

<view class="image" wx:for="{{imgURL}}" wx:key="index">
 <image src="{{item.tempFileURL}}" mode="scaleToFill"></image>
</view>

嗯，最后完美顯示了出來，好帥呀😊

在這里插入圖片描述

到此這篇關于詳解微信小程序「渲染層網絡層錯誤」的解決方法的文章就介紹到這了,更多相關小程序 渲染層網絡層錯誤內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

相關文章

最新評論