前端技术 App开发记

前言

为时一个月的OX项目一期功能已经全部跑通。这是第一个由技术选择到数据逻辑交互、页面跳转全部由自己带领下完成的项目,不知道算不算老师说的,完整的经历一个项目。虽然心里感觉小有成就。但是软件中存在的问题不得不让我反省。我还是太年轻!


背景

公司平台尚处于开发阶段,且第一期产品由于人员技术的参差,开发的进度缓慢且效果不理想。为了维持员工的福利,所以老板准备接外包项目。我所做的OX项目就属于其中之一。
项目初始,甲方技术比较认同HTML5、CSS、JS的方案来编写此App项目。同时,我自己在去年也曾接触过Dcloud的H5 plus开发方案,遂在项目洽谈过程中,甲方与我方确定了由java作为后端语言,前端采用Dcloud解决方案来实现此App的开发。


技术选型

页内逻辑与数据维护: VueJS
页面UI布局: Mui、rem
页间跳转、本地数据缓存: HTML5 PlusHTML5 Storage

VueJS:

VueJS(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的库。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

VueJS 自身不是一个全能框架——它只聚焦于视图层。因此它非常容易学习,非常容易与其它库或已有项目整合。另一方面,在与相关工具和支持库一起使用时,Vue.js 也能完美地驱动复杂的单页应用。

Vuejs 官方中文文档
Vuejs router 官方文档

Mui:

为开发html、css、js开发app提供的仿原生轻量级原生UI框架,标榜为追求性能体验和轻量级的国产UI框架
官方API文档

rem:

相对于根元素(html)的font-size大小来确定确定元素尺寸的css3新单位,
介于移动端屏幕大小、分辨率、屏幕像素密度的不同,遂引入如下两个工具:
1、flexible.js 由淘宝手淘团队维护,根据屏幕分辨率,屏幕像素密度来动态确定根节点字体大小,使得用rem单位布局的移动端网页在不同屏幕上,表现出相同的布局。

2、compass 是一个款开源的,css预编译语言框架,基于sass扩展,其与sass的关系类似于JQuery与javascript;

详情请跳转:
移动端适配——REM等比缩放学习总结

参考资料:
阮一峰 sass用法指南
阮一峰 compass用法指南

HTML5 Plus:

中国html5产业联盟的产品,在其sdk环境下提供一些接口供js调用,使得js能够有调用系统功能的能力 API文档

HTML5 Web Storage:

在此处使用html5 localStorage,而非使用HTML5 Plus 的Storage
由HTML5提供的良好总在客户端存储数据的西方法:

localStorage —— 没有时间限制的数据存储方式;  
sessionStorage —— 针对一个 会话 的数据存储方式;

HTML5 web Storage 相对于传统的cookies:

  • 存储容量更大
  • 以JSON字符串的方式存储,通过JSON对象可以很方便的将其存储内容转换成JavaScript对象,以便于在JavaScript中使用

目的

写下这篇博客主要为记录,此次App开发中遇到的坑,以及填坑的方法,并且以公开的形式,以期待有大神来评价我的变成思维方式,以及技术选型中的不足;此文将会为系列文章。会在闲暇时间逐步完成。

系列文章导航

1、多页面App开发跨页通讯
2、页面布局方案
3、开发中总结的js代码块
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,951评论 6 497
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,606评论 3 389
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 160,601评论 0 350
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,478评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,565评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,587评论 1 293
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,590评论 3 414
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,337评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,785评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,096评论 2 330
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,273评论 1 344
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,935评论 5 339
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,578评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,199评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,440评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,163评论 2 366
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,133评论 2 352

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 172,008评论 25 707
  • 宇宙最全的架构开发技术百科全书本文是笔者多年来积累和收集的知识技能图谱,有的是笔者原创总结的最佳实践,有的是小伙伴...
    燕京博士阅读 2,798评论 3 22
  • 徐行 20161022 盼望已久的写作训练营四期今日开班了,之前纠结于参加每天一篇的大群还是三天一篇的小群,内心一...
    徐行我看行阅读 157评论 0 0
  • 流行和爆款,是每个产品都渴望达到的效果。一款产品如果能实现大范围的传播,并引发讨论热潮,最终形成了一种类似于品牌般...
    公子在野阅读 556评论 0 7
  • 深夜 月亮喝多了酒 想和我对影成三人 我欣然同意 于是 两个人烂醉如泥 我说 兄弟,你长的可真像我故乡的一个朋友 ...
    流萤点灯阅读 210评论 0 3