HBuilderX

HBuilderX

极客开发工具
uni-app

uni-app

开发一次,多端覆盖
uniCloud

uniCloud

云开发平台
HTML5+

HTML5+

增强HTML5的功能体验
MUI

MUI

上万Star的前端框架

uni-app H5端 “网络不给力” 排查日记

网络不给力

前述

用户访问时莫名奇妙的出现“网络不给力”(连接服务器超时)的提示,可是此时用工具测试网络速度明明很给力。开发人员排查时却无法复现问题,于是开始认为是框架有问题。
作为框架的维护人员经过排查并未发现框架有相关问题,联系多位开发人员协助排查,终于总结出如下结论:

解决办法

太长不看版:使用 CDN、https 。

网络不给力

用户出现问题的时候,开发人员首先怀疑的就是这个内置的“网络不给力”错误页面,开始想办法去掉这个错误提示页面。
首先就要说一下为什么 SPA(单页应用) 都必须有这个页面,普通的 MPA(多页应用)其页面跳转(从一个html跳转到另外一个html)是浏览器负责的,页面加载失败的时候会显示浏览器的失败提示,而 SPA 是使用 ajax 异步加载页面,所以需要自己来判断页面是否加载成功,以及在加载失败的时候显示提示。如果去掉这个提示页面,仅仅是相当于掩耳盗铃,并不能解决问题。

加载超时(情况一)

之前框架默认的加载超时时间是3秒(后续才增大了默认超时时间),是相信运维人员都了解CDN的,一般的商业项目部署 H5 离不开 CDN ,一方面是为了用户体验,一方面是为了运营成本。
经过排查大部分页面加载慢导致超时的用户,都有一个特点,将资源直接部署在了自己服务器供用户访问。
服务端如果采用5兆带宽,同时10个用户访问的情况下,平均每个用户分得0.5兆,其下载速度约为0.06兆每秒,加载0.3兆的文件需要5秒,远超了默认的超时时间,而且这只是理论计算,实际带宽的分配并非均匀,有的用户分得的更小,加载的时间更长。另外服务器机房和网络线路固定,不同地区和网络运营商的用户访问体验不一致。

对此的解决办法有两种:

  1. 配置页面加载超时时间(新版的HBuilderX已经增大了默认超时时间):相关文档,优点:方便快捷,只需修改配置重新发布即可;缺点:并不能真正改善用户体验,使用服务器硬扛流量还可能会给服务器上的其他业务带来影响。
  2. 使用 CDN ,优点:相比增加服务器带宽成本更低,体验更好。

加载出错(情况二)

即使增加了页面的超时时间,仍然有部分用户访问页面时(使用http)出现错误提示,而且并未达到配置的超时时间(有的是切换页面瞬间出现),甚至刷新页面仍然无济于事。开发者调试的时候却始终无法复现。
以下是开发者让用户协助调试提供的截图(开发者未使用CDN为了避免各位访问测试造成压力,对域名进行了打码):

从图中可以看出加载此页面的js文件报错了,此时让用户直接访问这个报错的js文件地址,出现如下内容:

开发者一眼就看出js文件的内容不对,并不是页面真正的js文件,应该是遇到了网络劫持。网上搜索内容中出现的域名,发现中招的人不少:

一般办公使用的商用网络很少有劫持问题,而民用的网络层层转包不免有流氓运营商从中作梗,所以用户会出现问题,而开发者难以复现。

针对此问题,简易便捷解决办法就是升级为 https。

还是加载出错(情况三)

有开发者已经升级到了https,已经解决了网络劫持的问题,但是过了一段时间更新后,仍然有部分用户出现了“网络不给力”的问题。调试发现报错的js文件的文件名和线上的文件名不一致(主要是hash部分不同),是旧版本的文件名。说明html使用了旧版的缓存,请求的页面js文件是旧的,这个问题一般出现在微信内置浏览器中。

百度一下,发现类似的问题很多:百度:微信html缓存

搜到的处理方法基本是修改html的响应头,禁用html的缓存(不必禁用js、css等资源的缓存)。

实际这个问题有两种处理方式:

  1. 禁用html缓存,让用户访问到新版
  2. 每次更新时不删除旧的js、css资源,让使用旧版的用户也能继续访问

已使用CDN的用户一般未发现这个问题,因为CDN缓存了旧版的文件,即使服务器上已经删除了,CDN仍然能访问到。

结语

至此 “网络不给力” 问题排查告一段落,结论就是 CDN 和 https ,感谢一直配合调查测试的开发者,如果还有谁遇到此外的情况,请私信或者留言联系,官方会协助排查。

