1.2.1 HBuildX的介绍
HBuildX也是DCloud开发的一款编辑器,和uni-app是同一个公司开发的。可想而知,HBuildX对uni-appa支持程度极高,因此我们也就选用HbuildX作为uni-app开发的主编辑器。
1.2.2 安装HbuildX(上篇文章详情安装)
- 官网下载:https://www.dcloud.io/hbuilderx.html 选择APP开发版
- 解压后即可使用
- 安装插件:工具=>插件安装(uni-app(vue2)编译、uni-app(vue3)编译、scss/sass编译)
1.2.3 创建第一个uni-app
-
启动HbuildX,文件=>新建=>项目=>选择uni-app=>填写项目名,项目路径=>选择项目模板:uni-ui项目=>点击创建
-
项目结构
|-- components uni-app组件目录 |-- pages 页面目录 |-- static 存放应用引用的本地静态资源(如图片、视频等)的目录,注意:静态资源只能存放于此 |-- main.js Vue入口文件 |-- App.vue 应用全局配置文件 |-- manifest.json 配置应用名,打包版本,appid,logo等打包信息的配置文件 |-- pages.json 配置路由,导航条,选项卡等页面信息文件 |-- index.html 适配vue3 |-- uni.scss uni-app内置的常用样式变量
1.2.4 运行
运行到浏览器
-
运行到chrome浏览器:进入到uni-app=>运行=>运行到浏览器=>运行到chrome浏览器
-
运行到内置浏览器:安装“内置浏览器插件”=>运行=>运行到内置浏览器
运行到微信小程序
-
安装微信开发者工具,地址:https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
-
打开服务端口:启动微信开发者工具,点击设置图标=>安全=>打开服务端口
-
配置微信小程序路径:打开HbuildX,点击运行=>运行到小程序模拟器=>运行设置=>找到小程序运行配置下的微信开发者工具路径进行配置
-
运行:打开HbuildX,进入项目,点击运行=>运行到小程序模拟器=>微信开发者工具=>微信小程序会自动打开并运行项目
运行到安卓手机
- 将手机通过数据线连接到计算机
- 将手机设置为USB调试模式,不同型号手机设置方式不同,大家可以去搜索一下
- 运行:打开HBuildX,进入项目,单击运行=>运行到手机或模拟器=>运行-设备:Android-*****
- 运行后,手机会安装HBuilder应用,安装完成后,就可以预览了。
运行到苹果手机
- Windows电脑连接苹果手机,要先安装iTunes,地址:https://support.apple.com/downloads/itunes
- 将手机用数据线连接到电脑=>选择“信任“。
- 打开HBuildX,进入项目,单击运行=>手机运行=>选择iphone设备,等待编译完成,就可以预览了。
1.3 uni-app打包
我们将使用HBuildX的云打包功能生成安装包,并且将生成的安装包发布至公网,供用户下载安装。
1.3.1 打包
-
打开HBuildX,单击发行=>原生App=>云打包
-
登录HBuilder账号,并完成实名认证,实名认证地址:https://dev.dcloud.net.cn/user/profile
-
配置打包选项,使用公共测试证书
-
使用安心打包,会提示安装插件,点击安装。
-
安装完成后,点击打包,等待打包完成。
-
打包完成后,控制台会返回安装包目录,进入目录就能看到安装包了,将安装包发送至手机,就可安装使用了。(*注:等待的时候不要关闭终端)
1.3.2 发布
生成下载二维码
打包完成后,点击[一键上传到uniCloud(免费cdn、长期稳定)],新建阿里云服务空间,创建完成后,选择服务空间,就可进行上传。上传完成后,通过二维码生成器,将下载链接生成二维码,即可分享给朋友进行下载。( 二维码生成器:https://cli.im/ )
发布到各大应用平台
由于每个平台发布规则都不太相同,这里就不为大家一一介绍了,这有篇文章说的很详细,大家有需要可以查阅一下。https://zhuanlan.zhihu.com/p/148957563