分类‘编程代码’

基于Vue.js的SSR方案之Nuxt.js

前端技术真是分分合合、合合分分,从前些年HTML、CSS、JavaScript混写到模块化的CommonJS、AMD、CMD,模块多了影响加载,又有了grunt、gulp、webpack等打包工具,最后发展到现在类似Vue的单文件组件,表面来看,似乎更爽了,但这样的模块化还是要靠写的人来把控了,稍有不慎,团队还真有人把.vue玩成当年的.html。

今天要说的是最近了解的一款基于Vue.js的SSR框架——Nuxt.js,用过react.js的童鞋可能都或多或少接触过Next.js,没错,这玩意和它是做同一件事的,正如前面所说,分分合合、合合分分,前后端分离好不容易在国内实施得火热起来,可百度并不怎么认你的单页App,且盲目使用之余,很多App文件过于庞大,以至于按需加载后首页渲染性能还是不理想,面对这样的问题,有SEO需求、对首屏渲染有提升要求的技术小伙伴们又在前端的小圈子里划分出了服务端,也因此有了传统型的express、koa、adonisJS等,但这并不能阻止我们前进的脚步,回到现实,当前火热的react.js、angularjs、vue.js都有了服务器端渲染方案,于是因为工作用vue.js的缘故,接触了Nuxt.js。 查看更多...

Android系统Web字体/行高异常解决

相信做前端开发的朋友很多时候会遇到这样的问题,设置行高来达到文本垂直居中的目的,但移动端会遇到略偏上或者偏下,通常情况下轻微的偏移可能出现于设备像素密度、容器高度、字体大小等原因,比如30px容器内放15px文字,就做不到完全居中,这个不在今天问题范围,不再赘述。

今天的问题其实算是旧事重提,遇到这个问题,最初是在2015年了,当时团队其他同事做混合app有类似问题,同事最终似乎是采用padding的形式取代了行高,但实际上这个还会引起一些问题,主要是Android系统设置字体后,WebView内字体大小深圳和字体相关的属性都受到影响。

在去年4月份曾写过一篇文章《QQ内置浏览器下网页行高、字体大小显示异常解决》,但是当时只注意到Android系统下手机QQ内嵌的浏览器,直至后期做自己的Android App使用WebView内嵌网页,也发现了同样的问题,经过翻阅网上资料案例,发现近期挺多类似文章和提问,主要原因是Android系统多使用sp作为单位,会根据用户设置缩放字体。

常规的解决方法主要有以下两种 查看更多...

异步输出网页列表查看详情后返回定位

最近有个需求,移动端网站,列表上拉加载,点击详情后返回,每次都固定返回到顶部,感觉这样不够人性化,希望固定到进列表前的页面,于是简单实现了一下。

这里有两个问题

1、数据都是异步的

2、只有返回的时候定位(刷新正常回顶部)

简单的实现思路及主要代码

为了方便二次加载,异步数据每次缓存到本地,同时拦截页面所有链接,在即将跳转的时候记录当前页面或者滚动元素的scrollTop值,下次进页面判断是否返回进来的,如果是直接进来或者刷新,则重新请求,如果为返回,则直接使用已缓存数据迅速加载后使用已缓存的scrollTop值定位到进详情页之前的位置,同时清除值,即scrollTop值的缓存仅一次有效。 查看更多...

Android优化之SparseArray替代HashMap

Java开发过程中,一般免不了使用HashMap来存储键值对以方便各种需求的实现,但是对于Android这种对内存非常敏感的移动平台,很多时候使用一些Java的API并不能达到更好的性能,相反反而更消耗内存,所以针对Android这种移动平台,也推出了更符合自己的API,比如SparseArray、ArrayMap用来代替HashMap在有些情况下能带来更好的性能提升。

对于SparseArray,比HashMap更省内存,在某些条件下性能更好,主要是因为它避免了对key的自动装箱(int转为Integer类型等),它内部则是通过两个数组来进行数据存储的,一个存储key,另外一个存储value,为了优化性能,它内部对数据还采取了压缩的方式来表示稀疏数组的数据,同时,还实现了SparseIntArray、SparseLongArray、SparseBooleanArray。 查看更多...

