前言

为时一个月的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开发中遇到的坑，以及填坑的方法，并且以公开的形式，以期待有大神来评价我的变成思维方式，以及技术选型中的不足；此文将会为系列文章。会在闲暇时间逐步完成。

系列文章导航

1、多页面App开发跨页通讯

2、页面布局方案

3、开发中总结的js代码块

本页内容由塔灯网络科技有限公司通过网络收集编辑所得，所有资料仅供用户学习参考，本站不拥有所有权，如您认为本网页中由涉嫌抄袭的内容，请及时与我们联系，并提供相关证据，工作人员会在5工作日内联系您，一经查实，本站立刻删除侵权内容。本文链接:https://www.dengtar.com/11793.html