移动互联网终端 | 易学教程

第06组 Alpha冲刺（1/6）

阅读更多关于第06组 Alpha冲刺（1/6）

队名: 拾光组组长博客链接作业博客链接团队项目情况燃尽图(组内共享) 宋奕过去两天完成了哪些任务主要完成了用户模块接口具体完成了用户注册登录,忘记、修改密码，修改、查看个人信息 GitHub签入记录接下来的计划完成上传照片模块、用户论坛模块、联系模块还剩下哪些任务上传照片接口设计、用户论坛接口设计、联系接口设计燃尽图组内共享遇到了哪些困难验证码如何用邮件发送有哪些收获和疑问学会了如何百度，学会了如何查看文档，学会了不发工资还提需求非开发人员是怎么个冲刺法？杨晋南过去两天完成了哪些任务完成了移动端Android用户模块基本UI界面完成移动端Android部分界面间逻辑代码完成用户模块接口的对接 github签入记录接下来的计划完成上传照片UI、用户论坛模块UI、联系模块UI的实现完成上传照片、用户论坛模块、联系模块接口的对接还剩下哪些任务上传照片、用户论坛、联系的UI设计与逻辑代码燃尽图组内共享遇到了哪些困难原生网络请求框架的封装有哪些收获和疑问学会了如何谷歌，学会了听组长吹牛逼为什么组长还不请客？刘晓翔过去两天完成了哪些任务完成了移动端iOS用户模块基本UI界面完成移动端iOS部分界面间逻辑代码完成用户模块接口的对接 github签入记录接下来的计划完成上传照片UI、用户论坛模块UI、联系模块UI的实现

第06组 Alpha冲刺（1/6）

阅读更多关于第06组 Alpha冲刺（1/6）

流式布局和viewport

阅读更多关于流式布局和viewport

流式布局百分比布局，非固定宽度，内容向两边填充，流动的布局。 viewport(视口) PC端的网页在手机端的浏览器显示是不会出现网页的，这是因为移动端的网页不是直接放在移动端的浏览器中，而是放在移动端的一个虚拟区域中，这个虚拟区域叫做viewport(视觉窗口,视口，视口的宽度一般默认比浏览器宽度大),然后视口进行相应的缩放，最后将视口放在浏览器中。适配方案因为viewport默认会进行缩放，所以网页在移动端显示的对用户不友好，所以我们需要进行一些配置来使网页在移动端显示得和pc端一样。网页宽度必须和浏览器宽度保持一致默认显示的缩放比例和pc端保持一致(缩放比例为1.0) 不允许用户缩放网页 <head> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"> </head> viewport主要有6个功能属性 width (特殊值: device-width,表示设备屏幕宽度) 设置宽度 height 设置高度 initial-scale(1:表示不进行缩放) 设置默认的初始化缩放比例 user-scalable 设置用户是否可以进行缩放 minmium-scale 设置最小缩放比例 maxmium-scale 设置最大缩放比例来源： https:/

移动端rem.js使用方法

阅读更多关于移动端rem.js使用方法

