专栏首页编程vuejs开发H5页面总结

vuejs开发H5页面总结

最近参与了APP内嵌H5页面的开发,这次使用vuejs替代了jQuery,仅仅把vuejs当做一个库来使用,效率提高之外代码可读性更强,在此分享一下自己的一些开发中总结的经验。

关于布局方案

当拿到设计师给的UI设计图,前端的首要任务就是布局和样式,相信这对于大部分前端工程师来说已经不是什么难题了。移动端的布局相对PC较为简单,关键在于对不同设备的适配。之前介绍了一篇关于移动端rem布局方案,这大致是网易H5的适配方案。不过实践中发现淘宝开源的可伸缩布局方案效果更好且更容易使用。

网易云的方案总结为:根据屏幕大小 / 750 = 所求字体 / 基准字体大小比值相等,动态调节html的font-size大小。

淘宝的方案总结为:根据设备设备像素比设置scale的值,保持视口device-width始终等于设备物理像素,接着根据屏幕大小动态计算根字体大小,具体是将屏幕划分为10等分,每份为a,1rem就等于10a。

通常我们会拿到750宽的设计稿,这是基于iPhone6的物理分辨率。有的设计师也许会偷懒,设计图上面没有任何的标注,如果我们边开发边量尺寸,无疑效率是比较低的。要么让设计师标注上,要么自食其力。如果设计师实在没有时间,推荐使用markman进行标注,免费版阉割了一些功能(比如无法保存本地)不过基本满足了我们的需求了。

标注完成后开始写我们的样式,使用了淘宝的lib-flexible库之后,我们的根字体基准值就为750/100*10 = 75px。此时我们从图中若某个标注为100px,那么css中就应该设置为100/75 = 1.333333rem。所以为了提高开发效率,可以使用px转化为rem的插件。如果你使用sublimeText,可以用 rem-unit

如果你用vscode编辑器,推荐 cssrem

使用rem单位注意以下几点:

在所有的单位中,font-size推荐使用px,然后结合媒体查询进行重要节点的控制,这样可以满足突出或者弱化某些字体的需求,而非整体调整。

众向的单位可以全部使用px,横向的使用rem,因为移动设备宽度有限,而高度可以无限向下滑动。但这也有特例,比如对于一些活动注册页面,需要在一屏幕内完全显示,没有下拉,这时候所有众向或者横向都应该使用rem作为单位。如图:

左图的表单高度单位由于下边空距较大,使用px在不同屏幕显示更加;而右边的活动注册页由于不能出现滚动条,所有的众向高度、margin、padding都应该使用rem。

3. border、box-shadow、border-radius等一些效果应该使用px作为单位。

基于接口返回数据的属性注入

可能大家不明白什么叫"基于接口返回数据的属性注入",在此之前,先说一下表单数据的绑定方式,一个重要的点是有几份表单就分开几个表单对象进行数据绑定

已上图公积金查询为例,由于不同城市会有不同的查询要素,可能登陆方式只有一种,也可能有几种。比如上图有三种登陆方式,在使用vue布局时,有两种方案。一是只建立一个表单用于数据绑定,点击按钮触发判断;而是有几种登陆方式建立几个表单,用一个字段标识当前显示的表单。由于使用第三方的接口,一开始也没有先进行接口返回数据结构的查看,采用了第一种错误的方式,错误一是每种登陆方式下面的登陆要素的数量也不同,错误二是数据绑定在同一个表单data下,当用户在用户名登陆方式输入用户名密码后,切换到客户号登陆方式,就会出现数据错乱的情况。

解决完布局问题后,我们需要根据设计图定义一些状态,比如当前登陆方式的切换、同意授权状态的切换、按钮是否可以点击的状态、是否处于请求中的状态。当然还有一些app穿过来的数据,这里就忽略了。

接着审查一下接口返回的数据,推荐使用chrome插件postman,比如呼和浩特的登陆要素如下:

可以看到呼和浩特有两种授权登陆方式,我们在data中定义了一个loginWays,初始为空数组,接着methods中定义一个请求接口的函数,里面就是基于返回数据的基础上为上面fields对象注入一个input字段用于绑定,这就是所谓的基于接口返回数据的属性注入。

即使返回的数据有我们不需要的数据也没有关系,这样保证我们不会遗失进行下一步登陆所需要的数据。

这样多个表单绑定数据问题解决了,那么怎么进行页面间数据传递?如果是app传过来,那么通常使用URL拼接的方式,使用window.location.search获得queryString后再进行截取;如果通过页面套入javaWeb中,那么直接使用"$"就能获取,注意要js中获取java字段需要加双引号。

关于前端跨域调试

在进行接口请求时,我们的页面通常是在sublime的本地服务器或者vscode本地服务器预览,所以请求接口会遇到跨域的问题。 在项目构建的时候通常我们源代码会放在src文件夹下,然后使用gulp进行代码的压缩、合并、图片的优化(根据需要)等等,我们会使用gulp。这里解决跨域的问题可以用gulp-connect结合http-proxy-middleware,此时我们在gulp-connect中的本地服务器进行预览调试。 gulpfile.js如下: 开发过程使用gulp server命令,监听文件改动并使用livereload刷新;使用gulp命令进行打包。

原文:http://www.huzerui.com/blog/2017/07/03/vuejs-develop-h5-experience/

本文来自企鹅号 - JavaScript媒体

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 浅析图像视频类AI芯片的灵活度

    兼容性和灵活度是芯片快速杀入新市场、扩大市场范围、快速适应客户需求,减少开发周期的关键特性。目前深度学习的网络结构已走向了多样化,出现了大量的算法变种、更多的算...

    企鹅号小编
  • 给 iOS 开发者的 python 学习日记十八

    使用 matplotlib 建立一个图表的概念是组装它提供的基础元件,像是图表类型、图例或者标签等元件。 Seaborn 套件是以 matplotlib 为基础...

    企鹅号小编
  • 微信小程序的“小游戏” 是什么?

    微信小程序能做游戏了~ ? 现在只要更新到6.6.1版本的微信,开场就会出现一个游戏。你也可以到发现-游戏里找其他所有的小游戏 ? 这应该是小程序有史以来最大的...

    企鹅号小编
  • 手写一个HTML密码登录页面

    AngelNH
  • 微信拍一拍效果的原理分析及代码实现

    微信拍一拍功能上线之后,其用户评价褒贬不一,这里我们不去凑热闹讨论这个功能的应用场景是否真的如部分网友说的毫无卵用,毕竟这是产品经理们应该考虑的事,但我相信作为...

    石璞东
  • css3 过渡和2d变换——回顾

    1.transition   语法:transition: property duration timing-function delay;       tr...

    用户1197315
  • 一个搜索条样式,包括select的美化

    一直以来用CSS控制select都没有实现过。还是只能用JS来模拟。 by youku <!DOCTYPE html PUBLIC "-//W3C//DTD X...

    练小习
  • vue操作dom元素的三种方法

    vue中的ref是把当前dom元素 “ 抽离出来 ” ,只要通过 this.$refs就可以获取到

    我不是费圆
  • CSS3实现圆形进度条

    介绍   闲来无事,去了CSS3Plus网站逛了逛,发现了一个很有意思的实现--css3实现进度条。粗略看了下代码,发现原理其实很简单,不难理解。 现在在此讲述...

    欲休

扫码关注云+社区

领取腾讯云代金券