欢迎光临散文网 会员登陆 & 注册

微信小程序的ts模版项目中引入tdesign组件库

2023-04-04 12:11 作者:飞天蜗牛狼  | 我要投稿

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'

    })

  }


微信小程序的ts模版项目中引入tdesign组件库的评论 (共 条)

分享到微博请遵守国家法律