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

微信团队分享：iOS版微信是如何防止特殊字符导致的炸群、APP崩溃的？

阅读更多关于微信团队分享：iOS版微信是如何防止特殊字符导致的炸群、APP崩溃的？

本文来自微信开发团队yanyang的技术分享。 1、引言相信大家都遇到过一段特殊文本可以让iOS设备所有app闪退的经历。前段时间大年初一，又出现某个印度语字符引起iOS11系统奔溃，所幸iOS版微信客户端做了保护并没有引起太大问题（字符处理这类技术问题，其实曾在Android版微信上导致过严重的用户体验危机，感兴趣的可以看看文章《微信团队披露：微信界面卡死超级bug“15。。。。”的来龙去脉》）。一般来说，特殊字符闪退是系统漏洞引起，只要更新系统就行。但大部分用户不愿意更新系统，而苹果也不一定第一时间解决问题。另外后台可以拦截恶意文本传递，但对于本地已下发的消息，后台没有办法让它删除。所以客户端还是要做些保护预防特殊字符闪退。学习交流： - 即时通讯开发交流群： 320837163 [推荐] - 移动端IM开发入门文章：《新手入门一篇就够：从零开发移动端IM 》（本文同步发布于： http://www.52im.net/thread-1449-1-1.html ） 2、微信的思路由于无法事先知道字符串里包含特殊字符，所以只能先让它排版/绘制，看看是否出现问题。做法是，在排版/绘制字符串前，先设置标记位，排版/绘制结束后，移除标记位。一旦发现标记位存在，就意味着这字符串可能有问题，下次就不显示这个字符串：这里有几个问题：有可能在排版/绘制过程中

PC与移动端高效开发解决方案

阅读更多关于 PC与移动端高效开发解决方案

疑问前端开发不可避免会遇到一个问题：PC与移动端开发是共用一套代码？还是两套独立开发？这个问题到目前都没有一个明确的结论，或者说它本来就不会有唯一的答案，毕竟所属需求不同。对于一些简单的系统：一套代码就能搞定，那何须花费两倍的时间来做双份。对于复杂性的或是UI展示差异较大的系统：若是一套代码的话，光是样式调整就足以耗费掉开发者所有的热情，那还不如分开做来得更方便。但是很多时候，对于这种情况，我们还是会不自觉的会提出疑问，难道就必须要花费双倍的时间吗？？？不能等于1，还不能小于2？？？方案这个方案分两方面来讨论说明：数据及UI。看看能不能对PC与移动各端前端开发进行复用与融合，从而进一步来释放人力。当然，如果大家之前已经做了足够的方案测试，并且已经确认不想融合的，那看到此就可以了。毕竟有句话已经说的很直白了：强扭的瓜不甜。奈何臣妾不死心呐！！！数据上的融合目的：一步式的同步各端数据。包含模块：后端数据 + 静态数据后端数据的统一对于接口的问题：不管是接口变更，还是多个接口的合并等，前后端真的已经相爱相杀了太久，但永远都无法完全避免。毕竟对于接口的变更有时候连前端人员都赞成更改；对于接口是否合并，各方也有充足的理由。但这并不意味着前端人员乐意重复更改，所以我们要提效->做统一->做中间件。静态数据的统一在这里静态数据

网页侧边栏导航设计优缺点

阅读更多关于网页侧边栏导航设计优缺点

