项目使用小程序官方
typescript基础模板
一. 初始化项目
二. 安装小程序UI组件
npm i tdesign-miniprogram -S --production
三. 修改 app.json
将 app.json 中的 "style": "v2" 移除。
因为 该配置 表示启用新版组件样式,将会导致 TDesign 的组件样式错乱。
四. 修改 tsconfig.json
如果使用typescript开发,需要修改tsconfig.json指定paths
{
"paths": {
"tdesign-miniprogram/*":["./miniprogram/miniprogram_npm/tdesign-miniprogram/*"]
}
}
五. 修改project.config.json
tip:小程序UI官网没有介绍,需要修改如下配置,
miniprogramNpmDistDir的miniprogram为小程序文件的目录,初始化创建的时候自动生成的
在 project.config.json 新增如下配置
{
"setting":{
...
"packNpmManually": true,
"packNpmRelationList": [
{
"packageJsonPath": "./package.json",
"miniprogramNpmDistDir": "./miniprogram/"
}
],
}
}
六. 构建npm
点击开发者工具中的菜单栏:工具 --> 构建 npm
执行成功之后目录中会生成miniprogram_npm 目录,既是对应的对应的package.json下npm包
七. 使用组件
以按钮组件为例,只需要在 JSON 文件中引入按钮对应的自定义组件即可
{
"usingComponents": {
"t-button": "tdesign-miniprogram/button/button"
}
}
接着就可以在 wxml 中直接使用组件
<t-button type="primary">按钮</t-button>