uni-app 系列之（一）—— 快速入门

简介

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

即使不跨端，uni-app 同时也是更好的小程序开发框架。

官方文档

https://uniapp.dcloud.net.cn/

开发工具

uni-app 的开发工具首选 uni-app 官方推荐工具：https://www.dcloud.io/hbuilderx.html

HBuilderX 是通用的前端开发工具，但为 uni-app 制成特别强化。

HBuilderX，H是HTML的首字母，Builder是构造者，X是HBuilder的下一代版本。

也简称HX，HX是轻如编辑器、强如IDE的合体版本。

开发规范

为了实现多端兼容，综合考虑编译速度、运行性能等因素，uni-app 有如下开发规范：

• 页面文件遵循 Vue 单文件组件（SFC）规范，详见 Vue 单文件组件 (SFC) 规范如下：

<template>  
 <view> 此处须有一个view，且只能有一个根view。所有内容都需要写在这个view里面。view>  
template>  
<script>      
    export default {  
 }  

script>
 <style>  
style>

• 组件标签靠近小程序规范，详见 uni-app 组件规范；
• 接口能力（JS API）靠近微信小程序规范，但需将前缀 wx 替换为 uni，详见 uni-app接口规范；
• 数据绑定及事件处理同 vue.js 规范，同时补充了 App 及页面的生命周期；
• 为兼容多端运行，推荐建议使用 flex 布局进行开发。

uni-app 特征

• 开发者/案例数量更多
• 平台能力不受限
• 性能体验优秀
• 周边生态丰富
• 学习成本低
• 开发成本低

项目实践

搭建项目

在点击工具栏里的文件->新建->项目：

选择 uni-app 类型，输入工程名，选择模板，点击创建，即可成功创建。

uni-app 自带的模板有：默认的空项目模板、Hello uni-app 官方组件和 API 示例，还有一个重要模板是 uni ui 项目模板，日常开发推荐使用该模板，已内置大量常用组件。

新建的项目如下：

也可以使用 cli 方式创建项目，文档指引：https://uniapp.dcloud.net.cn/quickstart-cli.html。

差别是：HBuilderX 创建的项目根目录就是源码，可直接编辑。uni-app 的编译器在 HBuilderX 的插件目录下，跟随 HBuilderX 升级而一起升级。

cli创建项目和HBuilderX可视化界面创建项目的区别

运行uni-app

浏览器运行

进入项目，点击工具栏的运行 -> 运行到浏览器 -> 选择浏览器，即可体验 uni-app 的 web 版。如下：

运行成功之后，自动打开浏览器，如下：

运行 App 到手机或模拟器

使用电压足够的usb端口连接手机，设置中开启USB调试，手机上允许电脑设备调试手机，进入hello-uniapp项目，点击工具栏的运行 -> 运行App到手机或模拟器，即可在该设备里面体验 uni-app。

在微信开发者工具里运行

在微信开发者工具里运行：进入项目，点击工具栏的运行 -> 运行到小程序模拟器 -> 微信开发者工具，即可在微信开发者工具里面体验 uni-app。

注意：

1. 如果是第一次使用，需要先配置小程序ide的相关路径，才能运行成功。如下图，需在输入框输入微信开发者工具的安装路径。
2. 微信开发者工具需要开启服务端口 在微信工具的设置->安全中。

运行的快捷键是 Ctrl+R。