兼容性问题

picker 添加年插件问题总结 取消按钮点击事件无法获取可以获取到取消按钮标签和确定按钮标签 但是只能获取去顶按钮事件,取消点击事件无法获取 通过判断picker的display状态也不能确认此事件 lable标签无法绑定事件这时需要添加一个单独全选按钮时 可以在herder内添加一个按钮 调用同一picker会保存一部分数据不清除可以在picker.dispose()结束时判断第一个picker是否已经调用， 如果第一个picker调用了 判断函数内重新生成新的picker ， 存储新的数据 ，这时就可以 最后清除这个picker 4.setData后 在show()调用前重新赋值添加新的元素只能添加值 没有对应的html片段 可以在setData前把data存储到一个变量内 进行修改后再传入setData5.单页时由于下拉刷新只能在页面内使用一次 再次使用会造成冲突 两者均不可用 只在首页面使用 或者像mui库示例一样 跳转到新页面 双webview6.picker蒙层点击禁止事件无法绑定 可以获取到此蒙层点击事件，但是无法阻止默认事件可通过点击后删除此蒙层，再次调出此picker display = block生成一个自定义蒙层 判断点击事件是否在蒙层上 添加私有class生成前先判断是否有此class蒙层 有则先移除removeChild减少在页面新生的元素 每当点击到蒙层就先删除原私有蒙层再创建新私有蒙层 以此模拟禁止蒙层点击事件7.模拟禁止蒙层会同时影响其他蒙层效果 如折叠框蒙层 重新给折叠框蒙层添加事件 先判断其display 值 none 或者 null;首次点击可能已经被模拟禁止清除 此时为空值剩下的根据display状态修改即可8.360浏览器兼容模式模拟IE浏览时JQ的AJAX请求GET类型不能正常执行，使用POST请求。 9.IE EDGE下Iframe标签渲染问题可以使用META调整至IE低版本渲染模式。 10.mui返回按钮不支持通过window.open打开的页面 可以使用window.location.href打开新页面，能够直接使用。 11.onbeforeunload事件，除IE完全支持至修改返回内容外 ，其余浏览器均不支持。查到相关内容大致原因如下： 此机制避免某些开发者通过监听此事件，阻止用户离开页面，做些不一道德的事情。仅对想要在用户关闭页面时还执行各种操作阻止用户关闭操作的PM表示，咳咳咳。。。 mui返回按钮返回mui可滑动单页面套用时需要严格按照demo模板静态HTML层进行修改 不需要的内容可以通过z-index覆盖隐藏。mui遮罩在手机端容易出现不能正常显示的问题，使用原生js和html生成遮罩效果。JS拼接HTML片段时 闭合标签需要不换行拼接，或者换行使用转义符进行拼接。对页面功能进行调整后，功能函数耦合度要同时尽可能降低耦合度，减少页面功能修改时其他受影响函数的修改。

作者：WeTest小编商业转载请联系腾讯WeTest获得授权，非商业转载请注明出处。原文链接：https://wetest.qq.com/lab/view/450.html通过兼容测试服务，用户在拿到一份数据详细的兼容测试报告后，可以直观看到产品自身的兼容性问题，如安装失败、UI异常、闪退等现象。在上一期《一分钟读懂兼容测试报告》系列中，为了让用户能更直观判断产品纵向兼容性变化情况，掌握优化效果，推出“历史版本对比”功能，可勾选历史版本测试记录，自动生成兼容性图表对比报告，帮助用户更直观观察版本兼容质量情况。但是，用户也产生了新的疑惑：指标优化到什么标准，才算是好的标准？行业数据对比功能上线 轻松判断产品档次“书同文，车同轨，行同伦”，为了让每个测试和开发者能清晰地了解自己产品的测试情况在与行业的竞品相比是什么情况，WeTest在深度兼容和专家兼容测试报告中，率先上线了“行业数据对比”功能，收集大量同行业应用的测试数据进行分析处理，帮助用户进行横向对比。如何使用“行业数据对比”功能？用户进入提测页面上传完产品后，系统会自动弹出提示“完善信息”，使用者根据具体情况选择相应行业，确认提交即可。拿到深度兼容或专家兼容测试报告时，在问题概述通过率模块下方，会根自动显示查看某行业数据对比。只需点击蓝色字体“行业数据对比”，即可进入对比报告页面。在对比报告页面里，WeTest对提测产品的通过率、安装失败率、拉起率、Crash率等数据和“行业均值”、“行业前20%”数据标准进行对比参照。通过数据对比参照，可以判断自身产品的兼容性水平档次，便于开发者优先处理严重级别问题。测试/开发者除了对以上兼容性方面的数据水平关注外，还会注意每台设备的性能数据，观察CPU、内存占用和FPS等数据情况，判断产品质量如何。设备性能数据标准出炉 对比更简单用户除了可以对比兼容性问题概况数据外，WeTest还整理出了设备性能数据的行业标准：从报告中可以横向对比应用平均性能水平，提供筛选功能，选取不同档次设备的数据对比情况，让开发者更有针对性的进行优化。_WeTest兼容测试致力于帮助厂商找出产品兼容性问题，节省厂商测试成本和时间，一键提交获取深度兼容或专家兼容报告，现可同步获得详细的行业数据对比。究竟你的产品兼容性状态如何呢，快来WeTest检测一下吧！传送门：https://wetest.qq.com/cloud/deepcompatibilitytesting

