前言
为时一个月的OX项目一期功能已经全部跑通。这是第一个由技术选择到数据逻辑交互、页面跳转全部由自己带领下完成的项目,不知道算不算老师说的,完整的经历一个项目。虽然心里感觉小有成就。但是软件中存在的问题不得不让我反省。我还是太年轻!
背景
公司平台尚处于开发阶段,且第一期产品由于人员技术的参差,开发的进度缓慢且效果不理想。为了维持员工的福利,所以老板准备接外包项目。我所做的OX项目就属于其中之一。
项目初始,甲方技术比较认同HTML5、CSS、JS的方案来编写此App项目。同时,我自己在去年也曾接触过Dcloud的H5 plus开发方案,遂在项目洽谈过程中,甲方与我方确定了由java作为后端语言,前端采用Dcloud解决方案来实现此App的开发。
技术选型
页内逻辑与数据维护: VueJS
页面UI布局: Mui、rem
页间跳转、本地数据缓存: HTML5 Plus、HTML5 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开发中遇到的坑,以及填坑的方法,并且以公开的形式,以期待有大神来评价我的变成思维方式,以及技术选型中的不足;此文将会为系列文章。会在闲暇时间逐步完成。