使用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数组:

在这里插入图片描述

这好像和微信小程序是反着来的(?)

配置成功!

image-20241218000853996

目前page.json的配置如下:

{
   
   
	"pages": [
	
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值