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

最新推荐文章于 2025-03-21 11:26:18 发布

world_endless

最新推荐文章于 2025-03-21 11:26:18 发布

阅读量1k

点赞数 30

分类专栏：使用HBuilderX 开发微信小程序的日志文章标签：微信小程序 notepad++ 小程序 uni-app css

本文链接：https://blog.csdn.net/world_endless/article/details/144727117

版权

内容简介：这是我用来记录自己折腾的过程，方便排查错误，总结经验的日志。由于我本人还是个“菜鸟”，其中能作为教程的地方并不多，可能没办法给有需要的人提供参考。还是欢迎大佬提出建议！

这一篇的重点主要是自己设计了一个用在表单中的输入框，并注册了一个简单的自定义组件。其中关于CSS的组织使用部分可能是我自我感觉比较良好的。

2024-12-18

添加了标题导航栏的文字

"pages": [
{
	"path" : "pages/tabbar/home/home",
	"style" : 
	{
		"navigationBarTitleText" : "阅读室"
	}
},
{
	"path" : "pages/tabbar/store/store",
	"style" : 
	{
		"navigationBarTitleText" : "书架"
	}
},
{
	"path" : "pages/tabbar/user/user",
	"style" : 
	{
		"navigationBarTitleText" : "用户"
	}
}],

开始设计add（书籍录入）界面

我将page.json中add页面的数据移动到pages数组的首位，方便每次运行调试都能直接打开此页面。

我首先想添加一个“扫码添加”按钮，可以尝试通过uni-grid组件实现一个方形的按钮。

在使用uni-grid的时候，微信开发者工具会出现不渲染uni-grid组件的情况。尝试关闭后重新调试，才恢复正常。

uni-grid相比vant中的grid，有保持正方形的特点。看来我想做的方形按钮不太方便啊。

我将uni-gid组件中的square属性设为false，现在可以显示长方形了。

唉，要是能直接使用方形的按钮组件就好了。试试看。

我直接使用了白色的默认按钮：

<button type="default">扫码添加</button>

看上去还挺好，甚至连margin都不用，因为看不出来（）：

在这里插入图片描述

我还需要添加根据ISBN搜索书籍的搜索框，这可以使用uni-search-bar。每次导入一个新组件，都要重新关闭和开启一次微信开发者工具。

算了，一点都不好看。我可以参考下面这个小程序的界面：
在这里插入图片描述

2024-12-21

参考模板项目Hello uni-app的CSS写法

我要实现上面的表单格式，又不想自己写CSS（毕竟写得一点都不好）。所以我创建了HX的模板项目Hello uni-app。（还有个叫Hello uni-app x的东西，我还不了解，先不折腾了。)

尝试调试运行Hello uni-app，报错了：

11:49:13.350 项目 'Hello uni-app' 编译成功。前端运行日志，请另行在小程序开发工具的控制台查看。
11:49:13.366 ready in 9270ms.
11:49:13.377 正在启动微信开发者工具...
11:49:14.059 [微信小程序开发者工具] - initialize
11:49:14.076 [微信小程序开发者工具]
11:49:14.091 [微信小程序开发者工具] × #initialize-error: Error: listen EACCES: permission denied 127.0.0.1:3799
11:49:14.105 [微信小程序开发者工具]
11:49:14.122 微信开发者工具打开项目失败，请参阅启动日志！
11:49:14.136 注：
11:49:14.148 1. 如果微信开发者工具已打开，关闭并重试
11:49:14.161 2. 请将微信开发者工具升级到最新版本！

手动启动一次微信开发者工具，再重新调试就行了。

找到了表单页面的路径，不过它把CSS写到哪里去了？

找到了，在/common/uni.css 中：