手机web app开发笔记

各位朋友好，最近自学开发了一个手机Web APP，“编程之路”，主要功能包括文章的展示，留言，注册登录，音乐播放等。为了记录学习心得，提高自己的编程水平，也许对其他朋友有点启发，特整理开发笔记如下。

第一章基本情况

这个手机APP我已经初步成型，我放到华为应用市场，感兴趣的朋友可以自行下载看看效果，在华为应用市场搜索“编程之路”就可以下载。不想下载的朋友也没有关系我抓了写图片，让大家看看效果。

一、效果展示

启动页	首页	编程页	音乐页
交流页	用户中心	搜索页	详细页

上面只展示了其中部分页面，还有许多功能页面没有展示，例如引导页，登陆页，留言页等等。感兴趣的朋友可以继续跟读下去，都是一些最基本，最常用的一些东西。

二、用到的开发技术及说明

我这次手机WEB APP 开发用到主要技术包括三大方面：HTML5，ASP.NET，SQLServer。这三大方面技术里面会用到许多分支应用，不再列出，用到的时候在详细说明。HTML5主要用于手机APP用户界面的展示，ASP.NET主要从数据库中读取数据，格式化成JSON数据格式提供给前台页面调用，SQLServer主要用于数据的存储。HTML5包括HTML5+、HTM、CSS、Javascript相关技术；ASP.NET要用到ADO.NET技术；SQLServer用到视图、存储过程等。

三、开发工具及开发环境的搭建

开发用到的开发工具是与开发技术相对应的。前台HTML5开发工具用的是HBuilderX；ASP.NET开发用到的是Visual Studio；SQLServe开发用到的工具是Microsoft SQL Server。我们用到的开发工具会有很多版本，条件允许，建议使用最新版本，版本不同会有一定的差别。我开发工具使用版本是：HBuilderX 2.0、Visual Studio 2012、Microsoft SQL Server2008。

开发环境的搭建十分容易，只要下载对应的开发工具软件，按照软件的安装提示下一步、下一步就可以了。我的开发环境是在Windows 10专业版本的操作系统基础上按照上述开发工具。

四、开发的主要流程

我们开手机web APP的开发流程主要分为下面三个步骤：

1.数据的建立：

主要是SQL Server数据的建立，包括数据表格、数据试图、存储过程等，实现的主要功能是数据的存储、查询和修改；

2.数据接口的开发：

主要是运用ASP.NET知识，主要包括ADO.NET技术，实现的主要功能从数据库调取数据以JSON数据格式提供给前台调用接口；从前端获取数据存入数据库或者传到服务器以文件存储（主要是图片、视频、文档等）；

3.手机用户界面的开发：

主要是运用的HTML5相关知识，包括HTML(结构),CSS（样式）,JavaScript（行为）技术，实现的主要功能是用户的界面展示，从接口获取数据展示给前端，从用户获取数据传给接口。