移动互联网终端

PerfDog 是移动端iOS/Android性能测试、分析工具平台。手机无需ROOT/越狱。手机硬件、游戏及APP应用也无需做任何修改，极简化即插即用。 使用步骤 步骤1. Window PC/苹果Mac机器上安装、运行PerfDog客户端。 iOS： 若PerfDog检测不到连接手机或无法测试，请先安装确保最新iTunes是否能连上手机。 Android： 请开启手机Debug调试模式及允许USB安装。 步骤2 : 启动PerfDog，然后USB连接手机，自动检测添加手机到应用列表中。 iOS： 则即插即用，用户无需做任何操作。 Android： 有两种模式，非安装模式和安装模式。 a. 非安装模式： 手机即插即用，无需任何设置及安装，使用非常简单，但手机屏幕上没有实时性能数据显示。 b. 安装模式： 需要在手机上自动安装PerfDog.apk，手机屏幕上有实时性能数据显示。（请开启Debug调试模式、允许USB安装和PerfDog悬浮窗管理权限），启动PC版PerfDog.exe，则会在手机上自动PUSH安装PerfDog.apk，具体安装类似各个手机厂商安装第三方APP提示安装即可。 Android移动端可选择Wifi连接：首先电脑和Android移动端连接同一WiFi，然后电脑USB连接Android移动端，连接方式切换成WiFi图标

本文主要介绍移动端。为了避免移动端兼容出现各种奇奇怪怪的bug,所以秉承着能不用复杂的语法就不用，尽量用最基础的语法。 可用惯了各种ES6语法的童鞋们，写原生真是头疼，再加上各种领导催工期，肯定是内心各种烦躁。这里介绍一下，如何在H5中运vue 去写，嵌套到用到app中。 首先引入vue CDN ,记得去扒一个vue.js. 下载下来，不要用htpp,这样可以避免有些模块因为网卡导致，页面加载错乱。 <script src="./js/vue.min.js"></script> <div id="app"></div> new Vue({ el: "#app", data:function(){} }) 　　2.你肯定也想用个uI库，那本人推荐一个vant . 使用看官网。 有的需要vant.Toast 。 安卓6.0 以下常出现数据加载不出的问题。 看公司是否全兼容。 <script src="https://cdn.jsdelivr.net/npm/vant@2.2/lib/vant.min.js"></script> 3.　　获取后台数据ajax 就够用了。去下载一个本地的吧. <script src="./js/jquery-2.0.0.min.js"></script> 　　4. 移动端布局如果是少量的用百分比，display:flex ,这个要做兼容 。 rem

移动端页面适配———多方案解析 在移动互联网快速发展的今天，手机的种类和尺寸越来越多，作为前端的小伙伴们可能会越来越头疼，但又不得不去适配一款又一款的新机型。对于移动端适配，不同的公司、不同的团队有不同的解决方案。我在项目中也用了一部分解决方案，也看到了一些解决方案，对比下，总结一些自己的理解，希望对各位有帮助，找到最适合你们项目的适配方案。 下面是一些基础概念的讲解，帮助理解各种适配方案实现。 像素： 1、物理像素（设备像素） 屏幕的物理像素，又被称为设备像素，他是显示设备中一个最微小的物理部件。任何设备屏幕的物理像素出厂时就确定了，且固定不变的。 2、设备独立像素 设备独立像素也称为密度无关像素，可以认为是计算机坐标系统中的一个点，这个点代表一个可以由程序使用的虚拟像素(比如说CSS像素)，然后由相关系统转换为物理像素。 3、设备像素比 设备像素比简称为dpr，其定义了物理像素和设备独立像素的对应关系 设备像素比 ＝ 物理像素 / 设备独立像素 以iphone6为例： iphone6的设备宽和高为375pt * 667pt，可以理解为设备的独立像素，而其设备像素比为2.固有设备像素为750pt * 1334pt 通过：window.devicePixelRatio获得。 设备像素比是区别是否是高清屏的标准，dpr大于1时就为高清屏，一般情况下dpr为整数