背景使用 window.open 进行弹窗显示，实现微信二维码弹窗功能在双屏情况下，chrome浏览器位于副屏弹窗时，会存在弹窗位置异常问题。目前网上相关解析及解决方案几乎没有，故写此文章以作分享。文章重点双屏情况下，chrome浏览器弹窗位置问题多屏幕时，chrome浏览器位于非主屏进行弹窗显示时，设置弹窗的left，top将会异常本文将分析其显示异常的原因，并给出解决方案解决该问题的分析过程这是本文分享的另一个重点除了解决方案，希望能通过本文和大家分享笔者解决该问题时的思路和方法。这些方法可能不是最优的，但希望能给大家带来一点触动或者启示。在解决到其他问题的时候也用得上。window.open的第三个参数及其兼容性介绍window.open方法相信大家都不会陌生，通常用于传递一个地址参数，新建一个浏览器tab页面。但除了第一个地址参数，window.open还另外接收两个参数，分别是「strWindowName（新窗口的名称）」，「strWindowFeatures（新窗口特性）」这强调的是第三个参数，当设置了第三个参数后，新开的弹窗将会在原页面的基础上，已非tab页面的形式进行显示，有以下几个特点在原页面上进行弹窗显示，而不是新起浏览器tab页面进行跳转。其显示方式类似alert弹窗，属于原页面的一个功能模块，而不是跳转至新页面。非tab页面，这意味着它不像其他tab页面那样可以放在浏览器tab栏中，它是折叠不进去了，是以弹窗的形式呈现。第三个参数「strWindowFeatures」可以设置新窗口特性，例如宽度，高度，距顶，距左，是否显示滚动条等等。本文不做详细介绍，参数详情可以参考这篇文章需要注意的是，strWindowFeatures里的特效并不是每个浏览器都支持的，不同于「dom」，这属于「bom（borwser Object Model）」的内容。具体兼容性这里也不讲了，网上也有相关文章chrome的兼容性与坑（重点一）异常的显示即使看完上面的兼容性文章，当你使用chrome浏览器，位于非主屏进行弹窗时，依然会存在位置设置异常的问题。实现居中显示弹窗，一般代码会这样写const windowWidth = window.screen.width // 屏幕宽度const windowHeight = window.screen.height // 屏幕高度const pageWidth = 600 // 弹出窗口的宽度const pageHeight = 550 // 弹出窗口的高度let pageTop = (windowHeight - pageHeight) / 2 // 窗口的垂直位置let pageLeft = (windowWidth - pageWidth) / 2 // 窗口的水平位置;window.open(‘xxx’, ‘xxx’, width=${pageWidth},height=${pageHeight},top=${pageTop},left=${pageLeft}) // 实现居中弹窗这段代码在主屏幕显示没有问题，可以居中显示，但如果将页面移换到副屏幕进行弹窗时。你会发现，无论参数怎么设置，弹窗都会在屏幕最左侧或屏幕最右侧进行显示，并不是水平居中。点击这里查看示例异常的原因及其解决方案原因可能很多同学都难以想到，这是因为弹窗的left和top参数，并不是基于当前页面作为原点进行计算的，而是以主屏幕作为原点进行计算所以进行位置设置时，需要计算其基于主屏幕的偏移值。那怎么知道当前是否处于主屏幕上呢？可以通过window.screen.availLeft参数来解决，该参数返回浏览器可用空间左边距离屏幕（系统桌面）左边界的距离。通过该参数，甚至不需要知道目前处于哪个屏幕上，直接加上该参数即可基于当前屏幕进行定位。修改后的代码如下const { availLeft, // 返回浏览器可用空间左边距离屏幕（系统桌面）左边界的距离。 availHeight, // 浏览器在显示屏上的可用高度，即当前屏幕高度 availWidth, // 浏览器在显示屏上的可用宽度，即当前屏幕宽度} = window.screenconst pageWidth = 600 // 弹出窗口的宽度const pageHeight = 550 // 弹出窗口的高度let pageTop = (availHeight - pageHeight) / 2 // 窗口的垂直位置let pageLeft = (availWidth - pageWidth) / 2 // 窗口的水平位置;left += availLeft // 加上屏幕偏移值window.open(‘xxx’, ‘xxx’, width=${pageWidth},height=${pageHeight},top=${pageTop},left=${pageLeft}) // 实现居中弹窗「top」参数的设置同样存在这个问题如果主屏幕和副屏幕并不是处于相同的高度，「top」值的设置同样会由于距系统主屏幕定位，而发生定位异常的显示。看下面这张图可能更好地理解另外目前笔者发现，这个兼容性问题，仅会在chrome内核的浏览器存在，safari上运行是不存在该问题的。综上所述，得出最终的解决方案为const { availTop, // 返回浏览器可用空间左边距离屏幕（系统桌面）左边界的距离。 availLeft, // 返回浏览器可用空间左边距离屏幕（系统桌面）左边界的距离。 availHeight, // 浏览器在显示屏上的可用高度，即当前屏幕高度 availWidth, // 浏览器在显示屏上的可用宽度，即当前屏幕宽度} = window.screenconst pageWidth = 600 // 弹出窗口的宽度const pageHeight = 550 // 弹出窗口的高度let pageTop = (availHeight - pageHeight) / 2 // 窗口的垂直位置let pageLeft = (availWidth - pageWidth) / 2 // 窗口的水平位置;if (navigator.userAgent.indexOf(‘Chrome’) !== -1) { // 兼容chrome的bug top += availTop // 距顶偏移值 left += availLeft // 距左偏移值}window.open(‘xxx’, ‘xxx’, width=${pageWidth},height=${pageHeight},top=${pageTop},left=${pageLeft}) // 实现居中弹窗问题解决过程（重点二）笔者遇到该问题是通过如下方式一一寻找解决方案百度最基础，成本最低的一步，笔者进行过以下关键字的搜索（这里主要突出关键字提取）window.open 居中显示window.open left chromewindow.open left 异常window.open 定位 异常window.open chrome 兼容性window.open 双屏显示异常搜索结果，找到了相关的问题，但未能找到真正有效的解决方案。问答论坛stackoverflow，国外著名的编程问答网站，纯英文，内容全。segmentfault，国内的stackoverflow，内容也不错。MDN官网维基百科：MDN Web Docs（旧称Mozilla Developer Network、Mozilla Developer Center，简称MDN）是一个汇集众多Mozilla基金会产品和网络技术开发文档的免费网站。一般可以看作前端基础函数的官方说明文档，具有一定的权威性，当然一定程度上会更为难懂其他页面代码分析寻找网上实现了该功能的网站，下载其页面代码进行分析。网上的代码都是加密过的，虽然不直观，但能推测或猜出一些端倪各关键词搜索首先，通过chrome调试工具，找到触发弹窗的按钮ctrl+s，下载整个页面，通过IDE全局搜索整个页面中关于该按钮的信息，如class，id，及其他属性值，能定位到该按钮的属性都全局搜索一遍逐文件查看，有无相关配置window.open 函数名搜索打开弹窗肯定需要通过该语句，全局搜索，如果window没被覆盖的话应该能找到第三个参数搜索根据 strWindowFeatures 可配置项目进行全局搜索，提取其特点，如「scrollbars」，「titlebar」这些变量以及其字符串形式传参的特点，搜索「,left=」「,height=」重置函数终极大招，函数重置，及通过在chrome控制台重置该函数，来观察其传参情况打开chrome控制台，找到Console栏，拷贝如下代码window.open = function () { console.log(arguments)}再此进行登录弹窗操作，触发函数执行笔者是在前三个方法都失败的情况下，通过第四个方法找到的问题所在。发现其left值传参为负数，在自己项目中设置为负数也能实现居中效果从而推测出原因感谢阅读，祝好 ...

