不依赖wifi热点的移动web真机测试解决方案Carefree

简介:从此我厂移动web真机测试告别 wifi 热点。 厂外的小伙伴看到这篇文章标题可能会感到莫名其妙,真机测试移动 web 与 wifi 热点有神马关系?的确,通常情况下真机测试移动端 web 确实用不到 wifi 热点。不过,我厂的前端开发和测试小伙伴对此一定不会感到陌生,我们受这个问题困扰太久太久了。 手机真机测试经常有需要访问开发电脑的场景,比如: 访问开发电脑本地的开发文件 使用电脑 hosts 在电脑上抓包、调试页面 …… 而我厂的手机和开发用电脑处于不同网络,无法直接互访。所以,不少小伙伴无奈使用电脑发射 wifi 热点给手机连接,使其处于同一局域网,以实现互访。这种方案的问题可归结为两大方面:一是政策方面,我厂信息安全规定明确禁止发射个人 wifi 热点;二是体验方面,发射 wifi 热点繁琐且不稳定,影响工作效率。 针对这个工作中的痛点,我们现提出一套不需要 wifi 热点的跨平台移动 web 真机测试解决方案,希望它能缓解小伙伴的些许困扰,像这个方案的名字 Carefree 一样,快乐舒畅的工作。 Carefree 解决方案由“服务端 whistle ”和“ webpack 插件 @nutui/carefree ”两部分组成。 服务端 whistle 现在主流的代理调试工具有 Fiddler 、 Charles 和这两年在前端流行起来的 whistle 。 whistle (读音[ˈwɪsəl],拼音[wēisǒu])是一个基于 Node 实现的跨平台 web 调试代理工具,主要用于查看、修改 […]

小程序实战总结

本文从小程序框架、 api 、组件、应用四个方面入手,说明在开发过程中遇到的问题,并给出处理方案。 小程序虽然具有相对完善的文档,但难免文档中会有解释不清晰,不易被人发现,甚至未曾提及的问题。本文从具体的业务场景出发,汇总笔者在原生小程序日常开发中遇到的常见问题,并给出相应的解决方案,希望能够将这些细节经验分享给需要的童鞋。 框架 运行机制与更新机制 运行机制: 小程序启动会有两种情况,一种是「冷启动」,一种是「热启动」。 假如用户已经打开过某小程序,然后在一定时间内再次打开该小程序,此时无需重新启动,只需将后台态的小程序切换到前台,这个过程就是热启动;冷启动指的是用户首次打开或小程序被微信主动销毁后再次打开的情况,此时小程序需要重新加载启动。 小程序没有重启的概念。 当小程序进入后台,客户端会维持一段时间的运行状态,超过一定时间后(目前是5分钟)会被微信主动销毁。 当短时间内(5s)连续收到两次以上收到系统内存告警,会进行小程序的销毁。 更新机制: 小程序冷启动时如果发现有新版本,将会异步下载新版本的代码包,并同时用客户端本地的包进行启动,即新版本的小程序需要等下一次冷启动才会应用上。 如果需要马上应用最新版本,可以使用 wx.getUpdateManager API 进行处理。 虽然文档中有对这一部分进行说明,但是隐蔽比较深,还是需要重点说明一下,理解运行机制就可以解释为什么刚关闭的小程序打开之后还能保存之前的状态,理解更新机制就明白新发版的小程序为什么需要删除旧的版本再下载新的版本再能有新版的内容了。 如何清除小程序缓存呢? 通过太空囊’…’按钮—打开调试—console—wechat—wx.clearStorage()方法清除,此方法删除 storage 中的数据。 通过微信的”发现”tab签—小程序—长按或者右滑删除指定小程序,此方式彻底卸载该小程序,也就清除了所有内容,包括 storage 中缓存数据、场景值、页面堆栈等。 预览与远程调试的区别 小程序的调试方式有多种,可以通过预览亦可通过远程调试,这两者有何区别呢? 将两者生成的二维码转为url: 预览 URL 为:https://mp.weixin.qq.com/a/~~xxt10QprXmU~rsguk7Cm9P3v2MCXJdpacg~~ 远程调试 URL 为:https://mp.weixin.qq.com/a/~~Rot_QPKUIn8~mzI5kQoA3w4QN0H6nkejvQ~~ 由此可见工作方式都为将本地小程序打包上传至微信侧,扫码访问远程小程序服务。不同点总结如下: 可以有多台真机同时预览,只能有一台真机远程调试。 预览忽略断点,远程调试会有断点。 预览可以忽略部分报错,远程调试有报错将无法运行。 生命周期 生命周期又分页面的生命周期与组件的生命周期,以页面的生命周期为例,不同的生命周期会对应不同的生命周期方法。 onLoad: 页面加载,一个页面只会调用一次。 onShow: 页面显示,每次打开页面都会调用一次。 onReady: 页面初次渲染完成,一个页面只会调用一次,代表页面已经准备妥当,可以和视图层进行交互。 onHide: 页面隐藏,当 navigateTo 或底部 tab 切换时调用。 onUnload: 页面卸载。 进行页面编码之前需要考虑到哪些数据是只需要加载一次的(放到 onload […]

