前言:这篇博客是我的工作日志,我正在学习使用HX开发微信小程序。我之前使用微信开发者工具开发的项目写得太烂了,云开发环境还要钱,所以我打算把它迁移到uniapp上。
我的“工作日志”就是把我开发过程中的主要操作记录下来,方便排查错误。我觉得这是比较适合我的一种学习方式。将其发到博客上也是希望能听到大家的批评——毕竟我还是一个学生。
背景:我已经搭建好了使用HX开发微信小程序的环境。在官网下载HBuilderX(HX)后,新建项目,点击左上角的调试按钮,使用微信开发者工具调试项目。期间可能会有启动失败的问题,但是我没有进行记录,之后也许可以补上。
目前可以正常使用微信开发者工具对小程序进行调试。添加appid后,就可以正常使用真机调试功能了。
尝试添加vant组件库
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": [