下面的代码一是我根据rem的使用经验，自己写的一个rem.js，发现很好用，能适用所有移动端h5页面的自适应需求：代码一:window.onload = function(){ /*720代表设计师给的设计稿的宽度，你的设计稿是多少，就写多少;100代表换算比例，这里写100是为了以后好算,比如，你测量的一个宽度是100px,就可以写为1rem,以及1px=0.01rem等等*/ getRem(720,100) }; window.onresize = function(){ getRem(720,100) }; function getRem(pwidth,prem){ var html = document.getElementsByTagName("html")[0]; var oWidth = document.body.clientWidth || document.documentElement.clientWidth; html.style.fontSize = oWidth/pwidth*prem + "px"; } 下面的代码二，是我在小米网上看到的移动端h5页面自适应代码，效果跟我的一样，也可以使用：代码二：小米官网的写法 !function(n){ var e=n.document, t=e.documentElement, i=720, d=i

实用的vue插件大汇总

阅读更多关于实用的vue插件大汇总

Vue是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件特别整理了常用的vue插件，来了个大汇总，方便查找使用，便于工作和学习。很全的vue插件汇总，赶紧收藏下吧！ github上的vue汇总 https://github.com/vuejs/awesome-vue#qr-code 一、UI组件及框架　　element - 饿了么出品的Vue2的web UI工具套件　　mint-ui - Vue 2的移动UI元素　　iview - 基于 Vuejs 的开源 UI 组件库　　vux-ui -Vue.js 移动端 UI 组件库　　Keen-UI - 轻量级的基本UI组件合集　　vue-material - 通过Vue Material和Vue 2建立精美的app应用　　muse-ui - 三端样式一致的响应式 UI 库　　vuetify - 为移动而生的Vue JS 2组件框架　　vonic - 快速构建移动端单页应用　　vue-blu - 帮助你轻松创建web应用　　vue-multiselect - Vue.js选择框解决方案　　VueCircleMenu - 漂亮的vue圆环菜单　　vue-chat - vuejs和vuex及webpack的聊天示例　　radon-ui -

一文详解微服务架构（一）

阅读更多关于一文详解微服务架构（一）

本文将介绍微服务架构和相关的组件，介绍他们是什么以及为什么要使用微服务架构和这些组件。本文侧重于简明地表达微服务架构的全局图景，因此不会涉及具体如何使用组件等细节。要理解微服务，首先要先理解不是微服务的那些。通常跟微服务相对的是单体应用，即将所有功能都打包成在一个独立单元的应用程序。从单体应用到微服务并不是一蹴而就的，这是一个逐渐演变的过程。本文将以一个网上超市应用为例来说明这一过程。最初的需求几年前，小明和小皮一起创业做网上超市。小明负责程序开发，小皮负责其他事宜。当时互联网还不发达，网上超市还是蓝海。只要功能实现了就能随便赚钱。所以他们的需求很简单，只需要一个网站挂在公网，用户能够在这个网站上浏览商品、购买商品；另外还需一个管理后台，可以管理商品、用户、以及订单数据。我们整理一下功能清单：网站用户注册、登录功能商品展示下单管理后台用户管理商品管理订单管理由于需求简单，小明左手右手一个慢动作，网站就做好了。管理后台出于安全考虑，不和网站做在一起，小明右手左手慢动作重播，管理网站也做好了。总体架构图如下：小明挥一挥手，找了家云服务部署上去，网站就上线了。上线后好评如潮，深受各类肥宅喜爱。小明小皮美滋滋地开始躺着收钱。随着业务发展…… 好景不长，没过几天，各类网上超市紧跟着拔地而起，对小明小皮造成了强烈的冲击。在竞争的压力下

clipboard.js基本使用

阅读更多关于 clipboard.js基本使用

转载自 clipboard.js基本使用引入插件基本使用其他说明高级使用移动端复制失败支持的浏览器 clipboard.js 是一个不需要flash，将文本复制到剪贴板的插件。简单介绍下基本运用。 1 引入插件 < pre > < script src = "js/clipboard.min.js" > </ script > </ pre > 2基本使用首先需要您需要通过传递DOM选择器，HTML元素或HTML元素列表来实例化它。 <pre> new Clipboard( '.btn' ); </pre> 1用一个元素当触发器来复制另一个元素的文本,data-clipboard-target属性后需要跟属性选择器 < pre > < input id = "foo" value = "https://github.com/zenorocha/clipboard.js.git" > < button class = "btn" data-clipboard-target = "#foo" > </ button > </ pre > 另外还有另外一个属性data-clipboard-action属性，以指定是要要么copy还是要cut操作。默认情况下是copy。cut操作只适用于或元素。 < pre > < textarea id = "bar" > Mussum

H5移动端ios/Android兼容性总结

阅读更多关于 H5移动端ios/Android兼容性总结

先说一下viewport 先上模板 <meta charset="utf-8">  <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">  <meta content="yes" name="apple-mobile-web-app-capable">  <meta content="black" name="apple-mobile-web-app-status-bar-style">  <meta content="telephone=no" name="format-detection">  <meta content="email=no" name="format-detection"> 写背景图时最好加上top left 或者0 0

SEO图片优化：该如何调整、改变图片的大小！

阅读更多关于 SEO图片优化：该如何调整、改变图片的大小！

SEO人员，每天需要做的事情，就是让SEO优化尽善尽美，较为专业的SEO人员，不会放过每一个优化的细节，比如：网站图片优化，当然，今天并不是与大家讨论SEO图片的诸多细节，而是就其中一项：修改图片大小与大家展开交流。调整图片大小，对于SEO有什么作用？可能很多SEO初学者，并不关心这个话题，但它在搜索展现的时候，却具有很大的作用，如果调整图片大小在合适的比例，并且保持图片具有一定的质量，那么，它就很有可能在搜索结果中展现，也就是说，你可以在搜索结果中看到相关图片。这无疑增加了用户点击率的机会，有利于提高百度排名。那么，你该如何修改图片大小？ ① 针对PC端，在搜索结果中的展现，百度推荐修改图片大小的尺寸比例为：121：75 ② 针对移动端，具体来讲，针对配置熊掌号的SEO人员，百度官方建议调整图片大小的尺寸比例为：3：2 讲到，这里大家有个疑问，这看似很矛盾的一件事，我们该怎么处理呢？为了提高移动端用户体验，百度建议控制每篇内容页面的图片数量，我建议保持在3张左右，我们知道百度强调熊掌号图片3：2的比例，主要是有利于在移动端的搜索结果中展现图片，这与pc端的尺寸有所冲突。为了解决这个问题，只能给出一个并不完美的解决方案：那就是在同一篇文章中，包含这2个尺寸比例的优质图片，百度会随机选择其中任意照片，用于不同渠道的展现。那么，调整图片大小的注意事项有哪些？ ①

解决clipboard.js在移动端复制失败的问题

阅读更多关于解决clipboard.js在移动端复制失败的问题

1.前沿　　在项目中使用clipboard.js插件去实现点击按钮，复制一段网址到剪切板的功能。功能做好后，一开始无论这pc端还是移动端都能正常使用。突然某一天测出了一个bug：移动端复制失败，pc端是ok的。简直一脸懵逼。。。　　遇到这个bug，我第一个思考到的是，这是个常用的插件，网上应该有现成的解决方法。网友分享的方法是：把绑定 data-clipboard-target属性的按钮标签从div换成button。亲测后，不起效果，可能不是一个原因导致的。通过摸索，找到了bug的原因和可解决方案。我相信，在移动端的项目中使用到clipboard插件，有很大的概率会踩到这个坑，　　下面就讲讲解决这个bug的历程。 2、透过表象思考　　思考：为什么随着项目的进行，复制功能会失效？我的猜想是：可能是全局禁用了一些默认事件，导致了clipboad.js内部实现复制功能与禁用的默认事件冲突，所以才复制失败。按这个猜想去排查的两个思路：　　　　1、去看clipboard的源码了，找到复制功能的具体实现原理，与哪些事件和默认事件有关联，再去寻找冲突点。　　　　2、业务代码中去排查，哪里做了全局事件的配置，这些配置一个个排查，找出影响了clipboad复制功能的配置。　　第一种思路相对牛皮，学习了clipboard原理也是极好的。第二种，是比较笨拙的方法，但是有时候是比较有效的

订阅移动互联网终端