厌倦了传统顶部导航的设计师，越来越偏爱侧边栏导航了。这种常见于页面左侧的侧边栏设计，已经成了许多独树一帜的设计师的选择了。侧边栏导航看起来不错，它简化布局的功能似乎也很强大，那么它真的有效么?用户是否会认可这种设计呢?今天，我们仔细分析一下侧边栏导航的优缺点和使用状况，尽可能精准地对这种设计手法进行界定和判断。无处不在的侧边栏导航侧边栏导航和菜单设计的演变有着密不可分的关系。响应式设计的流行使得向移动端偏移的网页设计，不得不采用菜单栏来替代传统的导航模式，其直接的影响就是催生了汉堡图标。随着汉堡图标的流行，弹出式的菜单也越发的常见。其中有些菜单是完全开放式的，而有的菜单则带着下拉框，还有一部分直接是弹出的菜单界面。而为了兼容大量的移动端界面，下拉和弹出式的菜单大多采用的是纵向布局——而这和侧边栏的设计，是如此的相似。换句话来说，这种垂直的导航就是一种弹出式的侧边栏导航。目前，这种左侧侧边栏导航的设计已经成为一种持续迭代中的设计趋势了。现在我们看到的侧边栏设计，常常使用单一的纯色打底，包含较少(但是重要或常用的)选项，导航栏顶端通常会包含有品牌或者网站LOGO，文字链接，以及带有小图标的社交媒体帐号的链接。想要这种侧边栏设计能够最大化的发挥作用，诀窍在于控制好侧边栏本身和右侧网站内容的对比度，它要包含足够清晰可见的导航条目，还要能在移动端上良好地运作。还有一点值得一提

移动端倒计时(坑) · JayLee

阅读更多关于移动端倒计时(坑) · JayLee

