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


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 相关文章推荐
javascript自适应宽度的瀑布流实现思路
Feb 20 Javascript
JS onmousemove鼠标移动坐标接龙DIV效果实例
Dec 16 Javascript
本人自用的global.js库源码分享
Feb 28 Javascript
jquery trigger实现联动的方法
Feb 29 Javascript
AngularJS使用指令增强标准表单元素功能
Jul 01 Javascript
微信小程序之仿微信漂流瓶实例
Dec 09 Javascript
JavaScript实现多栏目切换效果
Dec 12 Javascript
JS实现向iframe中表单传值的方法
Mar 24 Javascript
ReactNative实现Toast的示例
Dec 31 Javascript
vue中使用echarts制作圆环图的实例代码
Jul 27 Javascript
浅谈Layui的eleTree树式选择器使用方法
Sep 25 Javascript
React中的Context应用场景分析
Jun 11 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
重料打造自己的“宝马”---第三代
2021/03/02 无线电
CI框架装载器Loader.php源码分析
2014/11/04 PHP
使用php从身份证号中获取一系列线索(星座、生肖、生日等)
2016/05/11 PHP
php格式化json函数示例代码
2016/05/12 PHP
thinkphp表单上传文件并将文件路径保存到数据库中
2016/07/28 PHP
javascript 伪数组实现方法
2010/10/11 Javascript
原生javascript图片自动或手动切换示例附演示源码
2013/09/04 Javascript
jQuery的animate函数学习记录
2014/08/08 Javascript
jquery操作对象数组元素方法详解
2014/11/26 Javascript
javascript中eval函数用法分析
2015/04/25 Javascript
ANGULARJS中使用JQUERY分页控件
2015/09/16 Javascript
JS实现回到页面顶部动画效果的简单实例
2016/05/24 Javascript
原生JS实现轮播效果+学前端的感受(防止走火入魔)
2016/08/21 Javascript
微信小程序 常见问题总结(4058,40013)及解决办法
2017/01/11 Javascript
超全面的JavaScript开发规范(推荐)
2017/01/21 Javascript
用纯Node.JS弹出Windows系统消息提示框实例(MessageBox)
2017/05/17 Javascript
原生JS实现隐藏显示图片 JS实现点击切换图片效果
2021/01/27 Javascript
React中的refs的使用教程
2018/02/13 Javascript
vue cli webpack中使用sass的方法
2018/02/24 Javascript
JavaScript实现的鼠标跟随特效示例【2则实例】
2018/12/22 Javascript
详解webpack引入第三方库的方式以及注意事项
2019/01/15 Javascript
js实现小球在页面规定的区域运动
2020/06/16 Javascript
vue 使用rules对表单字段进行校验的步骤
2020/12/25 Vue.js
python字典多条件排序方法实例
2014/06/30 Python
pytorch 调整某一维度数据顺序的方法
2018/12/08 Python
对python读写文件去重、RE、set的使用详解
2018/12/11 Python
python 限制函数执行时间,自己实现timeout的实例
2019/01/12 Python
pytorch加载自定义网络权重的实现
2020/01/07 Python
HTTP状态码详解
2021/03/18 杂记
逼真的HTML5树叶飘落动画
2016/03/01 HTML / CSS
HTML5 Web缓存和运用程序缓存(cookie,session)
2018/01/11 HTML / CSS
俄罗斯和世界各地的酒店预订:Hotels.com俄罗斯
2016/08/19 全球购物
英国户外装备和冒险服装零售商:alloutdoor
2018/01/30 全球购物
乡村文明行动实施方案
2014/03/29 职场文书
学生个人总结范文
2015/02/15 职场文书
大学军训口号大全
2015/12/24 职场文书