uni.app中HBuilderX的使用详情与相关问题

本文链接：https://blog.csdn.net/m0_73932496/article/details/131216859

前言

1.HBuilderX的安装

（1）下载相关网址

（2）相应版本选择

（3）启动成功

2.uniapp第一个目录的创建

(1)pages中vue.js文件的创建

(2)对vue.js在中的页面注册和页面公共css的修改

3.相关小插件的配置和下载

4.运行的配置和相关的路径

（1）首次运行页面

5.生命周期

6.页面跳转

前言提醒

当我们初次使用HBuilderX的时候，特别需要注意插件的下载和vue.js文件的注册

一、HBuilderX安装

（1）下载相关网址

HBuilderX官网下载地址：‘https://www.dcloud.io/hbuilderx.html’

（2）相应版本选择

选择正式版，可以下载Windows版和Mac OS版，其各有两个版本，分别是标准版和APP开发版。其中，标准版可直接用于Web开发、MarkDown、字处理场景、小程序等。如果开发App.则需要手动安装插件。App开发版预置开发App所需的插件，开箱即用。如果只是开发小程序和H5，则安装标准版即可。这里下载的是App开发版。

HBuilder X下载完成后即可安装，Windows版和Mac OS版的安装都很简单，按提示操作即可，

选择电脑匹配的版本下载即可：

（3）首次启动成功相关选择

可以选择自己喜欢的主题：绿柔（护眼主题）、雅蓝主题、酷黑主题。

可以选择自己习惯的快捷方式：

HBuilder X

VS Code

Sublime Text

IntelliJ Idea/Webstorm

Eclipse

2.uniapp第一个目录的创建

通过HBuilderX可视化界面创建第一个uni-app应用

点击右上角的文件然后选择新建（N），再右滑动鼠标选择项目。

点击创建项目后左边选择uni-app，在右边写入自己的项目名称再在右边第二栏的右边的浏览选择自己的目录文件，在中间选择自己需要的模板也可以搜索自己喜欢的模板，Vue版本根据自己的需求选择2或者3，最后点击创建。

将会得到

将会得到一下目录：

pages是页面组件、static是静态资源目录（图片/音视频）、App.vue是全局组件/根目录、index.html是首页入口、main.js是JS系统入口文件、manifest.json是App功能“清单”文件：定义图标、名称、Vue版本、pages.json是组册页面、配置标题栏、配置底部页标签栏。

最后：项目创建完成之后即可运行，打开项目的任意文件，如App.vue，选择“运行”-->"运行到浏览器“命令，选择浏览器，即可在浏览器中体验uni-app的H5版。

(1)pages中vue.js文件的创建

选择新建uni.app页面，填写自己需要的Vue文件名称，右边可以勾选创建同名目录根据自己的需求选择是否勾选，还可以选择自己需要的模板如：“scss”,要选择在pages.json中注册页可以自己去pages.json文件中自己进行注册，最后点击创建即可。

(2)对vue.js在中的页面注册和页面公共css的修改

注册代码如下：

"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
       {
           "path": "pages/index/index",
           "style": {
               "navigationBarTitleText": "uni-app"
           }
       }
   ,{
"path" : "pages/user/user",
"style" :
{
"navigationBarTitleText": "",
"enablePullDownRefresh": false
}

}
],

在"path" : 中一定需要写对路径。

"navigationBarTitleText": "",可以写入和修改本页面的导航名称。

页面公共css的修改代码如下：

"globalStyle": {
       "navigationBarTextStyle": "black",
       "navigationBarTitleText": "uni-app",
       "navigationBarBackgroundColor": "#F8F8F8",
       "backgroundColor": "#F8F8F8"
   },

"navigationBarTextStyle": "black",可以修改导航标题颜色，

"navigationBarTitleText": "uni-app",可以修改导航栏名称，

"navigationBarBackgroundColor": "#F8F8F8",可以修改导航栏颜色，

"backgroundColor": "#F8F8F8"：可以修改导航栏背景颜色，

3.相关小插件的配置和下载

在工具任菜单中的插件安装中下载相应的插件

4.运行的配置和相关的路径

在运行菜单栏中-->运行-->运行到浏览器-->配置Web服务器

5.应用生命周期

示例代码：

<script>
	// 只能在App.vue里监听应用的生命周期
	export default {
		onLaunch: function() {
			console.log('App Launch')
		},
		onShow: function() {
			console.log('App Show')
		},
		onHide: function() {
			console.log('App Hide')
		}
	}
</script>

注意

应用生命周期仅可在App.vue中监听，在其它页面监听无效。
以组合式 API 使用时，在 Vue2 和 Vue3 中存在一定区别，请分别参考：Vue2 组合式 API 使用文档和 Vue3 组合式 API 使用文档。
应用启动参数，可以在API uni.getLaunchOptionsSync获取，详见
onlaunch里进行页面跳转，如遇白屏报错，请参考onlaunch生命周期内navigateto跳转页面注意 - DCloud问答
App.vue 不能写模板
onPageNotFound 页面实际上已经打开了（比如通过分享卡片、小程序码）且发现页面不存在，才会触发，api 跳转不存在的页面不会触发（如 uni.navigateTo）

6.页面跳转

跳转tabbar页面，必须设置open-type="switchTab"
navigator-hover 默认为 {background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;}, <navigator> 的子节点背景色应为透明色。
navigator-open-type属性如果使用对应的值，则对应值的功能会高于对应跳转路径。
app-nvue 平台只有纯nvue项目（render为native）才支持 <navigator>。非render为native的情况下，nvue暂不支持navigator组件，请使用API跳转。
app下退出应用，Android平台可以使用plus.runtime.quit。iOS没有退出应用的概念。
uLink组件是navigator组件的增强版，样式上自带下划线，功能上支持打开在线网页、其他App的schema、mailto发邮件、tel打电话。
Vue3 项目因 SSR 需要，H5 端会在外层嵌套 a 标签

示例代码：

url有长度限制，太长的字符串会传递失败，可使用窗体通信、全局变量，或encodeURIComponent等多种方式解决，如下为encodeURIComponent示例：