海峡电视网

导航

当前位置 : 首页 > 最新 > 正文 > 

微信小程序的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 关闭

推荐

Copyright ©  2015-2022 海峡电视网版权所有  备案号：皖ICP备2022009963号-10   联系邮箱：396 029 142 @qq.com