1.1 开发工具
uni-app 官方推荐使用 HBuilderX 来开发 uni-app 类型的项目。主要好处:
- 模板丰富
- 完善的智能提示
- 一键运行
当然,你依然可以根据自己的喜好,选择使用 VS Code、Sublime、
记事本... 等自己喜欢的编辑器!
1.1.1 下载 HBuilderX
- 访问 HBuilderX 的官网首页 www.dcloud.io/hbuilderx.h…
- 点击首页的
DOWNLOAD
按钮
1.1.2 安装 HBuilderX
- 将下载的
zip包
进行解压缩 - 将解压之后的文件夹,存放到纯英文的目录中(且不能包含括号等特殊字符)
- 双击
HBuilderX.exe
即可启动 HBuilderX
1.1.3 安装 scss/sass 编译
为了方便编写样式(例如:<style lang="scss"></style>
),建议安装 scss/sass 编译
插件。插件下载地址:
进入插件下载页面之后,点击右上角的 使用 HBuilderX 导入插件
按钮进行自动安装,截图如下:
1.2 新建 uni-app 项目
-
文件 -> 新建 -> 项目
-
填写项目基本信息
-
项目创建成功
1.3 目录结构
一个 uni-app 项目,默认包含如下目录及文件:
├─pages 业务页面文件存放的目录
│ ├─index
│ │ └─index.vue index页面
│ └─list
│ └─list.vue list页面
├─static 存放应用引用静态资源(如图片、视频等)的目录,注意:静态资源只能存放于此
├─main.js Vue初始化入口文件
├─App.vue 应用配置,用来配置小程序的全局样式、生命周期函数等
├─manifest.json 配置应用名称、appid、logo、版本等打包信息
└─pages.json 配置页面路径、页面窗口样式、tabBar、navigationBar 等页面类信息
复制代码
1.4 把项目运行到微信开发者工具
-
填写自己的微信小程序的 AppID:
-
在 HBuilderX 中,配置“微信开发者工具”的安装路径:
-
在微信开发者工具中,通过
设置 -> 安全设置
面板,开启“微信开发者工具”的服务端口:
-
在 HBuilderX 中,点击菜单栏中的
运行 -> 运行到小程序模拟器 -> 微信开发者工具
,将当前 uni-app 项目编译之后,自动运行到微信开发者工具中,从而方便查看项目效果与调试: -
初次运行成功之后的项目效果:
- 未能成功加载source map
- shift+鼠标右键
添加到git
# 创建本地仓库
git init
#查看更改的文件信息
git status
# 将文件添加到暂存区
git add 文件
# 提交历史记录
git commit "提交日志"
# 第一次使用git需要配置会提示配置用户,配置用户一下两行代码,(只需要配置一次),username是你的git账号,email是你的git邮箱
git config --global user.name 'username'
git config --global user.email 'email'
# 添加远端仓库地址
git remote add origin 你的远程仓库地址
# 推送提交
git push -u origin master
复制代码
复制代码
这里直接在码云里同步
如果之后项目代码有了变动需要提交:
#查看更改的文件信息
git status
添加文件到缓存区(会覆盖之前的项目文件)
git add .
# 提交历史记录和描述信息
git commit -m '描述信息'
# 推到git上
git push
复制代码
开启掘金成长之旅!这是我参与「掘金日新计划 · 2 月更文挑战」的第 7 天,点击查看活动详情