您当前的位置：首页 >> 最新 >  >> 
微信小程序的ts模版项目中引入tdesign组件库
来源: 哔哩哔哩      时间：2023-04-04 12:21:40

1.新建ts模版的项目，这时项目详情 / 本地设置中，调试基础库默认值是：2.30.4，默认也不会勾选“将js编译成es5”，此时小程序的根目录在miniprogram文件夹


(资料图片)

2.cmd转入新项目的miniprogram文件夹，执行命令安装tdesign：

npm init -y

npm i tdesign-miniprogram -S --production

如果直接在项目根目录下安装tdesign，会报错：NPM packages not found. Please confirm npm packages which need to build are belong to `miniprogramRoot` directory

3.进入微信开发者工具，执行菜单：工具 / 构建npm

4.测试tdesign组件

①加入组件引用，修改miniprogram\pages\logs\logs.json

"usingComponents": {

"t-button": "tdesign-miniprogram/button/button"

}

②调用组件，修改miniprogram\pages\logs\logs.wxml

<view>

<t-button theme="primary" size="large" bindtap="onTabToIndex">转去首页</t-button>

</view>

③加入组件触发事件，修改miniprogram\pages\logs\logs.ts

onTabToIndex () {

wx.navigateTo({

url: '../index/index'

})

}

标签：

上一篇：每日头条!瑞金市气象台发布雷电黄色预警信号【III级/较重】

下一篇：最后一页

精彩推送

X 关闭

电视剧

X 关闭

电影

热播

推荐阅读