uni-app使用

一、前期准备

1.1 前言

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

1.2 下载HBuilderX工具

编写uni-app最好使用其官方推荐的自己的编辑器：HBuilder X

下载链接

二、 初始化项目

2.1 新建uni-app项目（HBuilder X方式）

双击打开HBuilder X，选择新建项目–uni-app，可根据自己的项目需要选择对应的模板，uni-app针对不同类型项目要求都有很多免费模板可直接下载使用，模板地址，当然如果没有比较符合的模板就选择默认模板，也会将基本的目录生成好供编码使用。

2.2 新建uni-app项目（vue/cli脚手架方式）

全局安装vue-cli

npm install -g @vue/cli

创建uni-app

vue create -p dcloudio/uni-preset-vue my-project

运行发布

npm run dev:%PLATFORM%
npm run build:%PLATFORM%

%PLATFORM% 可取值如下：

值	平台
h5	H5
mp-weixin	微信小程序
mp-alipay	支付宝小程序

2.3 运行hello world

操作步骤：

1. 选中项目文件
2. 点击顶部功能栏–运行
3. 运行到浏览器–Chrome
4. 预览–可在内置浏览器查看
5. 复制地址可在本地浏览器查看启动项目
   

【注意】

• 不需要npm install
• 不需要配置nodejs

三、 注意备忘

3.1 运行到微信小程序

• 首先需要确认本地已经安装了微信小程序的官方编辑工具：微信开发者工具
• 在HBuilder X软件内进行配置，微信开发者工具的路径
  
• 打开微信开发者工具–设置–安全设置–安全–服务端口打开即可
• 选中HBuilder X的项目，点击“运行”–运行到小程序模拟器
• 在微信小程序开发者工具中即可查看效果

3.2 运行到模拟器中

• 首先需要确认本地已经安装了手机模拟器：MuMu模拟器
• 安装adb，下载adb，将adb解压到任何一个盘里
  链接：https://pan.baidu.com/s/16e_OveggZje10lEWwp3b4A
  提取码：yyds
• 配置adb的环境变量，
• Win11配置地址：复制adb路径–右键我的电脑–属性–系统–高级系统配置–高级–环境变量–选中“系统变量”下的path–编辑–新建–将复制的adb路径粘贴–确定

• 打开HbuilderX – 工具 – 设置 – 运行配置 – adb的路径(选择你刚刚解压的adb文件中adb.exe的路径) – 模拟器的端口配置为7555
• 终端连接模拟器，输入cmd打开命令行窗口。输入adb connect 127.0.0.1:7555
  
  如图说明连接成功
• 打开HBuilder X–运行–运行手机模拟器基座–选中127.0.0.1:7555–运行即可