使用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": [
	{
		"path" : "pages/tabbar/home/home",
		"style" : 
		{
			"navigationBarTitleText" : ""
		}
	},
	{
		"path" : "pages/tabbar/store/store",
		"style" : 
		{
			"navigationBarTitleText" : ""
		}
	}],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
	},
	"tabBar": {
		"color": "#7A7E83",
		"selectedColor": "#3cc51f",
		"borderStyle": "black",
		"backgroundColor": "#ffffff",
		"list": [{
			"pagePath": "pages/tabbar/home/home",
			"text": "组件"
		}, {
			"pagePath": "pages/tabbar/store/store",
			"text": "接口"
		}]
	},
	"uniIdRouter": {}
}

尝试自定义页面底部Tabbar的样式

我可以直接在page.json中配置Tabbar的文字色彩和图标。

我希望在小程序中使用的色调：

c6b89e：顶部导航栏（卡其色？主题色）

646566：图标线框颜色（深色）

0078ff：蓝色，用于强调图标（后来没使用）

我在uniapp文档上找到了tabbar的默认高度：50px

tabbar 的默认高度，在不同平台不一样。App端的默认高度在HBuilderX 2.3.4起从56px调整为50px，与H5端统一。

我想使用vant的图标，于是在main.js中全局注册了Icon组件：

// #ifdef VUE3
import { createSSRApp } from 'vue'

import { Icon } from 'vant';

export function createApp() {
  const app = createSSRApp(App)
  return {
    app
  }
}
// #endif

然后报错了：

20:08:17.721 ../../../../../D:/文档/HBuilderProjects/2haoyuedushi/node_modules/@vant/use/dist/index.esm.mjs (79:2): "isVNode" is not exported by "node_modules/@dcloudio/uni-mp-vue/dist/vue.runtime.esm.js", imported by "../../../../../D:/文档/HBuilderProjects/2haoyuedushi/node_modules/@vant/use/dist/index.esm.mjs".
20:08:17.762 at node_modules/@vant/use/dist/index.esm.mjs:79:2
20:08:17.819   77: // src/useRelation/useChildren.ts
20:08:17.863   78: import {
20:08:17.899   79:   isVNode,
20:08:17.926         ^
20:08:17.966   80:   provide,
20:08:18.027   81:   reactive,

改用uni-ui组件库

我又去翻了翻uniapp的文档，决定停止使用vant组件库，改用uni-ui组件库。

可以在这个网站直接下载uni-ui并导入HX

如果你没有创建uni-ui项目模板，也可以在你的工程里，通过 uni_modules 单独安装需要的某个组件。下表为uni-ui的扩展组件清单，点击每个组件在详情页面可以导入组件到项目下，导入后直接使用即可，无需import和注册。

呃，但是要在pages.json下引用uni-ui的icon的路径好像更麻烦……

发现了vant使用有问题的原因

uniapp的文档中有如下内容：

vant是分web版和weapp版的，千万别搞混 vant的web版操作了dom，所以只能用于web端；而vant weapp是微信小程序组件规范，可以用于微信、App、H5；vant自身并没有提供全端可用的无dom vue组件。

因此，我应该安装vant weapp才对（）

我想先卸载Vant4。

使用npm list列出已安装包：

PS D:\文档\HBuilderProjects\2haoyuedushi> npm list
2haoyuedushi@ D:\文档\HBuilderProjects\2haoyuedushi
+-- @vant/weapp@1.11.7
`-- vant@4.9.10

然后使用npm uninstall vant卸载：

PS D:\文档\HBuilderProjects\2haoyuedushi> npm uninstall vant       

removed 26 packages, and audited 2 packages in 1s

found 0 vulnerabilities

然后就OK了：

PS D:\文档\HBuilderProjects\2haoyuedushi> npm list
2haoyuedushi@ D:\文档\HBuilderProjects\2haoyuedushi
`-- @vant/weapp@1.11.7

呃，虽然这样，我觉得我还是不用vant了吧（）

（还是卸载完了）

尝试使用阿里巴巴图标库

我在搜索别人如何处理我现在这种情况，搜到了这个方案：

uniapp tabBar使用icon图标-罗分明网络博客

唉，还要考虑图标商用的问题。不想干了（）

要不还是custom-tabbar吧……

尝试通过uniicon的ttf文件使用图标

没去做。

最终下载并使用了Iconpark图标

最后，我下载了这个图标素材库里的几个图标，使用路径引用了这些图标。

代码是这样的：

"tabBar": {
	"color": "#7A7E83",
	"selectedColor": "#2c2c2c",
	"borderStyle": "black",
	"backgroundColor": "#ffffff",
	"list": [{
		"pagePath": "pages/tabbar/home/home",
		"iconPath": "static/icons/home.png",
		"selectedIconPath": "static/icons/home-filled.png",
		"text": "阅读室"
	}, {
		"pagePath": "pages/tabbar/store/store",
		"iconPath": "static/icons/bookshelf.png",
		"selectedIconPath": "static/icons/bookshelf-filled.png",
		"text": "书架"
	}, {
		"pagePath": "pages/tabbar/user/user",
		"iconPath": "static/icons/me.png",
		"selectedIconPath": "static/icons/me-filled.png",
		"text": "用户"
	}]
},

其中，下载的组件中没有“me-filled.png”，这是我自己在“me.png”的基础上修改的。

iconfont官网上有一个“素材版权说明”：

我不知道要不要联系作者。虽然我并没有将其用于商业用途。我要开发的小程序是公益组织的。

我使用的图标并不是阿里图标库原生的，它的真正作者应该是Iconpark

这是Iconpark官网文档的说明：

看起来似乎我应该不会涉及版权问题了……

现在我的页面是这样的：