【译】使用React和HTML5表单验证API处理表单元素

作者: Dmitry Sheiko | 译:甄玉磊 原文地址:[http://dsheiko.com/weblog/handling-forms-with-react-and-html5-form-validation-api] 【译者注:链接序号对应下面扩展阅读,另外可以点击阅读原文查看详细的链接文章】 简介:React 没有内置的表单验证逻辑,但是我们可以使用第三方解决方案。这种方法可能是开发包、表单生成器,还可能是 HOC 或者是包含校验逻辑的任意表单容器组件。那么选择哪种方法呢?我们将在本文中一 一介绍。 每当我们提及应用程序中的用户输入框时,首先映入脑海的就是 HTML 的表单元素。最早的 HTML 版本就已经支持 Web 表单。众所周知,这一特性于 1991 年提出,且在 1995 年作为 RFC(征求评议文件) 1866[1] 号协议标准化。与此同时表单元素也得到了广泛应用,几乎每一个代码库和框架中都在使用。那么在 React 中如何使用呢? Facebook 在如何处理表单上提供了受控的输入框[2]。该输入框指的是受控表单,主要是通过交互事件和通过 value 属性传递 state 值实现对输入框的控制。因此,你可以决定表单的校验和提交逻辑。拥有好的用户体验的 UI ,意味着你应该考虑到诸如“提交”、“校验”的逻辑以及内联的错误提示信息,根据有效性、原始状态和提交状态来切换元素。难道我们不能提取这种逻辑,简单的插入到表单元素中吗?当然可以,唯一要考虑的问题是我们要采用何种方法和解决方案。 组件库中的表单 如果你习惯使用诸如 ReactBootstrap[3] 或者 AntDesign[4] 等 React 组件库,很可能已经对其中的表单组件感到满意。这两个组件库所提供的表单组件满足了多种需求。例如在 AntDesign 组件库中我们定义了一个表单元素 Form 以及带有表单域的 FormItem ,即包裹了任意输入控制的容器。你可以在 FormItem 设置校验规则:

举例来说,在处理表单提交时,你可以执行 this.props.form.validateFields() […]

VSCode插件开发急速入门

导读:目前网络上可以随意查到各种VSCode插件的相关文章,但往往有一些特殊的功能需求找不到合适的插件。那么不如自己开发一个插件吧,打造一把称手的兵器! VSCode (全称:Vistual Studio Code) 由 Microsoft 出品,其具备启动快速、稳定性好、占用内存较小、插件越来越丰富、社区活跃等特点,目前是个人和团队中很多小伙伴的主力代码编辑器。 下面直奔主题,本文你将了解简单的 VSCode 的插件开发入门,感兴趣的同学可以继续阅读。 以下文中提到的“插件”均为 Vistual Studio Code 的插件,Vistual Studio Code 也简称 VSCode 环境准备 nodejs [1] 建议使用 LTS 版本,截止发文 v8.11.3 npm [2] 建议最新版本,截止发文 v6.1.0 yeoman [3] npm install -g yo generator-code [4]npm install -g generator-code 做好上面的环境准备,正式进入开发,下面我会以自己刚做好的一个查询北京地区空气质量为例子,继续介绍(安心してください,代码很少,很好入门)。 数据准备 下面补充一下我们的例子的功能,首先明确我们要获取城市的 AQI(空气质量)信息,网络上可以搜索到直接调用 API 或者 SDK,笔者目前使用的京东云的一个产品京东万象中的一个天气免费 API[10], 注册实名认证后可以获得一个调用应用的 KEY,便可以获取天气数据了。更多其他方面的 API 读者可以自行探索。 笔者使用的 […]

Webpack4 实战 React 和 Vue 项目

最近一直在参与小组内“造轮子”(具体内容另寻机会再详说)在开发的过程中,了解并且学习到 Webpack v4 的一些内容,趁记忆还深,汇总成文。 导读:本文你将 Get 到使用 Webpack 4 从零开始分别搭建 React 16 和 Vue 2 项目,同时还有基于 Webpack 4 的一些开发和生产环境配置经验,感兴趣同学可以继续阅读。 使用 Webpack 作为关键词在 Google 可以搜索到很多相关的文章,网上文章也是针对各自项目和某些情况的具体方案或者介绍说明,本文也不例外,并没有覆盖到所有项目,只是介绍分享造轮子过程中积累的 4.0 版本的个人实战经验。 PS. 前半部分较为基础,有一定经验的同学可以直接跳过阅读后半部分实战内容。 以前也翻译过两篇关于 Webpack 的文章,感兴趣的同学可以点击下面链接查看:!!! 强烈推荐 !!! 【译】Google 出品 – 利用 webpack 做 web 性能优化 【译】Webpack 4 mode and optimization Webpack 4 从“零”开始 相信提到 Webpack 无论是作为前端工程师,还是 Web 开发者都不会太陌生,它从诞生伊始就收到社区的追捧和大量的生产实践,大量的项目代码构建工具开始选择它作为主力构建工具,究竟它是什么样工具, 官网是这样描述的: […]

© 2018 JDC. All Rights Reserved.