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

js+css实现移动端抽屉式导航

阅读更多关于 js+css实现移动端抽屉式导航

前言移动端导航多种多样，抽屉式导航就是常见之一，下面我们通过javascript和css相结合来实现移动端的抽屉式导航。先看看实现的效果： index.html <!DOCTYPE html> < html lang = " zh-CN " > < head > < meta charset = " UTF-8 " > < meta http-equiv = " X-UA-Compatible " content = " IE=edge " > < meta name = " viewport " content = " width=device-width, initial-scale=1.0 " > < title > 抽屉式demo </ title > < link rel = " stylesheet " href = " ./css/index.css " > </ head > < body > < div id = " root " > < div class = " box " > < div class = " btn-box " > < button id = " btn " class = " btn " > < span > </ span > < span > </ span > < span > </ span > </ button > </

现在Web前端的发展趋势和行业前景，还能转行学习前端开发吗？

阅读更多关于现在Web前端的发展趋势和行业前景，还能转行学习前端开发吗？

2020还能转行学web前端开发吗？这是很多人在网络上搜索的问题。及其原因，还是因为目前网络上充斥着前端饱和的说法，这让不少人怀疑还能不能转行web前端，目前程序员行业前景很好，而web前端的前景也不差。不否认初级前端程序员供给泛滥，待遇恶化，发展遇冷。但是当你坚持到中高级web前端工程师时，就会越来越吃香了。这是因为前端技术栈的不断更新，效率提高，同样的前端人数，能完成比以前更多的职责范围。在不少企业，1个优秀的前端工程师就能搞定Web和移动端的开发，甚至负责一部分后端。因此只要你能忍受住寂寞，努力磨砺你的技术，那么在步入中高端web前端开发工程师后，就业薪资肯定是可以达到你的预期的。接下来，小编来跟大家分享一下2020年Web前端的发展趋势如何?熟悉web的小伙伴们都了解，自2018年是前端技术的发展相对稳定的一年，就前端主流技术框架的发展而言，前几年里发展极快，在填补原有技术框架空白和不足的同时也渐渐趋于成熟。未来前端在已经趋向成熟的技术方向上面将会慢慢稳定下来，并进入迭代优化阶段，例如语言标准、前端框架等。那么2020年Web前端的发展趋势如何?让我们一起来看一看吧~ 1.新规范的更新与稳定前端新标准和草案在不断更新，HTML、CSS、Javascript标准也在渐渐完善，尽管这些新的规范最终会淘汰旧的规范，新的项目也会以最新的标准作为开发依据，但要完全废弃旧规范

Native、Web App、Hybrid、ReactNative和WEEX的优劣

阅读更多关于 Native、Web App、Hybrid、ReactNative和WEEX的优劣

一句话概要 Native、Web App、Hybrid、ReactNative（后面以RN简称）、WEEX间的异同点 APP常用开发模式【简介】此处APP为应用，application，并非我们通常讲的手机App 常用的几种APP开发模式-脑图 Native App 传统的原生APP开发模式，有IOS和AOS两大系统，需要各自语言开发各自APP。优点：性能和体验都是最好的缺点：开发和发布成本高举个栗子：网易管家APP （Tab1，Tab2）应用技术：Swift，OC，JAVA WebApp 移动端的网站，常被称为H5应用，说白了就是特定运行在移动端浏览器上的网站应用。一般泛指 SPA(Single Page Application)模式开发出的网站，与MPA（Multi-page Application，再后面做介绍）对应。优点：开发和发布成本最低缺点：性能和体验不能讲是最差的，但也受到浏览器处理能力的限制，多次下载同样会占用用户一定的流量举个栗子：网易管家APP （Tab3）应用技术：ReactJS，RegularJS等 Hybrid App 混合模式移动应用，介于web-app、native-app这两者之间的app，兼具“Native App良好交互体验的优势”和“Web App跨平台开发的优势”（百度百科解释）主要的原理是

从 PostCSS 插件，体验编码到发布全过程

阅读更多关于从 PostCSS 插件，体验编码到发布全过程