使用最新版本的 create-react-app（v2.1.0）创建 react 项目时，在 IE 9 & IE 10 中碰到了"Map未定义"的报错：很明显，这是 IE9 对 ES6 的兼容性问题。首先尝试了两种方式：使用 create-react-app 官方提供的 react-app-polyfill，然后在入口文件 index.js 中引入：import ‘react-app-polyfill/ie9’根据 react 官方文档，使用 core-js 引入 polyfill：import ‘core-js/es6/map’import ‘core-js/es6/set’这两种方案的结果是使用 yarn build 打包之后，在 IE9 中运行无问题，但是在开发模式下依然报错。此时可以断定，是在开发模式中执行的某些代码具有兼容性问题，并且这些代码是先于 index.js 执行的。于是，通过在 index.html 文件的头部引入 es6-sham 和 es6-shim，保证执行所有代码前执行 polyfill 脚本，解决了该兼容性问题。… <title>React App</title> <script src="./es6-sham.js"></script> <script src="./es6-shim.js"></script> </head>…谈到这里可能有同学会问，polyfill、es6-sham、es6-shim 分别是什么呢？Dr. Axel Rauschmayer 是这么解释的:A shim is a library that brings a new API to an older environment, using only the means of that environment.A polyfill is a piece of code (or plugin) that provides the technology that you, the developer, expect the browser to provide natively. Flattening the API landscape if you will. Thus, a polyfill is a shim for a browser API. You typically check if a browser supports an API and load a polyfill if it doesn’t. That allows you to use the API in either case.shim 的意思是“垫片”，polyfill 的意思是“腻子粉”，都有填平间隙的比喻义。唯一的不同在于，polyfill 是特定与浏览器环境的，而 shim 则可以用于各种环境，如 node etc. es6-shim 则是为原生不支持 ES6 的运行环境提供的脚本。那么，sham 又是什么呢？stackoverflow 中的一个回答是这样的：The shams, however contain those features that can not be emulated with other code. They basically provide the API, so your code doesn’t crash but they don’t provide the actual functionality.sham 的意思是“赝品”，它主要用于模拟一些无法用其他代码实现的 API，防止代码 crash；但是，它们也无法提供该 API 真正的功能，所以，是一种 saliently fail 的手段。一些常见的 sham 可以参见 es5-sham 和 es6-sham。（完） ...