记今天遇到的bug,倒计时在移动端(微信页面)上运行的时候，当页面被打开，手机锁屏的时候，倒计时的Js代码会滞后甚至停止之前的代码: 123456789101112131415161718192021222324 <body><span></span>分<span></span>秒<script> function (val1,val2){ var min = document.getElementsByTagName("span")[0]; var sec = document.getElementsByTagName("span")[1]; var t = setInterval(function(){ val2--; if(val2<0){ val2==59; val1 --; }else if(val1==0&&val2==0){ clearInterval(t) } min.innerText = val1; sec.innerText = val2; },1000) } time(0,10);</script></body> 之后的代码： 1234567891011121314151617181920212223242526 <body><span></span>分<span></span>秒<script> function (val1,val2){ var min

移动端：div在手机页面上随意拖动

阅读更多关于移动端：div在手机页面上随意拖动

1 <!doctype html> 2 <html> 3 <head> 4 <title>弹窗</title> 5 <meta charset="utf-8"> 6 <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script> 7 <style> 8 body{margin:0;padding:0;} 9 .barrage{position:fixed;display:block;top:0;} 10 .barrage_name{width:70px;height:70px;background:-webkit-gradient(linear,0 0,100% 100%,from(#f00), to(#0f0));border-radius:50%;} 11 .barrage_name_hover{width:70px;height:70px;background:-webkit-gradient(linear,0 0,100% 100%,from(#ff0), to(#00f));border-radius:50%;} 12 .col1{color:#fff;display: block;padding: 17px;text-align: center;} 13

vue 插件大全

阅读更多关于 vue 插件大全

内容 UI组件开发框架实用库服务端辅助工具应用实例 Demo示例 UI组件 element ★13489 - 饿了么出品的Vue2的web UI工具套件 Vux ★8133 - 基于Vue和WeUI的组件库 iview ★6634 - 基于 Vuejs 的开源 UI 组件库 mint-ui ★6253 - Vue 2的移动UI元素 muse-ui ★3705 - 三端样式一致的响应式 UI 库 vue-material ★3328 - 通过Vue Material和Vue 2建立精美的app应用 vuetify ★2925 - 为移动而生的Vue JS 2组件框架 Keen-UI ★2749 - 轻量级的基本UI组件合集 vonic ★1913 - 快速构建移动端单页应用 vue-multiselect ★1539 - Vue.js选择框解决方案 eme ★1529 - 优雅的Markdown编辑器 vueAdmin ★1455 - 基于vuejs2和element的简单的管理员模板 bootstrap-vue ★1267 - 应用于Vuejs2的Twitter的Bootstrap 4组件 Vue.Draggable ★1191 - 实现拖放和视图模型数组同步 eagle.js ★1128 - hacker的幻灯片演示框架 vue-awesome-swiper ★1012

自适应布局的解决方案

阅读更多关于自适应布局的解决方案

曾几何时为了兼容IE低版本浏览器而头痛，以为到Mobile时代可以跟这些麻烦说拜拜。可没想到到了移动时代，为了处理各终端的适配而乱了手脚。对于混迹各社区的偶，时常发现大家拿手机淘宝的H5页面做讨论—— 手淘的H5页面是如何实现多终端的适配？那么趁此 Amfe阿里无线前端团队双11技术连载之际，用一个实战案例来告诉大家，手淘的H5页面是如何实现多终端适配的，希望这篇文章对大家在Mobile的世界中能过得更轻松。目标拿一个双11的Mobile页面来做案例，比如你实现一个类似下图的一个H5页面：目标很清晰，就是做一个这样的H5页面。 DEMO 请用手机扫下面的二维码痛点虽然H5的页面与PC的Web页面相比简单了不少，但让我们头痛的事情是要想尽办法让页面能适配众多不同的终端设备。看看下图你就会知道，这是多么痛苦的一件事情：点击这里查看更多终端设备的参数。再来看看手淘H5要适配的终端设备数据：看到这些数据，是否死的心都有了，或者说为此捏了一把汗出来。手淘团队适配协作模式早期移动端开发，对于终端设备适配问题只属于Android系列，只不过很多设计师常常忽略Android适配问题，只出一套iOS平台设计稿。但随着iPhone6，iPhone6+的出现，从此终端适配问题不再是Android系列了，也从这个时候让移动端适配全面进入到“杂屏”时代。上图来自于

移动端的东西

阅读更多关于移动端的东西

适配方法： 1.固定高度，宽度自适应。 2. 固定宽度， viewport 缩放。（需要根据屏幕宽度动态生成 viewport ） 3. 用 rem 做宽度和高度。（也是根据屏幕动态生成）。这样可以让页面在不同的移动端都呈现一样的效果。如何实现响应式布局一、@media 媒体查询 <meta name=”viewport” content=”width=device-width.initial-scale=1.0”> @media all and (min-width:640px) and (max-width:740px){} <link type=text/css href> 总结 : 在实现媒体查询的布局中优势就是我们只需写好一个页面一个尺寸的样式以后剩下的就是复制黏贴，但可能要划分多个区间，区间越多改的越多划分区间的时候我们一定要将区间划分的明细从上到下从小到大，区间一定是开区间为什么会被用起来？基于媒体查询实现一套页面，能够适配不同的终端二、弹性盒子三、百分比使用百分比布局的方式就是参考设计图，对设计图规定的任何元素进行百分比换算如果页面存在一些复杂计算会导致计算量巨大，并且全局计算单位不可控四、em 一般使用么、作为响应式的标尺来计算页面中的元素大小只要那个地方用了 font-size 。里面的子元素都会以这个 font-size

移动端开发新趋势Flutter

阅读更多关于移动端开发新趋势Flutter

移动端开发新趋势Flutter http://www.cocoachina.com/articles/28105 移动端开发新趋势Flutter 来源： CSDN 作者：鲸是鲸鱼的鲸链接： https://blog.csdn.net/weixin_44195250/article/details/103628427

移动端

阅读更多关于移动端

移动端移动端 Web 开发自动轮播效果 HTML 轮播使用的标签是 ul, ul 中的 li 默认是竖起来排列的, 通过 CSS 设置为左浮动将他们横向排列 JS 为了实现左右的循环轮播, 将第 1 张复制到最后, 将原来的最后复制到第 1 个之前, 这样总的轮播是从第 2 个开始的使用 zepto 库, 使用 setInterval 定时器每个一段时间使用 zepto 的 fx 动画库将 ul 平移(这是 left 属性, 需要先将 ul 的 position 设置为 relative), 最后的回调判断是否是最后一张或者是第一张, 重置索引实现循环轮播标识的设置将所有标签的 class 去掉, 在将当前的设置为激活 node 安装与配置安装 nvm (类似于 pyenv 管理多版本 node) nvm 命令 nvm install node : 安装最新版本的 nodejs nvm install stable : 安装最新稳定的 nodejs nvm ls : 列出当前安装的 nodejs 版本, 加星号为当前正在使用的nodejs版本 nvm use ... : 使用哪个 nodejs 版本安装 nrm (用于管理 npm 安装的默认源), npm install -g nrm nrm ls : 列出所有可用的源, 其中加了 * 表示当前正在使用的默认源

订阅移动互联网终端