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

一、页面上多图加载问题

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

先找到了一段代码  大概就是以下（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 H5
            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);
                }

            }
            // #endif

            // #ifdef APP-PLUS || MP
            let 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-PLUS
            plus.navigator.setFullscreen(true);  
            // #endif

        },

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

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

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

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

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

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

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

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

看这个大哥的

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


 

接入流程 | 微信开放文档

manifest.json

 app.vue

 

最终问题是this指向的问题