一 uni-app介绍

1.1 简介

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

详细的 uni-app 官方文档，请翻阅 https://uniapp.dcloud.net.cn/

1.2 开发工具

uni-app 官方推荐使用 HBuilderX 来开发 uni-app 类型的项目。主要好处：

• 模板丰富
• 完善的智能提示
• 一键运行

当然，你依然可以根据自己的喜好，选择使用 VS Code、Sublime、记事本… 等自己喜欢的编辑器！

1.2.1 下载 HBuilderX

1. 访问 HBuilderX 的官网首页 https://www.dcloud.io/hbuilderx.html
2. 点击首页的 DOWNLOAD 按钮
3. 选择下载 正式版 -> App 开发版

1.2.2 安装 HBuilderX

1. 将下载的 zip包 进行解压缩
2. 将解压之后的文件夹，存放到纯英文的目录中（且不能包含括号等特殊字符）
3. 双击 HBuilderX.exe 即可启动 HBuilderX（免安装）

1.2.3 安装 scss/sass 编译

为了方便编写样式（例如： <style lang="scss"></style> ），建议安装 scss/sass 编译插件。插件下载地址：https://ext.dcloud.net.cn/plugin?name=compile-node-sass

进入插件下载页面之后，点击右上角的 下载插件并导入HBuilderX 按钮，进行自动安装，截图如下：

此时就会自动进行安装了，稍等片刻，提示安装成功

1.2.4 快捷键方案切换

操作步骤：工具 -> 预设快捷键方案切换 -> ，然后选择自己熟悉的开发工具的快捷键

1.2.5 修改编辑器的基本设置

操作步骤：工具 -> 设置 -> 打开 Settings.json 按需进行配置

源码视图下可用的参考配置：

{
	"editor.colorScheme": "Default",
	"editor.fontSize": 12,
	"editor.fontFamily": "Consolas",
	"editor.fontFmyCHS": "微软雅黑 Light",
	"editor.insertSpaces": true,
	"editor.lineHeight": "1.5",
	"editor.minimap.enabled": false,
	"editor.mouseWheelZoom": true,
	"editor.onlyHighlightWord": false,
	"editor.tabSize": 2,
	"editor.wordWrap": true,
	"explorer.iconTheme": "vs-seti",
	"editor.codeassist.px2rem.enabel": false,
	"editor.codeassist.px2upx.enabel": false
}

Tips：可以使用 Ctrl + 鼠标滚轮 缩放编辑器

1.3 新建 uni-app 项目

项目整体架构

uni-app 支持两种方式创建项目：

1. 通过HBuilderX 创建
2. 通过命令行创建（不必依赖HBuilderX）

通过 HbuilderX 创建 uni-app vue3 项目

1. 文件 -> 新建 -> 项目
   

2. 填写项目基本信息
   

创建成功

安装 uni-app vue3 编译器插件

1.4 编译成微信小程序端代码

日志

1.5 开启服务端口

打开微信开发者工具

温馨提示：服务端口只需初次使用时开启一次即可

小技巧分享：模拟器窗口分离和置顶

找到微信开发者工具

然后点击下边这里固定到屏幕最前边即可

这样就可以在Hbuilder里写代码，同时在微信开发平台看实时效果了。要关闭这个窗口的话，直接点击x号关闭即可

此时，使用微信开发者工具打开刚才Hbuilder创建的项目，就可以看到效果了

如果微信开发者工具里提示编译失败，那就重新执行以下1.4章节里的步骤重新编译即可，然后打开微信开发者工具查看效果

1.6 pages.json 和 tabBar 案例

1.7 uni-app和原生小程序开发区别

每个页面是一个.vue 文件，数据绑定及事件处理同Vue.js 规范：

1. 属性绑定：src=“{{ url }}” 升级成:src=“url”
2. 事件绑定：bindtap=“eventName” 升级成@tap=“eventName”，支持（）传参
3. 支持Vue 常用指令v-for、v-if、v-show、v-model 等

温馨提示：调用接口能力，建议前缀wx 替换为uni，养成好习惯，这样支持多端开发。

1.8 命令行创建uni-app 项目

使用命令行的好处，就是开发者可以按照自己喜欢的开发工具（如vscode）来开发自己的小程序，不必非要使用HBuilderx了。

创建项目命令：

vue3+ts版:

npx degit dcloudio/uni-preset-vue#vite-ts  项目名称

其中

1. npx是安装nodejs的时候自带的工具
2. degit是一个包，允许我们快速在github上下载代码
3. dcloudio/uni-preset-vue：github仓库地址
4. #vite-ts：仓库里的某一个分支

官方链接：https://uniapp.dcloud.net.cn/quickstart-cli.html#创建uni-app

执行上边的命令是，由于要连接github，所以可能需要大家科学上网，否则下载可能会失败

这是我们通过命令创建好的项目

使用Hbuilderx打开这个项目

如下

填写自己的微信小程序AppID

Hbuilderx左下方，点击下边这个按钮，下载并打开命令行终端

点击确定

只下载一次即可，以后就会直接打开下方的命令行终端了，如下

先安装一下pnpm命令

tips：pnpm 是一个node.js包管理器，可以用于代替 npm和 yarn

npm install -g pnpm

在Hbuilderx里执行pnpm i命令来下载相关依赖

执行完后，项目里多出来一个node_modules文件夹，如下

此时，uniapp的编译器就在里面了。此时，项目已经下载完依赖包了，但是还没有编译运行。

打开package.json文件

发现script里，分为dev与build，其中开发时适合使用dev，修改文件会立刻生效。上线后适合使用build，它会压缩文件。

文件里找到微信小程序的命令，如下

其中mp代表miniProgram，复制上的边脚本，在HBuilder里执行即可

pnpm dev:mp-weixin

编译结果如下

发现多出来一个编译后的dist文件夹，此时，是没法在HBuilder里跑起来的，只能在微信开发者工具里运行。注意，在微信开发者工具导入的时候，要找到dist-dev-mp-weixin文件夹进行导入，如下

需要起一个项目名称

其名称后，点击确定

可以看到，导入成功

现在来测试，在Hbuilder里修改代码，在微信开发者工具里的效果，能否实时更新成功（即能否热更新）

发现，可以实时编译进行热更新的。