欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

安装快应用开发环境,构建第一个快应用Hello World —— H5/小程序/Vue前端开发者必读

程序员文章站 2022-04-14 16:11:12
简介 1.硬件准备; 2.联盟快应用IDE安装; 3.华为快应用IDE安装; 4.安装Node.js环境; 5.激活手机开发者调试模式; 6.手机端工具安装; 7.Hello World; 8.快应用高效开发相关资源。 一、硬件准备 以我的开发环境为例: MacBook Pro笔记本电脑一台,其它笔 ......

简介

1.硬件准备;
2.联盟快应用ide安装;
3.华为快应用ide安装;
4.安装node.js环境;
5.激活手机开发者调试模式;
6.手机端工具安装;
7.hello world;
8.快应用高效开发相关资源。

一、硬件准备

以我的开发环境为例:
macbook pro笔记本电脑一台,其它笔记本电脑或台式机也可以;
华为mate10 pro手机一部,其它品牌或型号的安卓智能手机也可以;
电脑与手机连接线一根,方便电脑连接手机usb调试。

二、联盟快应用ide安装

ide下载路径:
https://www.quickapp.cn/doccenter/idepublicity

安装快应用开发环境,构建第一个快应用Hello World —— H5/小程序/Vue前端开发者必读

可根据自己的pc操作系统选择windows版或mac版。这里以mac版为例,在macos中安装时可能会有如下提示,先点击按钮“好”:
安装快应用开发环境,构建第一个快应用Hello World —— H5/小程序/Vue前端开发者必读

打开mac os“系统偏好设置”:
安装快应用开发环境,构建第一个快应用Hello World —— H5/小程序/Vue前端开发者必读

选择“安全性与隐私”:
安装快应用开发环境,构建第一个快应用Hello World —— H5/小程序/Vue前端开发者必读

在“通用”面板下点击“仍要打开”:
安装快应用开发环境,构建第一个快应用Hello World —— H5/小程序/Vue前端开发者必读

安装快应用开发环境,构建第一个快应用Hello World —— H5/小程序/Vue前端开发者必读

安装过程很傻瓜式,按提示继续即可:

安装快应用开发环境,构建第一个快应用Hello World —— H5/小程序/Vue前端开发者必读

安装快应用开发环境,构建第一个快应用Hello World —— H5/小程序/Vue前端开发者必读

安装快应用开发环境,构建第一个快应用Hello World —— H5/小程序/Vue前端开发者必读

安装快应用开发环境,构建第一个快应用Hello World —— H5/小程序/Vue前端开发者必读

安装快应用开发环境,构建第一个快应用Hello World —— H5/小程序/Vue前端开发者必读

安装快应用开发环境,构建第一个快应用Hello World —— H5/小程序/Vue前端开发者必读

安装快应用开发环境,构建第一个快应用Hello World —— H5/小程序/Vue前端开发者必读

安装快应用开发环境,构建第一个快应用Hello World —— H5/小程序/Vue前端开发者必读

联盟快应用ide安装成功。

打开ide,界面如下:
安装快应用开发环境,构建第一个快应用Hello World —— H5/小程序/Vue前端开发者必读

三、华为快应用ide安装

ide下载路径:
https://developer.huawei.com/consumer/cn/doc/development/tools-guides/quickapp-obtain-ide
安装快应用开发环境,构建第一个快应用Hello World —— H5/小程序/Vue前端开发者必读

可根据自己的pc操作系统选择windows版或mac版。这里以mac版为例:
先解压zip包:
安装快应用开发环境,构建第一个快应用Hello World —— H5/小程序/Vue前端开发者必读

双击上图中解压出来的dmg文件:
安装快应用开发环境,构建第一个快应用Hello World —— H5/小程序/Vue前端开发者必读

用鼠标将下图中ide拖拽到右边的应用文件夹中即可:

安装快应用开发环境,构建第一个快应用Hello World —— H5/小程序/Vue前端开发者必读

安装快应用开发环境,构建第一个快应用Hello World —— H5/小程序/Vue前端开发者必读

打开ide,界面如下:
安装快应用开发环境,构建第一个快应用Hello World —— H5/小程序/Vue前端开发者必读

四、安装node.js环境

下载路径:
安装快应用开发环境,构建第一个快应用Hello World —— H5/小程序/Vue前端开发者必读

这里以“macos 安装包”为例:
安装快应用开发环境,构建第一个快应用Hello World —— H5/小程序/Vue前端开发者必读

安装快应用开发环境,构建第一个快应用Hello World —— H5/小程序/Vue前端开发者必读

安装快应用开发环境,构建第一个快应用Hello World —— H5/小程序/Vue前端开发者必读

安装快应用开发环境,构建第一个快应用Hello World —— H5/小程序/Vue前端开发者必读

安装快应用开发环境,构建第一个快应用Hello World —— H5/小程序/Vue前端开发者必读