继续阅读 »

前述

用户访问时莫名奇妙的出现“网络不给力”(连接服务器超时)的提示,可是此时用工具测试网络速度明明很给力。开发人员排查时却无法复现问题,于是开始认为是框架有问题。
作为框架的维护人员经过排查并未发现框架有相关问题,联系多位开发人员协助排查,终于总结出如下结论:

解决办法

太长不看版:使用 CDN、https 。

网络不给力

用户出现问题的时候,开发人员首先怀疑的就是这个内置的“网络不给力”错误页面,开始想办法去掉这个错误提示页面。
首先就要说一下为什么 SPA(单页应用) 都必须有这个页面,普通的 MPA(多页应用)其页面跳转(从一个html跳转到另外一个html)是浏览器负责的,页面加载失败的时候会显示浏览器的失败提示,而 SPA 是使用 ajax 异步加载页面,所以需要自己来判断页面是否加载成功,以及在加载失败的时候显示提示。如果去掉这个提示页面,仅仅是相当于掩耳盗铃,并不能解决问题。

加载超时(情况一)

之前框架默认的加载超时时间是3秒(后续才增大了默认超时时间),是相信运维人员都了解CDN的,一般的商业项目部署 H5 离不开 CDN ,一方面是为了用户体验,一方面是为了运营成本。
经过排查大部分页面加载慢导致超时的用户,都有一个特点,将资源直接部署在了自己服务器供用户访问。
服务端如果采用5兆带宽,同时10个用户访问的情况下,平均每个用户分得0.5兆,其下载速度约为0.06兆每秒,加载0.3兆的文件需要5秒,远超了默认的超时时间,而且这只是理论计算,实际带宽的分配并非均匀,有的用户分得的更小,加载的时间更长。另外服务器机房和网络线路固定,不同地区和网络运营商的用户访问体验不一致。

对此的解决办法有两种:

  1. 配置页面加载超时时间(新版的HBuilderX已经增大了默认超时时间):相关文档,优点:方便快捷,只需修改配置重新发布即可;缺点:并不能真正改善用户体验,使用服务器硬扛流量还可能会给服务器上的其他业务带来影响。
  2. 使用 CDN ,优点:相比增加服务器带宽成本更低,体验更好。

加载出错(情况二)

即使增加了页面的超时时间,仍然有部分用户访问页面时(使用http)出现错误提示,而且并未达到配置的超时时间(有的是切换页面瞬间出现),甚至刷新页面仍然无济于事。开发者调试的时候却始终无法复现。
以下是开发者让用户协助调试提供的截图(开发者未使用CDN为了避免各位访问测试造成压力,对域名进行了打码):

从图中可以看出加载此页面的js文件报错了,此时让用户直接访问这个报错的js文件地址,出现如下内容:

开发者一眼就看出js文件的内容不对,并不是页面真正的js文件,应该是遇到了网络劫持。网上搜索内容中出现的域名,发现中招的人不少:

一般办公使用的商用网络很少有劫持问题,而民用的网络层层转包不免有流氓运营商从中作梗,所以用户会出现问题,而开发者难以复现。

针对此问题,简易便捷解决办法就是升级为 https。

还是加载出错(情况三)

有开发者已经升级到了https,已经解决了网络劫持的问题,但是过了一段时间更新后,仍然有部分用户出现了“网络不给力”的问题。调试发现报错的js文件的文件名和线上的文件名不一致(主要是hash部分不同),是旧版本的文件名。说明html使用了旧版的缓存,请求的页面js文件是旧的,这个问题一般出现在微信内置浏览器中。

百度一下,发现类似的问题很多:百度:微信html缓存

搜到的处理方法基本是修改html的响应头,禁用html的缓存(不必禁用js、css等资源的缓存)。

实际这个问题有两种处理方式:

  1. 禁用html缓存,让用户访问到新版
  2. 每次更新时不删除旧的js、css资源,让使用旧版的用户也能继续访问

已使用CDN的用户一般未发现这个问题,因为CDN缓存了旧版的文件,即使服务器上已经删除了,CDN仍然能访问到。

结语

至此 “网络不给力” 问题排查告一段落,结论就是 CDN 和 https ,感谢一直配合调查测试的开发者,如果还有谁遇到此外的情况,请私信或者留言联系,官方会协助排查。

收起阅读 »

发现一个subNVue的隐藏功能,官方居然没文档介绍

subNVues