作者：WeTest小编商业转载请联系腾讯WeTest获得授权，非商业转载请注明出处。原文链接：https://wetest.qq.com/lab/view/437.html对于游戏行业的不少人来说，2018年是一个多事之秋。放眼大局，游戏玩家中，70%用户已有3年以上的互联网经验，玩家们对游戏审美迅速提高。而相较2017年，游戏工委&伽马数据《2018年中国游戏产业报告显示》，中国游戏市场实际收入同比增长率，从23%下降至5.3%，这说明国内游戏行业增量已经转为了深耕存量的阶段。正如腾讯WeTest总经理方亮所言，游戏厂商依靠上游用户圈地的运动已经走到了尽头。但在险象环生的同时，2018年也更是充满变化与机遇的一年。2019年1月7日，腾讯WeTest《2018中国移动游戏质量白皮书》（以下简称“白皮书”）正式发布，现已于腾讯WeTest官方网站开放下载。通过腾讯大数据及其他第三方平台数据，白皮书着重从市场硬件、兼容、客户端性能、服务器性能、安全、玩家口碑、小游戏等玩家体验最敏感的质量视角进行数据采集与深入分析，客观地反应出了2018年中国移动游戏研发市场的现状与变化。_【图1】《2018中国移动游戏质量白皮书》正式发布风险与机遇并存，风起云涌的2018从游戏品类出发观察，2018年间，已有不少产品在精品化与多元化上深挖起来。角色扮演类、动作类、策略类游戏仍占苹果应用商店的60%的份额。其中，角色扮演类游戏与动作类游戏的比重持续下降，但策略类游戏则依旧占比17%，风华正盛。这些头部游戏品类已进入以品质为导向的存量阶段，一并呈现出精品化、细分化、多元化的态势。【图2】App Store 游戏畅销榜Top1000游戏类型分布同时，移动游戏市场上也呈现出更为丰富的多元化特征，“战术竞技类”等涵盖多元化玩法的游戏开始登上主流舞台。而更为垂直的细分领域已衍生至14种，其中模拟游戏、家庭游戏、桌面游戏开始初露头角。另一方面，玩法轻便、即点即玩的小游戏也开始展露更多的能量。与此同时，2018年间，移动硬件设备的迭代更加速了。【图3】Android TOP100硬件配置占比统计屏幕方面，虽然16：9的设备仍是主流。此外，“刘海屏”“全面屏”等异形屏设备的覆盖人群更占据市场7%左右。这些来自用户需求与技术发展的变化，同样也为游戏开发者在游戏兼容性、客户端、服务器、安全性等一系列适配上提出了更高的要求。市场需求发展加上外部硬件的变化为游戏开发者们带来新的机遇，而想要在资源有限的情况下，于项目立项的阶段取胜，就要准确把握用户瞬息万变的审美需求。唯有掌握了曾在2018年发生的问题，拥抱变化，才能在2019年扭转乾坤。TOP 100 机型游戏综合性能数据公布，客户端问题玩家最为敏感腾讯WeTest企鹅风讯平台对抽样游戏在2018年产生的舆情调查显示，登录、卡顿、掉线问题最受玩家关注。从游戏分布来看，登录问题主要集中于动作类、策略类游戏；而卡顿问题则是动作类、角色扮演类游戏的高发问题。【图4】玩家舆情报警数量分布(客户端问题包括：登录、闪退、更新、下载、安装、启动、硬件和兼容问题)因此，针对腾讯大数据统计出的TOP 100 Android机型以及 TOP iOS机型，腾讯WeTest甄选了战术竞技、体育竞技、ARPG等游戏，一并综合生成性能评分，方便开发者在研发期间，选择性能调优阶段的参考机型。【图5】【图6】Android、iOS两大阵营主流设备性能表现首度公开腾讯手游性能大数据，战术竞技游戏服务器痛点同步揭露在2018年，根据苹果应用商店游戏畅销榜可知，多头寡头效应依然明显。而对于这些极具竞争力的产品标杆，开发者们无法详细掌握相关数据，因此更无法找到优化方向。为了助推手游行业标准建立，协助行业性能优化提升，腾讯WeTest首次公开腾讯游戏真实性能数据，战术竞技、MMORPG、体育竞技等主流品类游戏均囊括其中。【图7】腾讯Android手游性能大数据【图8】腾讯iOS手游性能大数据同时，由于站在2018年风口上的战术竞技游戏，通常采用UE4引擎机制，战斗服会承担大量同步、物理、逻辑等计算，因此对游戏的服务器性能带来众多挑战。白皮书中，全面剖析了来自服务器的技术性难点，值得开发者重点关注。【图9】战术竞技游戏服务器的痛点兼容性问题不容忽视，显示异常问题需要关注基于腾讯WeTest平台测试对Android产品大数据统计，平均每次测试能够发现游戏产品拥有10.1个兼容性问题，其中，显示异常、Crash问题占比超过70%。此外，功能问题亦占比14%。【图10】Android游戏兼容性问题类型分布随着Android机型内存升高，相较2017年，APK crash、安装失败等致命问题显著降低。但高配机型中异形屏的出现，导致UI异常问题频发。【图11】不同Android内存、系统机型兼容性问题分布情况同时，2018年中，Android 9 Pie面向全球发布，新的流量池正在被挖掘与重视。随着系统版本的升高与开发者的逐渐适应，Crash问题正逐步减少，但Android 8 的显示异常问题比重仍最高，需要重点关注。另一方面， iOS系统平均每次测试能够发现3-4个问题。其中，显示异常占比高达56%，需要开发者重点关注。而从iOS 10开始，安装失败与无响应问题迅速减少，基本为零。【图12】iOS游戏兼容性问题类型分布安全问题间不容发，强交互手游需重点关注外挂漏洞在移动APP中，游戏一直是安全漏洞的重灾区。腾讯WeTest对产品研发期与运营期手游安全情况进行比较，发现了最新问题：其一，强交互游戏依然是外挂漏洞的“温床”；其二，研发期游戏漏洞如果没有解决，会在运营期衍生多个外挂变种，严重影响手游平衡性；其三，动作射击类游戏由于其“强交互”特质，成为了外网外挂的“宠儿”。【图13】手游研发期与运营期间，平均单款手游安全问题占比而数据显示，最为致命的外挂问题下，“刷道具”为手游研发期最多的安全漏洞，定制外挂与通用修改器，则是手游运营期外网常见作弊方式。此外，在手游研发期存在的致命安全漏洞问题，将由于高收益在运营期会明显扩张，占比从研发期的34%上升至运营期的50%，因此开发者在手游研发期就要防微杜渐、未雨绸缪。【图14】手游研发期间，具体外挂安全问题占比全面分析小游戏测试难点，功能与适配是主流问题2018年，是小游戏爆发的元年，亦是小游戏精品化、重度化的一年。从小游戏的上线产品的比例来看，角色扮演类占据26%，休闲益智类占据24%，而在2018年下半年开始，一些策略战棋类的重度游戏类型开始出现在小游戏中，重度游戏在小游戏市场中，并非没有机会。而从产品本身观察，小游戏目前正在向精品化轻度化发展。【图15】2018年小游戏类型分布情况而相较手游通用测试模块，小游戏有着相对独立的测试内容。依托于腾讯旗下小游戏研发经验以及案例，白皮书显示，功能问题与适配问题占据小游戏测试问题主流，同时性能问题亦占据16%不容忽视。【图16】小游戏测试问题分布情况针对小游戏性能情况统计，有6%-7%的用户因游戏加载时间过长从而流失，小游戏用户流失情况与加载时长形成正比。因此，针对小游戏的加载时间，腾讯游戏根据不同机型档次，设立了加载时间上线标准。【图17】小游戏加载时间上线标准而在小游戏所面临的适配问题中，67%的问题来自显示异常，异形屏带来的UI适配问题非常明显，亟需开发者关注。 【图18】小游戏适配问题类型分布展望未来，腾讯WeTest与您同行在未来的2019年里，无论是游戏产品，亦或是互联网下的其他行业产品，统一、批量生产的简单模式定会被逐步迭代。正如WeTest总经理方亮先生所言，取胜关键必然是品质与创意，因此开发者更要做好严格的品质把控，务必珍惜来之不易的流量。在此之下，奔跑的不仅是开发者们，腾讯WeTest作为第三方平台也将与时俱进，超越品质，点亮游戏。作为一站式品质开放平台，腾讯WeTest一直致力于推动优质内容顺利产出，帮助开发者解决难题，在测试效率与质量上产生1+1>2的效果。在过去的一年间，腾讯WeTest对旗下兼容、性能、安全、舆情等服务进行了全方位品质升级，并持续输出云游戏、AI自动化测试、基于AI的同步控制系统、性能大数据分析、舆情大数据分析、舆情预警等前沿技术。而在未来，腾讯WeTest将从游戏出发，逐步将前沿的技术和服务辐射向金融、电商、视频等更多行业，助力更多精品的诞生。_更多详细内容，请参见完整版《2018中国移动游戏质量白皮书》，各位开发者可前往腾讯WeTest平台官网（wetest.qq.com）或点击：https://wetest.qq.com/whitepaper/2018 下载。如果使用当中有任何疑问，欢迎联系腾讯WeTest企业QQ：2852350015