因项目的需求，自己动手写了一个 PostCSS 插件 postcss-px2vw ，主要用于将 px 转成 vw 和 rem ， rem 作为回退模式。也刚好借此机会总结一下 npm 包的发布流程，文章还会介绍到七牛云图片的使用与上传相关的技巧，以及期间遇到的一些问题。为什么需要它转换 px 单位的插件有很多，知名的有 postcss-px-to-viewport 和 postcss-pxtorem ，前者是将 px 转成 vw ，后者是将 px 转成 rem 。起初是看了大漠的一篇文章《如何在Vue项目中使用vw实现移动端适配》，于是怀着激动的心情，就在项目中也使用 vw 来做移动端的适配。该文章大力推行用 vw 代替 rem 做适配，在 amfe-flexible 项目文档中也推荐 vw 的替代方案。但是考虑到移动端对 vw 的支持情况不如 rem ，所以仍有很多项目都选择使用 rem 来布局。于是就想到将 rem 作为一种回退机制，或许觉得没必要，直接放弃 vw 使用 rem 不就完了？确实，不过既然是折腾，也就不需要那么多理由了，其实饿了么平台就用了此方案。关于移动端适配方案，也有一些个人的亲身体会，有时间另启一篇文章详细总结一下。实现方案首先，得提一下 CSS 样式的回退原理：当 CSS 遇到无法识别的一些样式时，不会报错，而是忽略它

解决微信授权回调页面域名只能设置一个的问题 [php]

阅读更多关于解决微信授权回调页面域名只能设置一个的问题 [php]

最终的解决方案是： https://github.com/liuyunzhuge/php_weixin_proxy ，详细的介绍请往下阅读。在做项目集成微信登录以及微信支付的时候，都需要进行用户授权。这个授权的流程可以简单描述为： 1. 用户从我们的应用触发需要授权的操作，比如点击微信登录； 2. 应用收到这种用户请求后，将用户重定向到微信提供的一个授权页面：或 3. 用户通过微信扫码（PC端授权，上边左图）或者点击确认按钮（移动端授权，上边右图）告知微信，授权应用访问自己的微信账号信息； 4. 微信收到用户的授权许可后，生成授权码，并把它作为参数回调至应用的某个页面； 5. 应用的回调页面在接收到微信的回调请求后，拿到其中的授权码，并通过微信官方提供的access token api接口获取access token； 6. 最后通过access token以及微信官方提供的另一个userinfo api接口就能获取到用户的微信账号信息。为了实现这个过程，首先要为应用申请一个微信公众号，并将应用最终部署的域名设置到微信公众号设置里面的授权回调页面域名这个选项里面。微信官方对这个选项的说明如下：关于网页授权回调域名的说明 1、在微信公众号请求用户网页授权之前，开发者需要先到公众平台官网中的“开发 - 接口权限 - 网页服务 - 网页帐号 - 网页授权获取用户基本信息

移动端软键盘弹出时影响布局

阅读更多关于移动端软键盘弹出时影响布局

移动端软键盘弹出时会影响布局 1）前段时间作的移动端页面，因为高度只有1页所以用了height:100%;width:100%; ios下点击输入框弹出软键盘时，布局没有大影响。当输入框可能被软键盘压到时，在一部分安卓下却出了问题，华为自带浏览器和UC会有布局上的问题。原因可能是因为，软键盘弹出时，改变了height，使height:100%,不能达到原来的高度。解决办法： $(document).ready(function () { 　　$('body').height($('body')[0].clientHeight); }); 页面加载完后，js给body一个定高。 2）以前还遇到过，移动端点击输入框时，页面向左偏移了一部分，但太久了，忘了什么浏览器了，重现不了，解决的方法是使输入框的大小居中. PS:吐槽下华为自带浏览器和UC不识别css3的新单位，vw,vh. 来源： https://www.cnblogs.com/shuchong/p/5783226.html

移动端1px解决方法

阅读更多关于移动端1px解决方法

