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

原创于 2024-12-25 20:15:10 发布 · 1.3k 阅读

22 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #notepad++ #小程序 #uni-app #css

使用HBuilderX 开发微信小程序的日志专栏收录该内容

6 篇文章

订阅专栏

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

这一篇的重点主要是自己设计了一个用在表单中的输入框，并注册了一个简单的自定义组件。其中关于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 中：

在这里插入图片描述

2024-12-24

添加了自己的输入框

我依葫芦画瓢，在自己的项目文件夹里创建了common文件夹，并添加了名为common.css的文件，用来存放全局可用的CSS。这样也许对统一UI风格有帮助。

在示例项目Hello uni-app中，它的App.vue是这样导入CSS样式的。

<style lang="scss">
	@import '@/uni_modules/uni-scss/index.scss';
	/* #ifndef APP-PLUS-NVUE */
	/* uni.css - 通用组件、模板样式库，可以当作一套ui库应用 */
	@import './common/uni.css';
	@import '@/static/customicons.css';
    /* ... */
</style>

@import可以全局导入CSS文件。

我想只使用我需要的CSS样式，因此我还不打算整体复制它的uni.css文件。

因此我只是参考了它的CSS写法，然后参考上面参考的小程序的界面做出了表单输入框（为了便于展示组件的范围，我给输入框组件填上了颜色）：

在这里插入图片描述

<!-- add.vue -->
<template>
	<view class="cm-padding-wrap cm-common-mt">
		<view class="cm-title">录入书籍信息</view>
		<view class="cm-form-item">
			<view class="input">
				<view class="title">书名</view><input placeholder="请输入书名"/>
			</view>
			<view class="input">
				<view class="title">作者</view><input placeholder="请输入作者"/>
			</view>
		</view>
	</view>
</template>

/* common.css */
/* 控制页面边距 */
.cm-padding-wrap{
	/* width:690rpx; */
	padding:0 30rpx;
}
.cm-common-mt{
	margin-top:30rpx;
}

/* 普通标题文本 */
.cm-title {
	font-size:32rpx;
	font-weight:500;
	padding:20rpx 0;
	line-height:1.5;
}

/* 表单项目 */
.cm-form-item{
	display:flex;
	flex-direction: column;
	width:100%;
	padding:10rpx 0;
}
/* 表单-输入框 */
.cm-form-input {
	display: flex;
	flex-direction: row;
	border-bottom: 1rpx solid #f8f8f8;
	font-size: 28rpx;
	padding: 25rpx 0;
	width: 100%;
}
/* 表单-输入框-标题 */
.cm-form-input .title {
	font-size: 30rpx;
	width: 20%;
}
/* 表单-输入框-输入框组件 */
.cm-form-input input {
	width: 80%;
/*	background-color: aqua;  这是我为了便于查看而填上的背景色 */
}

这个可以封装成一个自定义组件了。

尝试自定义输入框组件

我参考官网的这篇文档来注册Vue的自定义组件：

注册

在注册一个组件的时候，我们始终需要给它一个名字。定义组件名的方式有两种：

使用 kebab-case

当使用 kebab-case (短横线分隔命名) 定义一个组件时，你也必须在引用这个自定义元素时使用 kebab-case，例如 <my-component-name>。

使用 PascalCase

当使用 PascalCase (首字母大写命名) 定义一个组件时，你在引用这个自定义元素时两种命名法都可以使用。也就是说 <my-component-name> 和 <MyComponentName> 都是可接受的。

在uni-app工程根目录下的 components 目录，创建并存放自定义组件：
	│─components            	符合vue组件规范的uni-app组件目录
	│  └─componentA         	符合‘components/组件名称/组件名称.vue’目录结构，easycom方式可直接使用组件
	│  		└─componentA.vue    可复用的componentA组件
	│  └─component-a.vue      可复用的component-a组件

我在根目录下新建了components文件夹，并右击选择新建组件cm-input：

在这里插入图片描述

诶，原来那个“easycom”那么好用吗？

通过uni-app的easycom： 将组件引入精简为一步。只要组件安装在项目的 components 目录下，并符合 components/组件名称/组件名称.vue 目录结构。就可以不用引用、注册，直接在页面中使用。
	
	<template>
		<view>
			<uni-badge text="1"></uni-badge>
		</view>
	</template>
	<script>
		// 这里不用import引入，也不需要在components内注册uni-badge组件。template里就可以直接用
		export default {
			data() {
				return {
				}
			}
		}
	</script>
复制代码

easycom是自动开启的，不需要手动开启，有需求时可以在 pages.json 的 easycom 节点进行个性化设置，详见。
不管components目录下安装了多少组件，easycom打包后会自动剔除没有使用的组件，对组件库的使用尤为友好。

那我要勾选“创建同名目录”复选框！

在这里插入图片描述

我写了这样一个自定义组件：

<template>
	<view class="cm-form-input">
		<!-- 注意这部分数据绑定的写法。刚从微信小程序过来，一直用双层花括号的写法，结果折腾了好久... -->
         <!-- input的palceholder如果要绑定动态数据，需要使用v-bind，也就是前面加冒号的写法 -->
		<view class="title">{{title}}</view><input :placeholder="placeholder"/>
	</view>
</template>

<script>
	export default {
		name:"cm-input",
		data() {
			return {
				
			};
		},
		props: {
			title: {
				type: String,
				default: ''
			},
			placeholder: {
				type: String,
				default: ''
			}
		}
	}
</script>

<style>

</style>

这样代码就简洁多了~

<!-- 我使用的是传入静态prop的写法 -->
<cm-input title="书名" placeholder="请输入书名"></cm-input>
<cm-input title="作者" placeholder="请输入作者"></cm-input>

之后，我还要根据我的需要对这个自定义输入框进行扩展。