uniapp开发小程序笔记一

Uniapp是一个基于Vue.js框架的全端开发框架，它可以帮助开发者快速的开发出微信小程序、支付宝小程序、百度小程序、QQ小程序以及H5应用程序，并且它支持一套代码开发，多端运行。同时，Uniapp的运行逻辑也比较简单，本文将会详细介绍Uniapp的原理和详细使用方法。

一、Uniapp项目的创建

首先，我们需要下载安装好HBuilderX这款工具，它是一款可以快速开发uniapp项目的工具，下载地址：https://www.dcloud.io/hbuilderx.html。

打开HBuilderX后，点击菜单栏中的File > New > Project,选择uniapp项目，如下图所示：

选择好项目类型之后，需要填写一些基本信息，包含项目名称、项目路径等等，如下图所示：

点击“创建”按钮，稍等片刻，会自动在指定的项目路径下生成Uniapp项目的基本目录和文件结构，如下图所示：

二、Uniapp项目的核心文件

1.App.vue

App.vue是整个Uniapp项目的入口文件，其中包含了整个应用程序的生命周期以及每个页面的路由设置。在这里也可以添加一些全局通用的样式和方法。

2.pages文件夹

在pages文件夹下放置了每个页面的Vue文件以及该页面对应的JS、CSS和图片等资源文件，如下图所示：

3.main.js

main.js文件是整个Uniapp项目的核心js文件，它主要用来注册全局组件，以及初始化Vue插件和一些全局设置。在这里可以配置全局使用的页面进入动画和退出动画、配置请求接口的地址和端口等。

三、Uniapp项目的开发

1.页面开发

Uniapp项目的页面开发与普通的Vue开发几乎一致，唯一的区别就是需要使用uniapp定义的组件而不是Vue内置组件，当我们在写页面时，我们一般需要做以下几个方面的工作：

① 搭建页面框架，使用uniapp定义的组件搭建页面框架，常用组件有view、scroll-view、swiper等等。

② 添加页面数据，定义data对象，其中存储了需要在页面中使用的数据。

③ 编写页面逻辑，包括事件响应函数等等。

2.样式开发

Uniapp项目的样式开发与普通的Vue开发也几乎一致，在样式中，我们可以使用CSS3中的新特性来实现更多的效果，Uniapp内置了一些样式，我们可以通过以下方式来使用内置样式：

使用

3.数据请求

Uniapp项目中，我们可以使用uni.request()方法来实现数据请求，与普通Vue开发使用axios、fetch请求一致，只是需要注意一下跨域或者是按照开发人员配置的后端地址请求。

例如：

uni.request({

url: 'http://192.168.1.1/api',

method: 'POST',

header: {

'Content-Type': 'application/json'

},

data: {

username: '',

password:''

},

success: function (res) {

console.log(JSON.stringify(res));

}

});

四、Uniapp项目的打包

Uniapp项目的打包方式非常简单，只需要点击HBuilderX的菜单栏中的“发行”按钮，选中需要打包的项目类型即可，如下图所示：

当你选择其中一个需要打包的类型之后，会弹出打包设置，包含需要配置的应用信息、上传设置以及相关证书配置等等。

以上就是Uniapp开发小程序的原理及详细介绍，如果想要更加详细的了解Uniapp的开发过程，可以去官方文档查阅相应的内容。