本文转载于: 猿2048 网站➥ https://www.mk2048.com/blog/blog.php?id=ia21hjjkhj 前段时间写了一个移动端的自适应滑动Vue导航栏组件，觉得有一定实用性，大家可能会用得到（当然有些大佬自己写得更好的话就没必要啦），于是前两天整理了一下，目前已经发布到npm和GitHub上了， 点我到npm ， 点我到GitHub项目 ，有需要的同学可以在项目中 npm install ly-tab -S 或者 yarn add ly-tab 使用，具体用法下面会讲到。 好了，先看看效果吧 好的，开始废话了，实习差不多3个月了，这段时间跟着导师大佬也有接触过一些项目，也学到了不少东西，接触到的项目基本都是移动端项目，而且框架主要用的是Vue。做过移动端或者用过移动端APP（呸，屁话）的同学肯定会发现很多时候都会有类似上面这种有滑动效果的tab导航栏，相信大家肯定在掘金的首页就看到过。 实现思路 当时的项目中恰好也有这种需求，于是我想偷个懒直接使用 Mint-ui 组件库里现成的tabbar和tab-item组件，github上看了下它的实现源码发现只实现了切换功能但不能滑动，so，懒偷不了就只好自己写咯。 其实单单实现tab切换功能是不难的，看mint-ui使用的其实是v-model语法糖，就像下面这样 <ly-tab v-model=

所属班级 2019秋福大软件工程实践Z班 (福州大学) 作业要求 团队作业第四次—项目系统设计与数据库设计 团队名称 同行 团队项目的预期开发计划时间安排 日期 开发计划 10.31 小组讨论开发计划 11.1 实施开发、需求确认 11.2 （后台设计） UI设计、UE设计 11.3 （后台设计） 架构设计 11.4 后台数据库设计 11.5 后台接口设计 11.6 同行开发调研 11.7 （移动端设计）需求确认 11.8 （移动端设计）UI设计、UE设计 11.9 架构设计、接口确认 11.10 服务端开发 功能开发 11.11 接口开发与联调 11.12 功能测试 11.13 移动端功能开发接口开发 11.14 接口联调 11.15 功能测试 团队项目的预期开发计划分工安排 成员 分工安排 林立 前端设计、本次项目经理 蒲政林 测试、美工、UI设计 李奇 主要算法编写 袁嘉鸿 前端开发与设计 张雷 后端工程编写 李程 后端工程编写 体系结构设计+功能模块层次图、设计类图、ER分析+表结构设计、系统安全和权限设计 本系统的设计主要是基于MVC设计模式，M代表模型Model，V代表视图View，C代表控制器Controller。MVC设计模式将系统分为三层，层与层之间又通过一定的模式联系，使数据实体、业务逻辑与呈现视图分离，同时降低耦合性、提高重用性和可维护性。 Model（模型）

今天我们来聊聊自动化测试过程中常用的adb命令。 简介 首先介绍下什么是adb，adb全称叫“android debug bridge”，翻译过来就叫调试桥，通过命令行指令，可让你与移动端设备进行相互通信。adb 命令便于执行各种设备操作（例如安装和调试应用），并提供对 Unix shell（可用来在设备上运行各种命令）的访问权限。它是一种客户端-服务器程序，包括以下三个组件：1. 客户端 ：用于发送命令。客户端在开发计算机上运行。您可以通过发出 adb 命令从命令行终端调用客户端。2. 守护进程 (adbd) ：在设备上运行命令。守护进程在每个设备上作为后台进程运行。3. 服务器 ：管理客户端和守护进程之间的通信。服务器在开发计算机上作为后台进程运行。 执行 那么如何进入这个adb的命令行窗口呢？首先你需要安装Android SDK，不知道如何安装的请看我之前写的博客： 移动端自动化测试之软件安装 ，安装好SDK之后，adb程序就存储在sdk\platform-tools目录下，但进入adb命令行窗口并不是通过双击执行adb程序，而是直接在cmd命令行打adb指令就可以了。这里有个必要的前提就是你需要将adb的目录加入到环境变量中去，然后直接在命令行输入adb，点击回车。如果出现以下界面，那就证明你的adb程序可以正常执行啦 常用命令与解析 启动服务 命令格式：adb start