作者：WeTest小编商业转载请联系腾讯WeTest获得授权，非商业转载请注明出处。原文链接：https://wetest.qq.com/lab/view/433.htmlWeTest 导读中国移动视频用户规模越来越大，各类移动视频APP也百家争鸣， B站作为国内知名的年轻人文化社区，bilibili在推出移动端时，除了坚持自身的独特定位以外，对其APP的质量也十分重视。18年中旬，WeTest深度兼容测试团队和B站的故事就此开始。“弹幕发送”“视频分辨率” “直播间送礼”是主要关注点作为视频弹幕类APP，通常会关注其使用频率最高的场景，bilibili测试的主要场景如下：1.用户常用场景，如登录界面、推荐页、相关视频、首页搜索等。2.作为弹幕视频APP，bilibili十分关注直播间/播放器场景的兼容问题，如弹幕发送、弹幕举报，调整视频分辨率。社交场景，如发布个人动态，直播间送礼等。可以发现，弹幕发送，视频分辨率，直播间送礼是bilibili app在兼容测试过程中的核心关注点。WeTest的兼容测试方案一、测试用例设计根据bilibili的测试需求，WeTest与bilibili团队共同设计了详尽的测试脑图，尽可能的覆盖尽可能多的场景：bilibili测试用例脑图而部分重点场景，为了保证其兼容性质量，WeTest进行了反复的测试，保障外网质量的稳定。部分场景测试过程展示：1. 模拟真人发布动态成功输入一条“哔哩哔哩”动态2. 视频播放的UI界面功能包括全屏播放视频，调整视频分辨率，关闭/开关弹幕等等。3. 在视频详情页发送实时弹幕调出弹幕输入框，输入文字“bilibili”。针对bilibili的特殊情况，比如调用相机拍照功能、视频播放的UI界面显示，直播时赠送礼物等，WeTest团队也逐一攻克。二、24小时高效测试执行在确立测试排期后，WeTest从执行方案到产出报告，再从产品报告到人工复查，最多需要花费24小时。APP质量问题刻不容缓，将APP兼容性适配交付给WeTest，24小时内便能够收到一份高质量、精准定位兼容性问题的报告。三、专业报告产出，精准定位问题通过WeTest兼容测试报告，用户可以迅速了解到每款设备的测试过程，准确定位测试问题。所有测试设备的测试过程都有单独的截图和性能数据时间轴，可以在设备的测试详情里查看。测试过程中常见的问题具体包含：APP Crash、拉起失败、安装失败、进程退出等问题左侧是测试步骤概览问题列表里是本次测试过程中所有出现的问题，可以根据不同维度筛选。测试完成后，WeTest平台会自动生成测试报告，在报告中可以详细看到每台设备的测试运行情况，测试发现的问题在报告中都有对应的日志截取，以方便客户查找原因。深度兼容测试的服务优点还体现在人工复测上。WeTest专业测试人员会检查每一台机型的截图，并对一些平台无法检测的问题进行复查。四、覆盖各类主流机型、新老机型，涵盖各层级用户在每一次为bilibili提供兼容测试服务过程中， WeTest专业测试人员都会对测试重点、测试时长、测试资源以及测试额度多个方面内容都进行了专业评估。WeTest基于腾讯大数据统计，提供实时更新的主流机型，覆盖苹果、华为、oppo、vivo、小米等品牌几乎所有品牌，同时兼顾老机型、低配设备，精准覆盖90%以上的用户，高效助力bilibili发现目标机型兼容性问题。为客户省去测试技术、人力成本、设备数量等各类成本投入，综合折算下来， WeTest深度兼容测试服务可以为用户节约70%的测试成本。效果显著，bilibili兼容问题影响范围降低93%WeTest深度兼容测试团队针对bilibili APP的特性，定制了个性化的自动化测试脚本，深入覆盖了核心场景，完成多轮次的深度兼容测试服务。在整个测试过程中，WeTest累计为bilibili诊断出上百个兼容问题，影响的用户范围下降了93%左右。WeTest助力bilibili APP进行适配优化，降低版本上线质量风险，共同提升bilibili用户的使用体验。bilibili表示，为了保障大体量用户的使用体验，需要足够的机型覆盖到足量的手机用户规模，WeTest很好的帮助我们实现了这点，WeTest之前积累的一些视频行业APP测试的经验，也在这次测试中的用例设计和执行中很明显的体现了出来，帮助我们覆盖了最核心的用户场景，在新版本上线前起到了有效的支持和保障。“深度兼容测试”现已对外，腾讯专家为您定制自动化测试脚本，覆盖应用核心场景，对上百款主流机型进行适配兼容测试，提供详细测试报告。点击：https://wetest.qq.com/cloud/deepcompatibilitytesting 即可体验。如果使用当中有任何疑问，欢迎联系腾讯WeTest企业QQ：2852350015

