一、页面上多图加载问题

假如我们进去的某个页面有很多图片，而且我们想的是需要等到图片（资源）加载完成之后再展示页面出来，就跟大家玩游戏一样，加载场景资源文件加载完成之后游戏才可以玩耍

先找到了一段代码大概就是以下（h5可以直接拿去用的，有报错自己再看看吧）

<div class="loading" v-if="!is_load"><div><image class="i1" src="/static/img/load.png?v=1" mode="widthFix"></image><p class="p1">加载资源中...</p><p class="p2">{{percent_num}}%</p></div></div>
<div v-else>......这里面就是应该写的页面代码
</div>

mounted() {let imgs = ["/active/bg_optimun_h5.jpg?v=202012201616",                "/active/bg_rank_1.png?v=202012201616","/active/bg_rank_2.png?v=202012201616","/active/bg_rank_3.png?v=202012201616",]let count = 0;for (let img of imgs) {let image = new Image()image.src = config.ImgUrlHost + img;image.onload = () => {count++// 计算图片加载的百分数，绑定到percent变量that.percent_num = Math.floor(count / imgs.length * 100)//console.log(that.percent_num);if (that.percent_num == 100) {that.is_load = !0;}};image.onerror = (err) => {that.is_load = !0;//这一步你们还可以继续优化处理一下console.log("error", err);}}
}

然后直接弱网络环境测试一下，ok，h5是可以用的。不会弱网络测试我再教一下

谷歌浏览器打开无痕模式（无痕模式是为了不要让之前的资源缓存对测试结果有影响）谷歌浏览器右键打开无痕模式

然后F12打开开发者模式选择newwork模式选择网络模式如下

后面那几个自定义 10 100 200是我自己定义的你们没用过的应该是没有的可以手动点击 add 添加进去

注意添加的单位 kb...是小b 不是KB,其实基本用个Fast 3G也差不多了

刷一下就能看到页面上加载的进度了有总数有进度花都能给你做出来~

其实到这里我以为已经结束了，谁知道啊跑到app上根本就不好使，报错 “找不到 Image对象”，

头有点疼。

后面又找了找资料

可以通过这么去解决直接甩代码

// #ifdef H5let imgs = ["/active/bg_optimun_h5.jpg?v=202012201616",               "/active/bg_rank_1.png?v=202012201616","/active/bg_rank_2.png?v=202012201616","/active/bg_rank_3.png?v=202012201616",]let count = 0;for (let img of imgs) {let image = new Image()image.src = config.ImgUrlHost + img;image.onload = () => {count++// 计算图片加载的百分数，绑定到percent变量that.percent_num = Math.floor(count / imgs.length * 100)//console.log(that.percent_num);if (that.percent_num == 100) {that.is_load = !0;}};image.onerror = (err) => {that.is_load = !0;console.log("error", err);}}// #endif// #ifdef APP-PLUS || MPlet imgs = ["/active/bg_optimun.jpg?v=202012201616",               "/active/bg_rank_1.png?v=202012201616","/active/bg_rank_2.png?v=202012201616","/active/bg_rank_3.png?v=202012201616",]let count = 0;const promise = [];for (let img of imgs) {promise.push(new Promise((resolve, reject) => {uni.getImageInfo({src: img,success: function (image) {resolve(true);},fail: function (err) {resolve(true);}});  }));}await Promise.all(promise).then((res) => {console.log("thenthenthenthen ", res);that.is_load = !0;}).catch(err => {console.log("catchcatchcatchcatch ", err);})// #endif

上面代码可以在优化一下，我懒得弄了

基本就这个样子了，如果不行，自己改改吧，app怎么调试状态调整弱网络我也不知道....测试的时候应该是没有问题得

这个问题结束（小程序我还没试不过估计也能行）

二、uni-app 那种全屏手机怎么让app页面全屏

先看一下博客跟文档吧

uni-app 里如何让页面在 iPhone X 等全面屏手机上全屏显示（去掉安全区） - DCloud问答

uni-app官网

我也试了，不太好使

因为他这个配置上了整个app都是全屏了

后面看到了这个文章

uni-app 如何让启动页在iPhoneX 上全屏显示？ - DCloud问答

一句代码完事

 onShow() {//console.log("onShowonShowonShowonShow");// #ifdef APP-PLUSplus.navigator.setFullscreen(true);  // #endif},

但是有个问题，你再离开页面的时候一定需要将其再设置为false 不然整个app就成全屏了

至于你们什么时候离开这个页面，你们写方法判断吧反正我写在 onHide onUnLoad都不太好使的样子我反正页面上一个返回按钮触发返回方法里面写的

完了我现在写博客的时候还想到了一个bug 如果用户不是点击页面中返回按钮返回而是ios手势右划返回或者安卓物理按键返回那应该就炸了。

好了试了一下，确实如果用户手势返回 app就是全屏了。。。mmp 我去修bug了

再会，有时间在补充 2020年12月20日 17:40:13

解决了直接放 onUnLoad 就完事了至于之前为啥不好使，我也不知道。。

onUnload() {// #ifdef APP-PLUSplus.navigator.setFullscreen(false);// #endif},

uniapp做的小程序使用"标准版交易组件"报"Has not init plugin"错误解决方案

看这个大哥的

标准版交易组件报HAS NOT INIT PLUGIN, FAIL START REQUEST，has not init pluginzz

接入流程 | 微信开放文档

manifest.json

app.vue

最终问题是this指向的问题

uni-app的一些小记录（图片资源加载提示 uni-app全屏展示）相关推荐

微信小程序Loading加载+提示框（微信小程序）
效果演示 1.Loading加载界面 2.提示框代码实现 1.Loading加载界面----方法1 应用场景:显示loading -> 你要做的事 -> 隐藏loading,缓解用户焦虑 ...
android启动时加载引导图片并全屏显示
前言:最近在做一个项目,项目要求app启动时加载引导图片,由于经验不足(技术一般般),在设计时踩了几个坑,不过好在最终也是做了出来,下面我把我的想法和步骤列一下,希望可以帮到各位新手android程序 ...
微信小程序列表加载动画示例
微信小程序列表加载动画微信小程序列表加载动画示例实现思路什么是动画? 导航栏设置列表动画加载完整代码demo 微信小程序列表加载动画示例初学微信小程序开发,记录一下.网上找了很久这种效果, ...
miniui datagrid 隐藏列默认赋值_「小程序JAVA实战」小程序默认加载的页面和生命周期（八）...
小程序如何加载的呢?生命周期!源码:https://github.com/limingios/wxProgram.git 中的No.3 加载页面小程序默认加载的pages中的第一个目录不管你的名称 ...
js - 预加载+监听图片资源加载制作进度条
这两天遇到一个新需求:一个一镜到底的h5动画.因为功能的特殊性,就要求我们提前监听页面的静态图片是否全部加载完毕.即处理预加载. 总结下来,下次这种需求需要提前注意以下几点: 一.图片而不是背景图本 ...
微信小程序分包加载，分包加载的优势
微信小程序分包加载: 有时候我们的小程序太大,首次打开小程序的时候会比较慢,可以进行分包处理,按照功能的划分,拆分成几个分包,让用户在操作小程序的时候按需下载资源(用户在进入某些页面的时候才去下载相应 ...
初级前端小程序项目加载速度优化
这份文字是根据近期团队做来问丁香医生 SPA 和丁香医生小程序加载速度优化的经历整理而成. 效果古人有一句话叫做:治感冒看疗效.既然是关于速度优化的,我们就先来看一下优化的效果. 来问丁香医生 ...
微信小程序，Eror代码包大小为12497kb,上限为 2048 kb,请删除文件后重试？微信小程序分包加载
微信小程序如何解决预览超过2M的问题?微信小程序分包加载在微信小程序开发过程中有个问题让人很头疼,就是预览的项目不能超过2M,我们的项目通常都会超过这个大小限制.那到底怎么解决呢?其实官方给出了解决 ...
jQuery模拟原生态App上拉刷新下拉加载
jQuery模拟原生态App上拉刷新下拉加载效果代码,鼠标上拉时会显示loading字样,并且会模拟加载一条静态数据,支持触屏设备使用. <!doctype html> <html ...

uni-app的一些小记录（图片资源加载提示 uni-app全屏展示）

uniapp做的小程序使用"标准版交易组件"报"Has not init plugin"错误解决方案

uni-app的一些小记录（图片资源加载提示 uni-app全屏展示）相关推荐

最新文章

热门文章