起步

uni-app 简介

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

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

开发工具

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

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

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

安装 HBuilderX

访问 HBuilderX 的官网首页 https://www.dcloud.io/hbuilderx.html

安装 scss/sass 编译

为了方便编写样式（例如：<style lang="scss"></style>），建议安装 scss/sass 编译 插件。插件下载地址：

https://ext.dcloud.net.cn/plugin?name=compile-node-sass

快捷键方案切换

操作步骤：工具 -> 预设快捷键方案切换 -> VS Code

修改编辑器的基本设置

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

新建 uni-app 项目

  1. 文件 -> 新建 -> 项目
  2. 填写项目基本信息
    • 选择uni-app项目
    • 填写项目名称
    • 选择项目根目录地址
    • 选择 uni-ui 项目模板（推荐）
    • 其他默认
  3. 项目创建成功

目录结构

一个 uni-app 项目，默认包含如下目录及文件：（挖个坑：目录不一样）

1
2
3
4
5
6
7
8
9
10
11
12
┌─components            uni-app组件目录
│  └─comp-a.vue         可复用的a组件
├─pages                 业务页面文件存放的目录
│  ├─index
│  │  └─index.vue       index页面
│  └─list
│     └─list.vue        list页面
├─static                存放应用引用静态资源（如图片、视频等）的目录，注意：静态资源只能存放于此
├─main.js               Vue初始化入口文件
├─App.vue               应用配置，用来配置小程序的全局样式、生命周期函数等
├─manifest.json         配置应用名称、appid、logo、版本等打包信息
└─pages.json            配置页面路径、页面窗口样式、tabBar、navigationBar 等页面类信息
1
2
3
4
5
6
7
8
9
10
11
┌─pages                 业务页面文件存放的目录
│  └─index
│     └─index.vue       index页面
├─static                存放应用引用静态资源（如图片、视频等）的目录，注意：静态资源只能存放于此
├─uni_modules		   是uni-app的插件模块化规范（HBuilderX 3.1.0+支持）
├─App.vue               应用配置，用来配置小程序的全局样式、生命周期函数等
├─index.html            基础模板入口文件
├─main.js               Vue初始化入口文件
├─manifest.json         配置应用名称、appid、logo、版本等打包信息
├─pages.json            配置页面路径、页面窗口样式、tabBar、navigationBar 等页面类信息
└─uni.scss			   为了方便整体控制应用的风格,uni.scss文件里预置了一批scss变量预置

把项目运行到微信开发者工具

  1. 填写自己的微信小程序的 AppID：
    • manifest.json -> 微信小程序配置 -> 微信小程序 AppID
  2. 在 HBuilderX 中，配置“微信开发者工具”的安装路径：
    • 工具 -> 设置 ->运行设置 -> 小程序运行配置 -> 微信开发者工具路径
  3. 在微信开发者工具中，通过 设置 -> 安全设置 面板，开启“微信开发者工具”的服务端口：
  4. 在 HBuilderX 中，点击菜单栏中的 运行 -> 运行到小程序模拟器 -> 微信开发者工具，将当前 uni-app 项目编译之后，自动运行到微信开发者工具中，从而方便查看项目效果与调试：

想要修改小程序的 project.config.json 可以到 manifest.json -> 源码视图 -> mp-weixin -> setting

使用 Git 管理项目

本地管理

在项目根目录中新建 .gitignore 忽略文件，并配置如下：（挖坑：没有 node_modules）

1
2
3
# 忽略 node_modules 目录
/node_modules
/unpackage/dist

注意：由于我们忽略了 unpackage 目录中仅有的 dist 目录，因此默认情况下， unpackage 目录不会被 Git 追踪

此时，为了让 Git 能够正常追踪 unpackage 目录，按照惯例，我们可以在 unpackage 目录下创建一个叫做 .gitkeep 的文件进行占位

打开终端，切换到项目根目录中，运行如下的命令，初始化本地 Git 仓库：

1
git init

将所有文件都加入到暂存区：

1
git add .

本地提交更新：

1
git commit -m "init project"

把项目托管到码云

  1. 注册并激活码云账号（ 注册页面地址：https://gitee.com/signup ）
  2. 生成并配置 SSH 公钥（运行 ssh -t git@gitee.com 检测 SSH 公钥是否配置成功）
  3. 创建空白的码云仓库
  4. 把本地项目上传到码云对应的空白仓库中