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


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 相关文章推荐
CheckBox 如何实现全选?
Jun 23 Javascript
JavaScript中几种常见排序算法小结
Feb 22 Javascript
jQuery控制cookie过期时间的方法
Apr 07 Javascript
JavaScript 事件绑定及深入
Apr 13 Javascript
JavaScript实现阿拉伯数字和中文数字互相转换
Jun 12 Javascript
JS数组搜索之折半搜索实现方法分析
Mar 27 Javascript
JavaScript实现多重继承的方法分析
Jan 09 Javascript
高性能的javascript之加载顺序与执行原理篇
Jan 14 Javascript
express如何使用session与cookie的方法
Jan 30 Javascript
微信小程序实现日历效果
Dec 28 Javascript
vue实现在线学生录入系统
May 30 Javascript
浅谈vue项目利用Hbuilder打包成APP流程,以及遇到的坑
Sep 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获取域名的google收录示例
2014/03/24 PHP
PHP保存带BOM文件的方法
2015/02/12 PHP
微信支付扫码支付php版
2016/07/22 PHP
Mac系统下安装PHP Xdebug
2018/03/30 PHP
php用xpath解析html的代码实例讲解
2019/02/14 PHP
强制设为首页代码
2006/06/19 Javascript
JavaScript RegExp方法获取地址栏参数(面向对象)
2009/03/10 Javascript
javascript中的float运算精度实例分析
2010/08/21 Javascript
关于jquery css的使用介绍
2013/04/18 Javascript
推荐 21 款优秀的高性能 Node.js 开发框架
2014/08/18 Javascript
jQuery中focus事件用法实例
2014/12/26 Javascript
jQuery手动点击实现图片轮播特效
2020/04/20 Javascript
详细探究ES6之Proxy代理
2016/07/22 Javascript
浅析node.js的模块加载机制
2018/05/25 Javascript
解决layer弹出层自适应页面大小的问题
2019/09/16 Javascript
使用Vue生成动态表单
2019/11/26 Javascript
JavaScript实现手风琴效果
2021/02/18 Javascript
Python自动调用IE打开某个网站的方法
2015/06/03 Python
Django Admin实现上传图片校验功能
2016/03/06 Python
Python 网页解析HTMLParse的实例详解
2017/08/10 Python
python中logging模块的一些简单用法的使用
2019/02/22 Python
三步实现Django Paginator分页的方法
2019/06/11 Python
python3图片文件批量重命名处理
2019/10/31 Python
如何基于python操作excel并获取内容
2019/12/24 Python
python opencv如何实现图片绘制
2020/01/19 Python
python opencv 实现对图像边缘扩充
2020/01/19 Python
Python telnet登陆功能实现代码
2020/04/16 Python
利用Python的folium包绘制城市道路图的实现示例
2020/08/24 Python
python rsa-oaep加密的示例代码
2020/09/23 Python
python UIAutomator2使用超详细教程
2021/02/19 Python
个人求职简历中英文自我评价
2013/12/16 职场文书
产品设计开发计划书
2014/05/07 职场文书
中学清明节活动总结
2014/07/04 职场文书
环保守法证明
2015/06/24 职场文书
Oracle设置DB、监听和EM开机启动的方法
2021/04/25 Oracle
postman中form-data、x-www-form-urlencoded、raw、binary的区别介绍
2022/01/18 HTML / CSS