详解微信小程序「渲染层网络层错误」的解决方法


Posted in Javascript onJanuary 06, 2021

问题描述:

情况是这样的,我需要在小程序中通过image标签显示三张我的图片,毫无疑问,其重点部分肯定在image的src属性上,请看思路分析:

我们可以新建一个专门放图片的文件夹,然后将我们项目所需要的图片文件全部放到这里。但是这会引发一个问题:微信官方对上线的小程序有大小的限制,所以如果你只是本地跑跑,那无可厚非,你开心就好;如果要做上线,这种方法的可行度不高;

使用外部链接。成功发布过小程序的小伙伴们都知道,外部链接必须使用https协议,且所使用域名必须设置在request合法域名列表中,这就为我们指明了三个途径:

  • 使用图床来存储我们的图片文件,然后使用其链接就好;
  • 自建网站,但必须使用https协议(下文中所使用外部图片均存储在我自己的服务器上);
  • 使用微信小程序云存储(我认为很香的方法咯)

开发环境基本信息:

微信开发者工具:RC 1.03.2011111

调试基础库:2.14.1

出现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里面的值是空的,就会出现渲染层、网络层错误。

所以既然是加载速度的原因,我们完全可以让其完全加载完成之后在显示,所以我们可以通过拖延加载时间的方法来解决这个bug,小伙伴们是不是想到了定时器、async等,别,千万别,就是个图片显示的事,用不着大动干戈,小心走火入魔,哈哈哈,接下来我们介绍两种比较性价比比较高的方法。

解决方案:

修改调试基础库版本

在开发环境基本信息一部分中,我们已说明上述报错代码所依赖的调试基础库版本信息,这里我们不需要修改任何代码,只需要修改一下版本信息即可让代码跑通,请看修改信息:

详解微信小程序「渲染层网络层错误」的解决方法

使用微信小程序云开发

关于云开发环境的初始化,这里我们不再赘述,我们直接贴出云函数的实现代码,以及本地获取可用https链接的代码,请看代码:

首先,我们上传三张我们项目所需要的图片文件,请看:

详解微信小程序「渲染层网络层错误」的解决方法

接着我们在我们新建的云函数中编写如下代码,并对其进行增量上传、更新文件(我们所定义的云函数名为ImgURL):

详解微信小程序「渲染层网络层错误」的解决方法

// 云函数入口文件
const cloud = require('wx-server-sdk')
cloud.init()
// 云函数入口函数
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:[]
 },
 /**
  * 生命周期函数--监听页面加载
  */
 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>

嗯,最后完美显示了出来,好帅呀?

详解微信小程序「渲染层网络层错误」的解决方法

到此这篇关于详解微信小程序「渲染层网络层错误」的解决方法的文章就介绍到这了,更多相关小程序 渲染层网络层错误内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
jquery复选框CHECKBOX全选、反选
Aug 30 Javascript
js根据给定的日期计算当月有多少天实现思路及代码
Feb 25 Javascript
一个不错的js html页面倒计时可精确到秒
Oct 22 Javascript
js实现进度条的方法
Feb 13 Javascript
浅谈JavaScript中的String对象常用方法
Feb 25 Javascript
简介JavaScript中的getSeconds()方法的使用
Jun 10 Javascript
js实现汉字排序的方法
Jul 23 Javascript
基于jQuery实现交互体验社会化分享代码附源码下载
Jan 04 Javascript
javascript数字验证的实例代码(推荐)
Aug 20 Javascript
深入理解Vue.js源码之事件机制
Sep 27 Javascript
vue 通过下拉框组件学习vue中的父子通讯
Dec 19 Javascript
JS实现动态倒计时功能(天数、时、分、秒)
Dec 12 Javascript
JavaScript 中的六种循环方法
Jan 06 #Javascript
JavaScript的一些小技巧分享
Jan 06 #Javascript
详解Vue2的diff算法
Jan 06 #Vue.js
如何利用JavaScript编写一个格斗小游戏
Jan 06 #Javascript
vuex的使用步骤
Jan 06 #Vue.js
一篇文章看懂JavaScript中的回调
Jan 05 #Javascript
原生js中运算符及流程控制示例详解
Jan 05 #Javascript
You might like
php漏洞之跨网站请求伪造与防止伪造方法
2013/08/15 PHP
thinkphp框架实现删除和批量删除
2016/06/29 PHP
php 提交表单 关闭layer弹窗iframe的实例讲解
2018/08/20 PHP
JQuery AJAX 中文乱码问题解决
2013/06/05 Javascript
js利用数组length属性清空和截短数组的小例子
2014/01/15 Javascript
jQuery表格排序组件-tablesorter使用示例
2014/05/26 Javascript
javascritp添加url参数将参数加入到url中
2014/09/25 Javascript
分析了一下JQuery中的extend方法实现原理
2015/02/27 Javascript
Mvc提交表单的四种方法全程详解
2016/08/10 Javascript
浅谈javascript的闭包
2017/01/23 Javascript
js实现适合新闻类图片的轮播效果
2017/02/05 Javascript
JavaScript正则替换HTML标签功能示例
2017/03/02 Javascript
JS自定义滚动条效果简单实现代码
2020/10/27 Javascript
JS实现闭包中的沙箱模式示例
2017/09/07 Javascript
AngularJS2 与 D3.js集成实现自定义可视化的方法
2017/12/01 Javascript
Node.js实现mysql连接池使用事务自动回收连接的方法示例
2018/02/03 Javascript
微信小程序按钮去除边框线分享页面功能
2018/08/27 Javascript
命令行批量截图Node脚本示例代码
2019/01/25 Javascript
通过layer实现可输入的模态框的例子
2019/09/27 Javascript
[48:37]EG vs OG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
Python 字符串中的字符倒转
2008/09/06 Python
Python实现的简单发送邮件脚本分享
2014/11/07 Python
Python中不同进制互相转换(二进制、八进制、十进制和十六进制)
2015/04/05 Python
Python中Numpy ndarray的使用详解
2019/05/24 Python
python 利用pyttsx3文字转语音过程详解
2019/09/25 Python
pytorch多GPU并行运算的实现
2019/09/27 Python
深入浅析python变量加逗号,的含义
2020/02/22 Python
python字典和json.dumps()的遇到的坑分析
2020/03/11 Python
悦木之源美国官网:Origins美国
2016/08/01 全球购物
中文专业毕业生自荐信
2013/10/28 职场文书
签约仪式主持词
2014/03/19 职场文书
生日主持词
2014/03/20 职场文书
签约仪式策划方案
2014/06/02 职场文书
2014年优秀党员材料
2014/12/18 职场文书
2014年纳税评估工作总结
2014/12/23 职场文书
十大最强水系宝可梦,最美宝可梦排第三,榜首大家最熟悉
2022/03/18 日漫