文章目录方法一. ::after或者::before + transform 方法二.viewport和rem结合方法三.小数值方法四.css3中box-shadow 方法一. ::after或者::before + transform 在移动端web开发中，设计稿中设置边框为1像素，前端在开发过程中如果出现border:1px，测试会发现在某些机型上，1px会比较粗，即是较经典的移动端1px像素问题。我们通常在css中设置的width：1px，对应的便是物理像素中的2px。 div { position : relative ; height : 100 px ; width : 100 px ; background - color : pink ; /* border: 1px solid red; */ } div : : after { content : '' ; position : absolute ; top : 0 ; left : 0 ; border : 1 px solid red ; - webkit - box - sizing : border - box ; box - sizing : border - box ; width : 200 % ; height : 200 % ; transform : scale ( 0.5 ) ;

移动端访问服务器接口，对token是否需要设置问题的见解

阅读更多关于移动端访问服务器接口，对token是否需要设置问题的见解

一般移动端访问服务器接口，服务器都会设置一个token，对token进行鉴权，鉴权通过就可以继续访问，否则就不通过。直入主题：我的实践是不需要特意设置token，通过在请求时添加一个请求头实现。如此有3点好处。一是不用设置token；二是移动端访问服务器接口的生命周期与session的生命周期保存一致，不用担心访问接口是session突然失效，当然你过了session周期，再次访问接口session依旧会失效，只需要替换一个新的session就可以解决问题。这就跟你访问一个网站系统，你登录后一段时间不做任何操作，然后在操作会让你重新退出登陆一样；三是移动端访问服务器接口不会生成新的session会话，一定程度上可以减轻服务器的压力。接口是自己随便写的，做测试够用了。直接上代码： 1.首先在浏览器输入自己接口的链接，效果如下：访问接口后的session为7D08B4DA4CBA4ACC88D41944FBB0C8B7，以服务器session为准。这里用OkHttpClient来请求该接口，接口代码如下图所示：通过GET方式请求接口，请求需要加上cookie这个请求头，见第一张图红框中内容。运行后效果如下图所示：上图没有产生新的session值，说明请求添加cookie请求头生效了。客户端效果如下：此图时间与上图时间一致。注释客户端添加请求头的代码，效果如下图：

React 还是 Vue: 你应该选择哪一个Web前端框架？

阅读更多关于 React 还是 Vue: 你应该选择哪一个Web前端框架？

学还是要学的，用的多了，也就有更多的认识了，开发中遇到选择的时候也就简单起来了。本文作者也做了总结：如果你喜欢用（或希望能够用）模板搭建应用，请使用Vue 如果你喜欢简单和“能用就行”的东西，请使用Vue 如果你的应用需要尽可能的小和快，请使用Vue 如果你计划构建一个大型应用程序，请使用React 如果你想要一个同时适用于Web端和原生App的框架，请选择React 如果你想要最大的生态圈，请使用React 如果你已经对其中一个用得满意了，就没有必要换了 2016年，React在Web端和移动端都实现了迅速的成长，稳稳地领先于其主要竞争对手Augular，巩固了其作为前端框架之王的地位。但是Vue在这一年里的表现也可谓同样的耀眼。Vue.js 2.0 的发布在整个 JavaScript 社区都引起了巨大反响，这一点仅从它在Github中涨了25,000颗star，就足以得到证明。不得不说React和Vue的使用范围是相似的：都是基于组件化的轻量级框架，都专注于构建用户界面的视图层；都既可以用于简单的项目，也适用于使用前沿技术的大规模复杂项目。因此，很多Web开发者都难免纠结到底要从中选择哪一个框架。这两者中能否分出个高下好坏？或者它们各自有哪些优缺点是需要我们注意的？还是说它们实际上差不多，用谁都一样？两种框架，两个拥护者在这篇文章中我想用尽可能公平

哪里不知道“瞄”哪里，这项AI黑科技，打开手机就能体验

阅读更多关于哪里不知道“瞄”哪里，这项AI黑科技，打开手机就能体验

乾明发自凹非寺量子位出品 | 公众号 QbitAI 哪里不懂，直接拿着手机对准哪里就行了。比如柜子里的化妆品，到底哪个是哪个？对着扫一下就行了：这是百度App中的黑科技，也是百度秀出的AI技术新高度。在一年一度的百度AI开发者大会上，百度高级副总裁、移动生态事业群组总经理沈抖拿着手机，打开百度App做了这样一个演示。无需任何其他操作，只需要移动手机，就能实时呈现手机镜头中多个化妆品信息。随着手机移动，镜头中的画面发生变化，百度App中呈现出来的内容也会实时发生变化。演示结束之后，沈抖介绍称，这一功能名为动态多目标识别，它能够在100ms以内识别物体，8ms内做出物体位置追踪更新，已经超过了人类。围绕着这项技术，百度也有相应移动生态作为支持。百度App这一功能，不仅能够实时动态识别多个目标，还可以快捷找同款、比价格、看评价。喜欢的话，也能直接下单。在识别的范围上，沈抖也给出了一个数字： 400亿的训练数据，能识别超过1000万种物品，能够支持超过30+识别场景。只需打开百度App，点击搜索框右侧的相机按钮，选择“自动拍”即可体验。比如，能够扫人脸测面相运势：也能扫红酒查酒庄年份：还能扫题目搜答案看解析、翻译文字识别文字、扫菜品/食材看热量知功效做法、明星看八卦追行程、扫汽车了解型号价格等等。此外，也具备文字/图书/海报/药品/货币

订阅移动互联网终端