使用HBuilderX 开发微信小程序的日志（1）

前言：这篇博客是我的工作日志，我正在学习使用HX开发微信小程序。我之前使用微信开发者工具开发的项目写得太烂了，云开发环境还要钱，所以我打算把它迁移到uniapp上。

我的“工作日志”就是把我开发过程中的主要操作记录下来，方便排查错误。我觉得这是比较适合我的一种学习方式。将其发到博客上也是希望能听到大家的批评——毕竟我还是一个学生。

背景：我已经搭建好了使用HX开发微信小程序的环境。在官网下载HBuilderX（HX）后，新建项目，点击左上角的调试按钮，使用微信开发者工具调试项目。期间可能会有启动失败的问题，但是我没有进行记录，之后也许可以补上。

目前可以正常使用微信开发者工具对小程序进行调试。添加appid后，就可以正常使用真机调试功能了。

尝试添加vant组件库

Vant4官网

Vant框架不仅有微信小程序版本，还有可用于vue3的版本。uniapp使用的正是vue3。

我调出H Builder X的终端，使用npm i vant命令安装Vant。

我选择使用常规方法导入Vant组件：

全局注册Vant组件的方式如下：

尝试添加微信原生tabbar

我这回只想保留一个tab层，取消了入口页面。我在旧程序中单独使用一个entrance页面来检测用户身份，这使得用户在进入小程序时会有一个较长的白屏时间。在新程序中，我打算让每个用户都能直接进入小程序主页，管理员可以在个人主页通过特殊的方式验证解锁管理员功能。

计划的页面层级（不会打制表符，这种json式的格式希望大家能看明白）：

Tab页面: {
	home: {
		donation,
	},
	store: {
		search,
		order,
	},
	user: {
		admin: {
			add,
			storage_manager,
			admin_manager,
			order_manager
		}
	},
}

我打算使用原生tabbar。这需要在page.json中进行配置：

出现了页面未定义的问题：

也许HX中的页面不会在更新page.json中的pages数组后自动生成？（微信开发者工具是可以自动生成页面的）

HX中，我完全可以在文件资源管理器上创建目录和页面：

之后它会自动更新pages数组：

这好像和微信小程序是反着来的（？）

配置成功！

目前page.json的配置如下：

{
   
   
	"pages": [