微信小程序初次运行项目失败
上述为初次运行小程序项目失败如图所示。
我们发现tdesign-miniprogram没有,可以通过下面的方法进行创建:
要通过npm创建并使用tdesign-miniprogram
组件库,你可以按照以下步骤操作:
初始化npm:首先,确保你的微信小程序项目根目录中有一个
package.json
文件。如果没有,可以通过执行命令npm init -y
来创建一个。安装组件库:在项目根目录下执行以下命令来安装
tdesign-miniprogram
组件库:npm i tdesign-miniprogram -S --production
这条命令会将组件库安装为项目的一个依赖项,并且由于使用了
--production
标志,所以只会安装生产环境需要的依赖项。构建npm:安装完成后,需要在微信开发者工具中构建npm。这可以通过点击开发者工具菜单栏中的“工具” -> “构建 npm”来完成。
修改配置文件:在
JSONproject.config.json
文件中补充packNpmManually
和packNpmRelationList
配置项,以确保npm包能被正确构建和引用。具体配置如下:复制
{"packNpmManually": true,"packNpmRelationList": [{"packageJsonPath": "./package.json","miniprogramNpmDistDir": "./miniprogram/"}] }
使用组件:在需要使用组件的页面的
JSONJSON
文件中引入对应的自定义组件。例如,使用按钮组件的代码如下:复制
{"usingComponents": {"t-button": "tdesign-miniprogram/button/button"} }
然后你就可以在
.wxml
文件中直接使用该组件了。预览组件:在开发者工具中预览组件效果,确保一切正常工作。
请注意,构建成功后需要勾选“将 JS 编译成 ES5”,以确保兼容性。此外,最低基础库版本要求为 ^2.6.5
或更高。