使用uni-app开发一个简易的app

引言：

        项目需要一个方便用操作系统的app，因此需要针对项目功能开发一款app。app开发目前主要有使用Android studio实现原生开发、使用uni-app基于vue与js实现。

        考虑到vue样式美观，组件资源较为丰富，故选择使用uni-app进行app开发。

前期工作

        功能：首先需要清楚我们需要实现哪些功能，可以通过一张流程图帮助自己捋清思路

        页面设计：好看的界面主要就是通过调整样式实现，可以参考一些好看的app的样式。分享一些素材网站：iconfont(阿里巴巴矢量图标库)、IconPark(图标库)

工具

        Hbuilder：

        uni-app主要提供丰富的组件和api，我们还需要用安装hbuilder作为开发的工作台。

        

        我们先介绍一个项目的组成：

                api：存放实现http请求的js文件。

                page：存放需要显示的vue页面文件

                static：存放需要用到的图片

                uni_modules：存放项目中需要用到的外部库

                unpackage：存放项目打包后生成的文件

                mani.js：为全局进行相关的配置

                manifest.json：打包成app、小程序所需要的配置

                pages.json：进行全局性的页面配置，如底部菜单、顶部显示

详细介绍

        不管是app还是web网页，呈现给用户的都是一个个网页，下面我们从一个实例页面进行介绍。

       

        这张页面主要实现一个显示监控画面以及绘制可疑区域的功能。一般来说新建一个vue文件，大概结构如下，在template中主要放置一些组件，如按钮、滑动框、网格图。在script中则使用js语言实现变量的定义、函数的定义等。在style中则对组件的样式进行修饰，让页面变得好看。

       按钮一般会对应一些方法，也就是说当点击按钮的时候，会执行自己所需要的方法。在这个实例中显示监控画面按钮以及绘制可疑区域按钮都是涉及到向服务端发送请求。

        请求的发送主要使用uni.request(config)实现，config中需要放置url、data、auth、method等参数。我们可以对uni.request进行扩展，自定义一个request方法，返回new Promise，可以实现在请求前加自己定义的请求拦截器，在响应后加自己定义的响应拦截器。

        实例中的播放框，使用video组件实现，该组件有url、autoplay等属性，当我们想要动态设置某些属性的时候，可以在属性前加上 “:” 并让其等于一个变量。需要注意的是，来源于rtmp或者rtsp服务器的视频无法在网页中播放，需要将程序运行到安卓模拟器上才能实现。

        实例中的绘制可疑区域，使用到了movable-area组件，该组件在移动的时候能够实时返回左顶点的坐标，用变量x、y接受并在向服务端发送请求的时候携带上。

        有时候我们可能需要根据一些信息显示弹窗来提示用户，便可以用到uni-popup组件，msgtype、messageText属性可以根据具体的情况动态设置。如果说我们想通过监听某些事件然后再显示弹窗，便可以使用uni.$emit('alarm', {type:'error', msg:'危险！危险!'})创建一个alarm事件，并且可以在其他页面使用uni.$on('alarm', alarmMsg)监听alarm事件。

        通过上面的操作能够实现点击显示监控画面，在video组件中显示设定url地址的视频，再次点击便停止显示，相关的消息也会通过弹窗显示出来。点击绘制可疑区域，会将可疑框的左顶点坐标传给服务端。此处有一个技术点，当我们点击显示监控画面的时候，会截取一张视频的图像，上传到azure对象存储服务器，然后返回存放视频流的rtmp服务器和对象存储服务器的地址给app端。

结语：

写的比较潦草，相关技术点均已经实现，完整代码目前不方面发出，考虑后续整理后一起发，有问题的朋友可以留言交流。