uniapp快速入门

一、什么是uniapp

Uniapp是一款基于Vue.js框架的开发平台，允许开发者使用Vue语法进行跨平台应用的开发，支持应用编译成H5、小程序、APP等多种平台。Uniapp具有开发简单、调试便捷、开发效率高等优点，因此逐渐成为了跨平台开发的热门选择之一。

• uni-app官方文档地址

二、uniapp的环境准备

uni-app [uni-æp]，dcloud官方开发工具HBuilder X，小程序端运行需要微信开发者工具，APP端运行可安装各类模拟器，如本文档中使用的网易mumu，按以下的说明安装即可

1.安装HBuilder X（App开发版）

• 安装开发环境HBuilder X下载地址

2.申请dcloud开发者账号

• 打包发布应用需要在开发者中心创建应用，每个应用对应一个appid，也可在HBX中生成
• 申请dcloud开发者账号地址

3.微信开发者工具

• 微信官方文档
• 微信公众平台账号注册地址

4.配置微信开发者工具路径

5.安装android模拟器

常用的有genymotion、网易mumu、夜神等。
网易mumu下载地址

6.配置adb路径及AVD端口号

• 不同虚拟器的端口号不同，常用的Genymotion为5555，夜神62001/52001，雷神和腾讯游戏助手也是5555，网易mumu为7555，根据自己安装的模拟器配置相应的端口即可。
• 对于adb路径，默认安装路径则无需设置，若自定义安装，需要配置目录为模拟器bin目录下的adb_server。
• 最新win11有wsa可以使用，win10页出现了第三方工具安装wsa。

三、创建第一个uniapp项目

通过上面的环境配置，接下来我们就可以开始创建第一个uniapp项目了。

1.使用HbuilderX初始化项目

1. 点击HbuilderX菜单栏文件>项目>新建
2. 选择uni-app，填写项目名称，项目创建的目

2.运行项目

• 在菜单栏中点击运行，运行到浏览器，选择浏览器即可运行。
• 在微信开发者工具里运行：进入hello-uniapp项目，点击工具栏的运行 -> 运行到小程序模拟器 -> 微信开发者工具，即可在微信开发者工具里面体验uni-app。
• 在微信开发者工具里运行：进入hello-uniapp项目，点击工具栏的运行 -> 运行到手机或模拟器 -> 选择调式的手机。

注意：如果是第一次使用微信开发者工具，需要先配置小程序ide的相关路径，才能运行成功。同时微信开发者工具在设置中安全设置，服务端口开启。

3.介绍目录及作用

• pages文件夹存放页面
• static内的文件不会进行编译，不要放js文件，可放到common中（注意体积限制）
• unpackage文件夹存放打包的文件
• components文件夹存放各种组件
• App.vue代表应用，包括应用层的生命周期方法，全局样式等
• pages.json整个应用的页面集合，第一项为启动页，可配置页面路由及样式和标题
• manifest.json应用配置，包括图标配置、启动界面配置、权限配置及其他开发配置
• main.js应用入口文件

四、uni-app 的使用

1.pages.json 配置

globalStyle

• 用于设置应用的状态栏、导航条、标题、窗口背景色等。
• globalStyle文档链接

注意

• 支付宝小程序使用titleImage时必须使用https的图片链接地址，需要真机调试才能看到效果，支付宝开发者工具内无效果。
• globalStyle中设置的titleImage也会覆盖掉pages->sty