发现一个subNVue的隐藏功能,官方居然没文档介绍,那就是subNVue.close() ,不知道参数都哪些,今天实验可用。希望尽快给我们文档介绍。

发现一个subNVue的隐藏功能,官方居然没文档介绍,那就是subNVue.close() ,不知道参数都哪些,今天实验可用。希望尽快给我们文档介绍。

解决uni-app编译后vendor.js文件过大

uni_app uniapp

背景与现象

  • 将一个当前只有简单功能的H5项目(通过vue-cli 3 创建) 迁移为uni-app版本,需要支持输出为QQ小程序、H5,在QQ小程序开发者工具中,发现无法生成预览和真机调试,原因是代码包超过2M,经过分析,发现编译后代码中,最大的是:common/vendor.js,一些处理后仍有2.5M。打包生产版本分析,也是同样的问题。
  • 项目通过vue-cli命令行创建,因此以下涉及示例的,都以此为准,使用HBuilderX开发的,麻烦自行转换操作。

解决方法

  • 开启运行时压缩

这个方法测试了,没看出有什么帮助。

  • 分包优化

这个方法更多地是对于页面过多或static图片资源过多的情况有用。此项目也进行了分包,但这个并未解决打包后vendor过大的问题。

以上2个方法,为uni官方建议的处理vendor过大的方法,见文档-介绍-uni-app 跨端开发注意事项-vendor过大的处理方式

  • Bug:分包资源被打包到主包而导致的vendor过大

这个问题没有遇到,看起来是曾经版本出现过,但新版本已修复,若是这个问题导致的,则可参考:issue #649question #72577

  • 其他的一些处理方式

看到的一篇文章,虽然我的项目中不是这些原因,但这些方法是需要考虑的:小程序包大小优化(uni-app)

  • 开启生产环境gzip,vendor.js从2.5M减少到440k

如何开启,使用compression-webpack-plugin

vue.config.js:

const CompressionWebpackPlugin = require('compression-webpack-plugin')  
const productionGzipExtensions = ['js', 'css']  

configureWebpack: {  
    plugins: [  
          new CompressionWebpackPlugin({  
            filename: '[path].gz[query]',  
            algorithm: 'gzip',  
            test: new RegExp('\\.('   productionGzipExtensions.join('|')   ')$'),//匹配文件名  
            threshold: 10240,//对10K以上的数据进行压缩  
            minRatio: 0.8,  
            deleteOriginalAssets:false,//是否删除源文件  
          })  
        ]}  
}

文件分析

使用 webpackBundleAnalyzer,可以帮助分析文件大小。

vue.config.js:

pluginOptions: {  
    webpackBundleAnalyzer: {  
      openAnalyzer: process.env.NODE_ENV === 'production'  
    }  
  },

编译后,会同时带一份报告,可查看 stat, parsed, gzip 三种状态的文件大小。

继续阅读 »

背景与现象

  • 将一个当前只有简单功能的H5项目(通过vue-cli 3 创建) 迁移为uni-app版本,需要支持输出为QQ小程序、H5,在QQ小程序开发者工具中,发现无法生成预览和真机调试,原因是代码包超过2M,经过分析,发现编译后代码中,最大的是:common/vendor.js,一些处理后仍有2.5M。打包生产版本分析,也是同样的问题。
  • 项目通过vue-cli命令行创建,因此以下涉及示例的,都以此为准,使用HBuilderX开发的,麻烦自行转换操作。

解决方法

  • 开启运行时压缩

这个方法测试了,没看出有什么帮助。

  • 分包优化

这个方法更多地是对于页面过多或static图片资源过多的情况有用。此项目也进行了分包,但这个并未解决打包后vendor过大的问题。

以上2个方法,为uni官方建议的处理vendor过大的方法,见文档-介绍-uni-app 跨端开发注意事项-vendor过大的处理方式

  • Bug:分包资源被打包到主包而导致的vendor过大

这个问题没有遇到,看起来是曾经版本出现过,但新版本已修复,若是这个问题导致的,则可参考:issue #649question #72577

  • 其他的一些处理方式

看到的一篇文章,虽然我的项目中不是这些原因,但这些方法是需要考虑的:小程序包大小优化(uni-app)

  • 开启生产环境gzip,vendor.js从2.5M减少到440k

如何开启,使用compression-webpack-plugin

vue.config.js:

const CompressionWebpackPlugin = require('compression-webpack-plugin')  
const productionGzipExtensions = ['js', 'css']  