在安装Mysql8.0之后，需要跟我们原有的PHP进行协同工作，然而原先与Mysql5.1能够很好协同的代码，突然报错，看来需要做一些额外的工作。报错：PDO::__construct(): Server sent charset (255) unknown to the client. Please, report to the developers根据网上资料显示，是由于Mysql8.0将默认的字符集改为了utfmb4，因此和客户端（不仅仅是PHP）的通信无法识别，我们需要更改my.cnf来指定字符集。[client]default-character-set=utf8[mysql]default-character-set=utf8[mysqld]collation-server = utf8_unicode_cicharacter-set-server = utf8报错：PDO::__construct(): The server requested authentication method unknown to the client [caching_sha2_password]根据网上资料显示，是由于用户身份认证的加密方式不兼容导致的，mysql8.0中默认方式为caching_sha2_password，引起老版本兼容性问题，老版本加密方式为mysql_native_password。新建用老版加密方式初始化密码的用户即可：CREATE USER username@localhost identified with mysql_native_password by ‘password’;报错：Access denied for user ‘root’@’localhost’ (using password: YES)mysql> GRANT ALL PRIVILEGES ON . TO ‘oss’@’%’;ERROR 1045 (28000): Access denied for user ‘root’@’localhost’ (using password: YES)在我给其他用户加权限的时候，报错无权限，原因是我一不小心删掉了root身份的用户，虽然网上有很多的文档解决这个问题，但是我重建后的root用户虽然拥有Grant_priv: Y但依然无法成功分配权限，我很头疼。解决方法：重装，参考文章安装Mysql8.0。总结mysql8.0有什么新的特性我没有详细查看文档，但是兼容性先让我吃了一顿苦头，还好在解决完这3个问题后，我的PHP程序成功跑了起来，下面我要去升级PHP5.1到PHP7了。参考资料PDO::__construct(): Server sent charset (255) unknown to the client. Please, report to the developers：https://stackoverflow.com/que…PDO::__construct(): The server requested authentication method unknown to the client [caching_sha2_password]：https://stackoverflow.com/que…安装Mysql8.0：https://segmentfault.com/a/11… ...

