uni-app零基础入门（一）

一、uni-app介绍

uni-app官方网页

uni-app是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。

1、uni-app的主要特征：

（1）跨平台更多

• 真正做到“一套代码、多端发行”！
• 条件编译：优雅的在一个项目里调用不同平台的特色功能！

（2）运行体验更好

• 组件、api与微信小程序一致
• 兼容weex原生渲染

（3）通用技术栈，学习成本更低

• vue的语法、微信小程序的api
• 内嵌mpvue

（4）开放生态，组件更丰富

• 支持通过npm安装第三方包
• 支持微信小程序自定义组件及SDK
• 兼容mpvue组件及项目
• App端支持和原生混合代码
• DCloud将发布插件市场

2、为什么要选择uni-app？

uni-app在开发者数量、案例、跨端抹平度、扩展灵活性、性能体验、周边生态、学习成本、开发成本等8大关键指标上拥有更强的优势。

二、准备工具

Windows安装HBuilderX

下载

HBuilderX下载地址: 下载地址

解压安装包

HBuilderX，Windows为zip包，解压后才能使用。

1. 首先，选中下载的zip包，点击右键菜单，点击解压到当前文件夹
2. 进入解压后的文件夹，找到HBuilderX.exe，直接点击打开。

特别注意：解压过程中，不要中断解压。

创建桌面快捷方式

三、创建项目

1、新建项目

（1）打开HbuilderX，点击文件>新建>项目

（2）选择uni-app，填写项目名称，项目创建的目录

2、认识界面

项目目录和文件作用：

（1）pages.json ：文件用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等
（2）manifest.json ：文件是应用的配置文件，用于指定应用的名称、图标、权限等。
（3）App.vue：是我们的跟组件，所有页面都是在App.vue下进行切换的，是页面入口文件，可以调用应用的生命周期函数。
（4）main.js：是我们的项目入口文件，主要作用是初始化vue实例并使用需要的插件。
（5）uni.scss：文件的用途是为了方便整体控制应用的风格。比如按钮颜色、边框风格，uni.scss文件里预置了一批scss变量预置。
（6）unpackage：就是打包目录，在这里有各个平台的打包文件
（7）pages：所有的页面存放目录
（8）static：静态资源目录，例如图片等
（9）components：组件存放目录

四、运行项目

1、运行到内置浏览器

如果不想配置别的东西，可以直接点击运行>运行到内置浏览器，右下角会安装插件，直接安装就行，安装完成，重启HbuilderX。

2、运行到外置浏览器

如Firefox、Edge等浏览器，点击运行>运行到浏览器>配置web服务器

配置Firefox、Edge的安装路径，然后点击运行

3、运行到小程序模拟器

首先打开微信开发者工具，点击设置>安全设置，将服务端口打开

然后HbuilderX中点击运行>运行到小程序模拟器>运行设置，配置微信开发者工具的安装路径。