因为公司主要做前端数据可视化项目的，因此有些项目需要有大屏展示的效果，所以一般公司的项目，设计那边给出的设计稿都是 1920*1080 的。 数据可视化，肯定是离不开数据图表的展示，所以有些图表，我们在技术选型上就用了开源的 echarts。 如果只是单纯的做固定尺寸的大屏页面的话，做起来肯定是很简单的，直接照着设计稿的尺寸无脑的还原就行了。 但是实际情况下，用户的需求是复杂多变的，比如最近做的这个项目，主要是三维的模型展示+二维的图表展示。但是客户的需求是，必须要适配移动端和pc端不同尺寸的设备。这个需求咋一听很无脑，细想一下，确实很无脑。 但是客户的需求，我们肯定是要解决的对不对，于是就寻找解决的方案。 首先对于 3d 拓扑图展示区域，适配起来很简单，因为我们用的是浏览器中的 webgl 技术，我们的场景的就是绘制在那块 canvas 上面的，虽然根据尺寸不同的设备，我们的 canvas 大小势必要发生变化，但是没关系，我们监听一下窗口的 resize 事件，然后动态的获取 canvas 元素尺寸，而一般的 webgl 三维框架，都会对这种尺寸变化作出适配。 比如比较有名的 webgl 框架 three.js，就是采用下面这种方式，针对 canvas 尺寸变化的时候，作出适配： function resizeRendererToDisplaySize ( renderer )

老版常规做法 方案一：Meida Queries媒体查询 meida queries 主要是通过查询设备的宽度来执行不同的 css 代码，最终达到界面的配置。核心语法是： @media screen and (max-width: 600px) { /*当屏幕尺寸小于600px时，应用下面的CSS样式*/ /*你的css代码*/ } 需要添加meta设置 <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> width=device-width ：表示宽度是设备屏幕的宽度 initial-scale=1.0：表示初始的缩放比例 minimum-scale=1.0：表示最小的缩放比例 maximum-scale=1.0：表示最大的缩放比例 user-scalable=no：表示用户是否可以调整缩放比例 这个标签可以保证在移动端设备中，页面的宽度与屏幕宽度相同。 方案二：viewport缩放 以最小的Iphone4/5的宽度（320px）为基准，还原视觉稿。 < meta name= "viewport" content= "width=device-width, user

一、引入fastclick.js 1.使用scripot标签引入，可以从cdn引入，也可以将fastclick.js下载到本地放到项目中，然后再引入。 2.使用webpack等构建工具的项目，需要先安装fastclick包 $ npm i fastclick -S 然后在项目的入口文件中引入fastclick import FastClick from 'fastclick' 二、在项目中使用 经过第一步，我们已经在项目中引入了fastclick.js，然后我们来使用它 FastClick.attach(document.body) 这就解决了移动端浏览器点击延迟的问题。 为什么移动端浏览器会有点击延迟的问题？请自行百度。 解决点击延迟的问题还有没有其他方法？有，但是在这里我不告诉你。 文章来源: 使用fastclick解决移动端点击延迟

网站对于每个企业而言是展现品牌的重要渠道。 当你在为你的用户设计网站的时候，一定要控制好网站的内容量。用户并没有必要在塞满屏幕的大量信息当中，费劲巴拉地去找自己想要的那一条。极简主义风格的流行并不是没有道理的。 有针对性地呈现内容，为品牌进行合理的适配，提供清晰且扣人心弦的视觉设计，这样的网站是令人印象深刻的。 极简的设计并不意味着你无法和用户进行更多的沟通，也许你觉得当前的设计还不足以满足你的品牌和用户进行沟通的需求，好在还有许多方法和技巧帮你做到这一点。 弹出框就是为此而出现的。在几年前，这种设计被作为一种不影响当前网站内容的信息呈现方式而广泛应用，随后又因为大量的、无节制且毫无美感的滥用，被设计师和用户广泛吐槽。Google 认为弹出框对于用户体验造成了明显的干扰，同时，需要借助弹出框提升信息交互的设计师和开发者因此也困扰不已。 那么，这是不是意味着弹出框已经被淘汰了？并非如此。进入的文章我们将会详细为你分析弹出框在如今UI/UX设计当中的真实情况，并且提供一些可供参考的最佳实践。 弹出框的设计现状 首先我们应该聊聊弹出框的类型，正确用法。 弹出框的类型 弹出框遵循着一系列模式而存在。它会在打开网页的时候弹出，滑入网页，或者干脆就在网页加载的时候就直接加载进去了。虽然有的网页会将它置于页面的正中间，不过也有许多设计师将它置于页面的底部或者角落。