目录

一、uniapp简单介绍

1.什么是uniapp

uni-app 是使用 Vue.js 开发跨平台应用的前端框架，开发者编写一套代码，可编译到iOS、Android、H5、小程序等多个平台。

2.uni-app的优点

3.配置及下载

由于Hbuilder是uniapp的内置开发工具，下载hbuilder即可

二、开发前准备

hbuilder下载请参见上文

2.在hbuilder中创建uniapp项目

依次点击“文件->新建”后，弹出如下弹窗，

创建好之后这就是我们项目中的各个文件夹

需要注意的是初次创建时components、htbrids、platforms、wxcomponents是不存在的。

3.运行项目

这时我们已经做好了开发前的准备，现在可以在hbuilder中进行开发了。

三、进行开发

1.开发规范

页面文件需要遵从Vue 单文件组件规范，具体文档请看。

2.开发需要语言

由于是Vue框架，我们需要三门基础语言进行页面开发。 .vue 文件包含三种类型的顶级语言块 <template>、<script> 和 <style>，用到的语言分别是html、css、JavaScript。

这几门语言的学习可以参照B站课程

3.如何开发

uniapp开发的框架可以参照uniapp的官方文档。按照需求进行页面配置和全局配置，配置好之后我们可以进行单个页面的开发。

由于uniapp自带的组件的用途并不是很广泛，我们可以再官方的组件市场下载需要的插件，插架市场链接，可以将完整的插件下载直接下载到hbuilder中进行代码的参照和学习。

 四、实例

这是我的用uni-forms、uni-easyinput等插件开发的一个简单的投稿页面。

操作端图片如下：

下面是此页面的源码，供大家参考。

 五、结语

本人由于是第一次开发小程序的前端，对vue没有一个很深的理解，如果文中有什么问题还请大家批评指正。我也在学习前后端链接和后端的一些东西，后期会写一写学习日记，也给大家提供一个参考，目前想的是后端用java做~

文章多有瑕疵，若得诸位共赏，不胜欢喜，请诸君畅所欲言，以待下次相约，谢观！