uni-app 黑马优购项目学习记录(一)
1. 起步
1.1 uni-app 简介
uni-app 是一个使用 Vue.js 开发所有前端应用的框架。开发者编写一套代码,可发布到 iOS、Android、H5、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉/淘宝)、快应用等多个平台。
详细的 uni-app 官方文档,请翻阅 https://uniapp.dcloud.net.cn/
1.2 开发工具
uni-app 官方推荐使用 HBuilderX 来开发 uni-app 类型的项目。主要好处:
模板丰富
完善的智能提示
一键运行
1.2.1 下载 HBuilderX
访问 HBuilderX 的官网首页 https://www.dcloud.io/hbuilderx.html
点击首页的
DOWNLOAD
按钮选择下载
正式版
->App 开发版
1.2.2 安装 HBuilderX
将下载的
zip包
进行解压缩将解压之后的文件夹,存放到纯英文的目录中(且不能包含括号等特殊字符)
双击
HBuilderX.exe
即可启动 HBuilderX
1.2.3 安装 scss/sass 编译
为了方便编写样式(例如:<style lang="scss"></style>
),建议安装 scss/sass
编译 插件。插件下载地址:
进入插件下载页面之后,点击右上角的 使用 HBuilderX 导入插件
按钮进行自动安装,截图如下:
如果==没有==右侧这两个按钮,可以看一下是不是自己的浏览器安装了屏蔽广告的插件,将插件关闭后就会显示按钮了
1.2.4 快捷键方案切换
操作步骤:工具 -> 预设快捷键方案切换 -> VS Code
1.2.5 修改编辑器的基本设置
操作步骤:工具 -> 设置 -> 打开 Settings.json
按需进行配置
源码视图下可用的参考配置:
Tips:可以使用 Ctrl + 鼠标滚轮 缩放编辑器
1.3 新建 uni-app 项目
文件 -> 新建 -> 项目
填写项目基本信息
> 项目模板按需进行选择
项目创建成功
1.4 目录结构
一个 uni-app 项目,默认包含如下目录及文件:
1.5 把项目运行到微信开发者工具
填写自己的微信小程序的 AppID:
在 HBuilderX 中,配置“微信开发者工具”的安装路径:
在微信开发者工具中,通过
设置 -> 安全设置
面板,开启“微信开发者工具”的服务端口:
在 HBuilderX 中,点击菜单栏中的
运行 -> 运行到小程序模拟器 -> 微信开发者工具
,将当前 uni-app 项目编译之后,自动运行到微信开发者工具中,从而方便查看项目效果与调试:
初次运行成功之后的项目效果:
如果运行不成功可以尝试多运行几次
如果想要修改小程序
project.config.json
里的配置项(如setting
内容),不能直接在小程序开发者工具里修改,需要到HBuilderX
的项目根目录下manifest.json
里选择源码视图进行修改:
1.6 使用 Git 管理项目
1.6.1 本地管理
在项目根目录中新建
.gitignore
忽略文件,并配置如下:
打开终端,切换到项目根目录中,运行如下的命令,初始化本地 Git 仓库:
将所有文件都加入到暂存区:
本地提交更新:
1.6.2 把项目托管到码云
注册并激活码云账号( 注册页面地址:https://gitee.com/signup )
生成并配置 SSH 公钥
创建空白的码云仓库
把本地项目上传到码云对应的空白仓库中
版权声明: 本文为 InfoQ 作者【海底烧烤店ai】的原创文章。
原文链接:【http://xie.infoq.cn/article/5ba0721f69c7301d99c5a9d71】。文章转载请联系作者。
评论