Android WebView内嵌网页input无法选择文件解决

最近发现公司APP内嵌的网页点击上传图片没任何效果,查资料得知是Android安全限制,WebView内网页默认没有读取本地文件的权限。虽然网上有解决方案,但是由于Android版本几经波折,API签名大相径庭,想要完全兼容,要实现多个方法,为方便以后使用,简单记录一下。

首先,在使用WebView的页面,增加如下全局变量,方便回调使用:
查看更多...

Android软键盘遮挡输入框问题解决

移动APP、网站有界面底部存在输入框的情况,无论是原生还是WebView内嵌,在软键盘弹出时,经常会有遮挡输入框的问题,解决方法就是让软键盘弹出时窗口自适应,而非软键盘直接悬浮,网上看到有三种解决方案:

1、在你的activity中的oncreate中setContentView之前加上如下代码

getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_ADJUST_RESIZE | WindowManager.LayoutParams.SOFT_INPUT_STATE_HIDDEN);

2、在项目的AndroidManifest.xml文件中界面对应的Activity里加入android:windowSoftInputMode="stateVisible|adjustResize",这样会让屏幕整体上移。如果加上的是android:windowSoftInputMode="adjustPan"这样键盘就会覆盖屏幕。 查看更多...

Android Webview增加自定义userAgent、headers

最近维护公司app,要内嵌在线网站进来,因为在线移动网站是类似常见商城的形式,底部有几个导航按钮,而app内嵌的情况想从网页层面控制页面的返回,同时再针对app内嵌情况下的界面做一些控制。

可能前面说得比较晦涩难懂,下面举个例子,比如,页面有12345五个底部导航,默认进首页(1),当点击2345的时候,在android下点击原生返回键还会回到首页(1),这样的效果体验不是很好,所以页面全局拦截a链接,通过js采用location.replace来做跳转,这样一来,只要内部页面没有直接跳回12345五个页面的操作,整体跳转体验应该和app类似了。

另一个问题,要做微信分享,但是众所周知,网页目前是不可能直接分享到微信(除了二维码形式),所以这里在定义了特定协议,网页请求如share://share?title=朴人博客&content=朴人博客…,原生app内接收后解析处理,在webview上弹出分享界面。 查看更多...

Android Studio …aapt.exe” finished with non-zero…解决

升级Android Studio为2.2.2之后,旧项目编译出错,Android编译时出现如下错误

Error:Execution failed for task ':app:processAndroid360XmDebugResources'.
> com.android.ide.common.process.ProcessException: org.gradle.process.internal.ExecException: Process 'command 'D:\Develop\Android\sdk\build-tools\21.0.0\aapt.exe'' finished with non-zero exit value -1073741819

搜索良久,很多做法都试了不好使,偶然间发现有人说可能使用JDK8的缘故,果断切JDK7尝试,尝试结果是根本切不回去,Android Studio 2.2.2提示使用JDK 8或者更新的版本。 查看更多...

sudo * 提示 command not found 解决

linux下经常遇到使用非root用户安装软件,使用sudo时提示找不到命令。

比如使用nodejs时候,出现

sudo: node: command not found
sudo: npm: command not found

很多文章说export临时修改环境变量或者直接sudo后chown指定命令所在文件夹的所有者,但是我们通常是在非root用户下使用,所以只需在root用户下增加部分软连接即可 查看更多...

iScroll5实现卡片左右滑动及动态加载

iScroll5是在iScroll4的基础重构而来,使用时发现网上大部分例子都是基于iScroll4,在iScroll5上面并不适用,比如横向滚动、当前索引、元素对齐等,这些不在赘述,有需求可以考虑去看看源码(重构过的源码看起来清爽很多)。

因为自己需要一个卡片左右滑动的效果,同时还希望有边界对齐的能力,不清楚这个效果有没有类似实现,大概看了下,新版iScroll也不是很大,就直接拿来用了,效果如下图所示:

iscroll5-1
查看更多...