绥化建设网站,网站开发报价明细,如何加入wordpress,做网站的书籍介绍
TDesign 是腾讯官方出品的一款微信小程序组件库。本文介绍如何在新建ts空白模板下引入TDesign库
步骤
新建一个空白项目#xff0c;这里可以选择TS-基础模板 新建项目目录结构如图所示#xff1a; 注意这里其实小程序的文件都存放在miniprogram文件夹下#xff0c;…介绍
TDesign 是腾讯官方出品的一款微信小程序组件库。本文介绍如何在新建ts空白模板下引入TDesign库
步骤
新建一个空白项目这里可以选择TS-基础模板 新建项目目录结构如图所示 注意这里其实小程序的文件都存放在miniprogram文件夹下因此我们后续安装npm包时需要进入miniprogram文件夹中 如果直接在当前文件夹下安装npm包后续构建npm包会报无法找到npm包的错误 NPM packages not found. Please confirm npm packages which need to build are belong to miniprogramRoot directory. Or you may edit project.config.json’s packNpmManually and packNpmRelationList 此处的miniprogramRoot目录应该就是指miniprogram文件夹了
新建成功后我们在开发工具右下角选择终端新建一个终端输入cd miniprogram输入npm init指令
然后一直回车跳过接着输入安装指令npm i tdesign-miniprogram -S --production进度条快结束时会卡一会过一会会安装成功
在微信开发者工具中对 npm 进行构建左上角选择工具 - 构建 npm此时直接构建成功并不需要再修改project.config.json文件的配置 将 app.json 中的 “style”: “v2” 移除。
使用
我们可以直接通过全局引入的方式在app.json文件中引入想要的组件 usingComponents: {t-button: tdesign-miniprogram/button/button},然后在页面中使用
viewt-button themeprimary按钮/t-button/view按钮效果如下图所示 其他组件也是类似的引入方法
总结
在第一次引入TDesign组件库时遇到最大的疑惑是不知该何时引入组件库----------新建一个小程序模板后进行引入构建npm一直失败------------------应该在minprogram文件夹下安装npm包其他的官方都有相关的教程按照步骤即可。