configureWebpack: {  
    plugins: [  
          new CompressionWebpackPlugin({  
            filename: '[path].gz[query]',  
            algorithm: 'gzip',  
            test: new RegExp('\\.('   productionGzipExtensions.join('|')   ')$'),//匹配文件名  
            threshold: 10240,//对10K以上的数据进行压缩  
            minRatio: 0.8,  
            deleteOriginalAssets:false,//是否删除源文件  
          })  
        ]}  
}

文件分析

使用 webpackBundleAnalyzer,可以帮助分析文件大小。

vue.config.js:

pluginOptions: {  
    webpackBundleAnalyzer: {  
      openAnalyzer: process.env.NODE_ENV === 'production'  
    }  
  },

编译后,会同时带一份报告,可查看 stat, parsed, gzip 三种状态的文件大小。

收起阅读 »

IOS离线打包微信分享发生多次二次跳转行为

微信分享

如果确认配置都正确,还是发生多次二次跳转,请到微信下载最新的sdk,libWeChatSDK.a这个文件替换原来的,就可以了.

如果确认配置都正确,还是发生多次二次跳转,请到微信下载最新的sdk,libWeChatSDK.a这个文件替换原来的,就可以了.

分享案例,欢迎讨论

下载地址:
安卓(IOS地址) https://www.dfs168.com/market/viewapp.html?id=503
苹果: https://apps.apple.com/cn/app/id1489907205
H5地址:
http://wechat.dfs168.com/
微信小程序
(微信搜索:大丰收农资优选)

继续阅读 »

下载地址:
安卓(IOS地址) https://www.dfs168.com/market/viewapp.html?id=503
苹果: https://apps.apple.com/cn/app/id1489907205
H5地址:
http://wechat.dfs168.com/
微信小程序
(微信搜索:大丰收农资优选)

收起阅读 »

web2app配置经验

经过一个多星期的反复测试,终于完美打包!http://discuz-q.com/app.apk 提供下载体验!
以下是技术总结。整理不易,如果解决你的问题,不吝点个赞。
经常看到问答里面有很多人提问题没有得到解决,这次也是自己找了无数资料解决后的提供 希望大家能采纳 !

1.内容超出屏幕后右边出现滚动条的问题解决办法!

禁止后视觉效果跟原生APP无异。
需要注意的是,本方法不能使用X5内核,不然无法禁止右边的滚动。
在sitemap.json文件"global"下配置"scrollIndicator" : "none",即可解决!写法如下!

