快应用day1环境搭建与第一个交互页面

环境就绪 :安装快应用开发所需的所有工具。
真机预览 :在手机上成功运行第一个 "Hello World" 项目。
代码实战:通过亲手编写代码,掌握页面结构、数据绑定和事件响应的核心概念。

1.安装Node.js环境

重要提示 :Node.js 版本选择是关键。官方文档推荐使用 v6.11.3,请一定不要安装最新的版本,否则可能会遇到莫名其妙的错误。
操作步骤:访问 Node.js 官网 ( https://nodejs.org/zh-cn )下载并安装 v6.11.3 版本。安装完成后,打开电脑的命令行工具(终端或CMD),输入以下命令并看到版本号,即表示安装成功。

bash 复制代码
node -v

应正确显示版本号: v6.11.3

2.PC端安装快应用官方IDE

操作步骤 :前往快应用官网( https://www.quickapp.cn/devtool/quickapp )下载并安装专为快应用设计的IDE工具。它集成了项目创建、代码编辑、编译预览等一系列功能。建议下载最新版本。
题外话总感觉这个IDE有种强烈的既视感。。。

3.创建第一个项目

我们的代码之旅现在正式开始了~

创建项目

打开IDE,在欢迎页面选择 "新建项目 > 快应用"或者左上角文件>新建快应用工程。

点击模式选择,可以选择这个示例,也可以点击右侧的安装插件获得更多模版。

IDE会提供几种模板,我们选择最简单的 "快应用入门示例" 模板。IDE会自动生成项目所需的基本文件结构。

记得点击右侧安装依赖。

4.真机预览与调试

手机开启开发者模式和USB调试 :不同手机操作不一样,请自行搜索。一般是在手机"设置"里的"开发者选项"中,确保 "USB调试" 是打开的。
并确保电脑和手机连接到了同一个Wi-Fi网络下

授权电脑进行调试 :当通过USB线连接手机和电脑时,手机上通常会弹出一个授权弹窗,注意留意手机屏幕,并勾选"始终允许使用这台计算机进行调试 ",然后点击"确定"。如果错过这个弹窗,可以重新插拔USB线或在开发者选项中"撤销USB调试授权"后再试。
连接手机 :用USB数据线将手机连接到电脑。点击右上角"USB调试",如果IDE提示需要安装驱动或工具,请同意安装。手机上会下载两个软件:

项目编译运行 :ctrl+`调起终端

在终端输入

bash 复制代码
npm run build

打开快应用调试器,开启USB调试

在PC端IDE终端输入

bash 复制代码
npm run server

点击在线更新 ,会自动跳转到快应用预览版,之后可以直接打开快应用预览版,选择要打开的项目。

5.亲手改造页面

尝试修改 <text> 标签中的文字,比如把"Hello World"改成你的名字。IDE支持实时预览,你修改代码保存后,在模拟器和手机上应该能立刻看到效果。

再试试修改 <style> 中的 color 属性值,把文字颜色改成你喜欢的颜色。

相关推荐
RIVOTEK_OPENVELA6 天前
openvela快应用开发实战
快应用·openvela·rivotek
李小白杂货铺2 年前
小米等手机彻底关闭快应用
安卓·快应用·小米·关闭快应用·彻底关闭
锐成信息2 年前
如何消除SmartScreen“此程序不是常见的下载内容,可能会危害您的计算机”警告?
安全·快应用
华科云商xiao徐2 年前
如何在wxPython应用程序中使用Panda3D
爬虫·快应用
乖女子@@@2 年前
quickapp_快应用_快应用与h5交互
快应用
乖女子@@@2 年前
quickapp_快应用_titleBar
开发语言·快应用
demo007x2 年前
WebRTC是什么?使用他能做什么?如何实现一个 webRTC 的应用?
前端·浏览器·快应用
乖女子@@@2 年前
quickapp_快应用_tabBar
快应用
对点出暴击3 年前
快应用编译前如何统一替换字符串
前端·javascript·webpack·快应用·loader