记录下在微信小程序中遇到的一些兼容性问题，ios兼容性1.ios中input的placeholder属性字体不居中对placeholder设置line-height及font-size对input设置高度2.ios中滚动卡顿设置-webkit-overflow-scrolling:touch;3.微信小程序中解决ios中new Date() 时间格式不兼容在实现倒计时，根据后台返回的时间格式转换时，后台返回了时间格式为”2018-11-12 11:12:11”，然后利用new Date() 转换时，ios中无法展示，安卓中显示正常let time = ‘2018-12-10 11:11:11’;let temporaryTime1 = new Date(time);this.setData({ timeRemain1: temporaryTime1,})/* 利用正则表达式替换时间中的”-”为”/”即可 */let time = ‘2018-12-10 11:11:11’;let temporaryTime = new Date(time.replace(/-/g,’/’));let temporaryTime1 = new Date(time);this.setData({ timeRemain: temporaryTime, timeRemain1: temporaryTime1, })4. 微信小程序scroll-view隐藏滚动条方法在wxss里加入以下代码：::-webkit-scrollbar{width: 0;height: 0;color: transparent;}暂时遇到的兼容性就是这么多，会持续更新，若大家有遇到，可在评论区告知下，感谢正在努力学习中，若对你的学习有帮助，留下你的印记呗（点个赞咯^_^）往期好文推荐：判断ios和Android及PC端实现文字的省略号纯css实现瀑布流（multi-column多列及flex布局）