"global": {  
        "webviewParameter": {  
            "scrollIndicator" : "none",//关闭右侧滑动条  
},

2.打开新页面出现等待雪花的解决办法!

在sitemap.json文件"easyConfig"下配置open,即可解决!写法如下!

 "easyConfig": {  
            "open":{   
                        "waiting":false  // 禁用waiting,打开page1页面时,不显示waiting等待框    
                    },

3.增加下拉刷新!

在sitemap.json文件"global"下配置"pullToRefresh",即可解决!写法如下!

"global": {  
        "webviewParameter": {  
            "pullToRefresh":{    
                            "support":true //启用下拉刷新    
                          }                      
                       }  
                    },  

4.增加滑动效果

在sitemap.json文件"easyConfig"下配置open,即可解决!写法如下!

"easyConfig": {  
            "open":{   
                "animation":{//窗口切换动画配置    
                                "type":"pop-in",//窗口动画类型    
                                "duration":300//窗口动画执行时间    
                            },

5.退出时不显示反馈意见

在sitemap.json文件"easyConfig"下配置quit,即可解决!写法如下!

"easyConfig": {  
            "quit": {    
                        "toast": {    
                            "showFeedback": false //不显示“反馈意见”链接,默认为true    
                        }    
                    }   
    },

6.禁用双标题,并配置颜色

在sitemap.json文件"webviewParameter"下配置,即可解决!完整写法如下!

"webviewParameter": {  
                "titleNView": false,  
                "statusbar": {  
                    //状态条背景色,  
                    //首页不使用原生导航条,颜色值建议和global->webviewParameter->titleNView->backgroundColor颜色值保持一致  
                    //若首页启用了原生导航条,则建议将首页的statusbar配置为false,这样状态条可以和原生导航条背景色保持一致;  
                    "background": "#6C9BD3"  
                }  
                            }  
                        },{  
                        "webviewId": "common",    
                            "matchUrls": [    
                                {    
                                    "hostname": "R:.*",    
                                    "pathname": "R:.*"    
                                }    
                            ],    
                            "webviewParameter": {    
                                "titleNView": false  ,  
                                "statusbar": {  
                "style":"dark",  
                "background": "#6C9BD3"  
                }  
                            }    
                        }    
                    ]  
                }  

目前暂时就处理了这些问题,譬如开启硬件加速视频还是无法播放的问题以及原生分享获取不到内容的问题还没有解决,希望解决的老哥提供一下方法!

继续阅读 »

经过一个多星期的反复测试,终于完美打包!http://discuz-q.com/app.apk 提供下载体验!
以下是技术总结。整理不易,如果解决你的问题,不吝点个赞。
经常看到问答里面有很多人提问题没有得到解决,这次也是自己找了无数资料解决后的提供 希望大家能采纳 !

1.内容超出屏幕后右边出现滚动条的问题解决办法!

禁止后视觉效果跟原生APP无异。
需要注意的是,本方法不能使用X5内核,不然无法禁止右边的滚动。
在sitemap.json文件"global"下配置"scrollIndicator" : "none",即可解决!写法如下!

"global": {  
        "webviewParameter": {  
            "scrollIndicator" : "none",//关闭右侧滑动条  
},

2.打开新页面出现等待雪花的解决办法!

在sitemap.json文件"easyConfig"下配置open,即可解决!写法如下!

 "easyConfig": {  
            "open":{   
                        "waiting":false  // 禁用waiting,打开page1页面时,不显示waiting等待框    
                    },

3.增加下拉刷新!

在sitemap.json文件"global"下配置"pullToRefresh",即可解决!写法如下!

"global": {  
        "webviewParameter": {  
            "pullToRefresh":{    
                            "support":true //启用下拉刷新    
                          }                      
                       }  
                    },  

4.增加滑动效果

在sitemap.json文件"easyConfig"下配置open,即可解决!写法如下!

"easyConfig": {  
            "open":{   
                "animation":{//窗口切换动画配置    
                                "type":"pop-in",//窗口动画类型    
                                "duration":300//窗口动画执行时间    
                            },

5.退出时不显示反馈意见

在sitemap.json文件"easyConfig"下配置quit,即可解决!写法如下!

"easyConfig": {  
            "quit": {    
                        "toast": {    
                            "showFeedback": false //不显示“反馈意见”链接,默认为true    
                        }    
                    }   
    },

6.禁用双标题,并配置颜色

在sitemap.json文件"webviewParameter"下配置,即可解决!完整写法如下!

"webviewParameter": {  
                "titleNView": false,  
                "statusbar": {  
                    //状态条背景色,  
                    //首页不使用原生导航条,颜色值建议和global->webviewParameter->titleNView->backgroundColor颜色值保持一致  
                    //若首页启用了原生导航条,则建议将首页的statusbar配置为false,这样状态条可以和原生导航条背景色保持一致;  
                    "background": "#6C9BD3"  
                }  
                            }  
                        },{  
                        "webviewId": "common",    
                            "matchUrls": [    
                                {    
                                    "hostname": "R:.*",    
                                    "pathname": "R:.*"    
                                }    
                            ],    
                            "webviewParameter": {    
                                "titleNView": false  ,  
                                "statusbar": {  
                "style":"dark",  
                "background": "#6C9BD3"  
                }  
                            }    
                        }    
                    ]  
                }  

目前暂时就处理了这些问题,譬如开启硬件加速视频还是无法播放的问题以及原生分享获取不到内容的问题还没有解决,希望解决的老哥提供一下方法!

收起阅读 »

【建议】uniapp建议设置最大宽度

uniapp

现在在pc打开uniapp的\h5,因为屏幕太大了,体验不好

现在在pc打开uniapp的\h5,因为屏幕太大了,体验不好

5+app 底部留白解决方案

mui.init();
mui.plusReady(function() {
var nwating = plus.nativeUI.showWaiting(); //显示原生等待框
var wb = new plus.webview.create("demo.html","demo", {contentAdjust:false});
wb.addEventListener('loaded', function() {
nwating.close(); //关闭等待框
wb.show(); //把新的webview窗口显示出来
}, false);
});

继续阅读 »

mui.init();
mui.plusReady(function() {
var nwating = plus.nativeUI.showWaiting(); //显示原生等待框
var wb = new plus.webview.create("demo.html","demo", {contentAdjust:false});
wb.addEventListener('loaded', function() {
nwating.close(); //关闭等待框
wb.show(); //把新的webview窗口显示出来
}, false);
});

收起阅读 »

uniapp的demo无法双向数据绑定

uniapp的demo无法双向数据绑定

uniapp的demo无法双向数据绑定