安装快应用开发环境,构建第一个快应用Hello World —— H5/小程序/Vue前端开发者必读

安装快应用开发环境,构建第一个快应用Hello World —— H5/小程序/Vue前端开发者必读

在终端中输入如下指令,查看版本:
安装快应用开发环境,构建第一个快应用Hello World —— H5/小程序/Vue前端开发者必读

tip:
第一次在快应用联盟ide中调试新项目时可能因为未安装less模块而报如下错误:
构建错误 module not found: error: can't resolve 'less-loader'
vue-cli 构建的项目默认是不支持 less 的,需要自己添加。
首选,安装 less 和 less-loader ,在项目目录下运行如下命令

npm install less less-loader --save-dev

五、激活手机开发者调试模式

以华为mate10 pro手机为例,示范如何激活手机开发者调试模式:
在手机设置中点击“关于手机”:
安装快应用开发环境,构建第一个快应用Hello World —— H5/小程序/Vue前端开发者必读

在“版本号”上连续快速点击多次,激活开发者模式:

安装快应用开发环境,构建第一个快应用Hello World —— H5/小程序/Vue前端开发者必读

回到手机设置面板,选择“系统和更新”:

安装快应用开发环境,构建第一个快应用Hello World —— H5/小程序/Vue前端开发者必读

选择“开发人员选项”:

安装快应用开发环境,构建第一个快应用Hello World —— H5/小程序/Vue前端开发者必读

点击“选择usb配置”,将默认的“仅充电”改为“mtp(多媒体传输)”:

安装快应用开发环境,构建第一个快应用Hello World —— H5/小程序/Vue前端开发者必读

安装快应用开发环境,构建第一个快应用Hello World —— H5/小程序/Vue前端开发者必读

打开usb调试开关:

安装快应用开发环境,构建第一个快应用Hello World —— H5/小程序/Vue前端开发者必读

六、手机端工具安装

1.联盟快应用开发手机端工具安装:

打开前面安装好的联盟快应用ide,在hap菜单中选择“更新手机环境”:

安装快应用开发环境,构建第一个快应用Hello World —— H5/小程序/Vue前端开发者必读

等待片刻,会弹出一个提示,点击“确定”:

安装快应用开发环境,构建第一个快应用Hello World —— H5/小程序/Vue前端开发者必读

在手机端授权安装引擎,安装好后如下:

安装快应用开发环境,构建第一个快应用Hello World —— H5/小程序/Vue前端开发者必读

2.华为快应用开发手机端工具安装:

安装依赖:
安装快应用开发环境,构建第一个快应用Hello World —— H5/小程序/Vue前端开发者必读

安装快应用开发环境,构建第一个快应用Hello World —— H5/小程序/Vue前端开发者必读

安装“快应用加载器”:

安装快应用开发环境,构建第一个快应用Hello World —— H5/小程序/Vue前端开发者必读

安装快应用开发环境,构建第一个快应用Hello World —— H5/小程序/Vue前端开发者必读

七、第一个快应用项目:hello world

以华为快应用ide为例:

安装快应用开发环境,构建第一个快应用Hello World —— H5/小程序/Vue前端开发者必读

如下所示,根据自己的情况,填写应用名称、rpk包名,选择存储路径、模板,点“确定”:

安装快应用开发环境,构建第一个快应用Hello World —— H5/小程序/Vue前端开发者必读

点击“运行”按钮(确保已根据“五、激活手机开发者调试模式”的方式连接好手机和电脑),看到手机手已运行了你的第一个快应用:

安装快应用开发环境,构建第一个快应用Hello World —— H5/小程序/Vue前端开发者必读

八、快应用高效开发相关资源

1.快应用ui组件库“h-ui”

目前全国最全快应用ui组件库“h-ui”,全面兼容快应用联盟和华为快应用!提供150+精品组件,包含:基础组件、文本组件、媒体组件、高阶组件、表单组件、数据组件、导航组件、代码组件、操作反馈、图表组件、高频场景、人工智能。

github开源:https://github.com/h-ui-quickapp/h-ui

2.hui开发文档

直接在快应用环境中体验hui各组件的表现,提供详尽的组件调用特性说明:
华为应用市场 > 快应用 > hui开发文档
oppo应用市场 > 快应用 > hui开发文档
小米应用市场 > 快应用 > hui开发文档(上架审核中)

扫码体验:
安装快应用开发环境,构建第一个快应用Hello World —— H5/小程序/Vue前端开发者必读

3.官方博客

4.公众号

快应用hui
安装快应用开发环境,构建第一个快应用Hello World —— H5/小程序/Vue前端开发者必读

5.教学视频

抖音号:quickapp
抖音名:快应用h-ui
安装快应用开发环境,构建第一个快应用Hello World —— H5/小程序/Vue前端开发者必读