本章主要描述此项目的结构设计以及在编写代码时需要注意的几个点。
先从目录结构说起
01.png
其中node_modules文件夹内存放的是项目所用到的一些依赖包，通过npm包管理工具安装。关于如何使用请参考《使用Node.js和Koa框架实现前后端交互》
service里的WebAppService.js用来请求后台接口
static目录存放项目所用到的css、js和图片
view层存放各种页面模板
app.js是整个程序的入口文件，编写了各个页面的路由地址，同时也是程序的前台接口
编码特点：使用ejs模板技术将页面拆分成了多个模块，某些模块可以重复使用，使页面代码结构变的更清晰，更容易理解。
项目源码 https://pan.baidu.com/s/1hs9Xngg 密码: 75ug
源码已贴上，大家可以拿去研究一下，哪里不清楚可以在留言区提问，我会认真回答。
然后再说一下打包问题，打包我使用的是Hbuider，一款超好用的编辑器，它可以将WebApp项目打包成Android或IOS的安装包。
Hbuider下载 http://www.dcloud.io/
安装好之后打开Hbuider，选择【文件】【新建】【移动App】，然后我们只留下unpackage和manifest.json文件，其他的全部删除。
app.png
双击manifest.json文件去配置你的打包程序。
apps.png
其中应用名称就是手机上显示的名称，appid点云端获取自动生成。这里重点说一下页面入口
页面入口要填WebAPP站点的外网地址，所以我们先要在服务器上创建一个WebAPP站点，并将项目源码上传到服务器的站点目录。端口要和app.js里的端口一致
04.png
然后需要在服务器上安装nodejs环境，并通过node app.js命令去启动服务。
ser.png
这样页面入口就可以填写为http://120.25.77.100:8888，然后就是上传APP的图标和启动页图片。
02.png
03.png
然后添加NativeUI(原生UI控件)和Webview(窗口管理)模块
01.png
Ctrl+S【保存】，然后选择【发行】【发行为原生安装包】
db.png
然后就可以通过点击手动下载将打好的包下载到本地，再通过QQ发送到你的手机，安装后就可以使用了。
xz.png
网友评论