目前微信小程序版处于 Alpha 阶段,快速迭代中,请留意版本变化。
首先我们要从 GitHub 下载最新的源码包。下载完之后解压进行安装依赖和编译(npm i && npm run build
)。
编译完成后会新增个 miniprogram_dist
目录,把里面的内容全部拷贝到 uniapp 项目的 wxcomponents
目录(需要新建)。
现在我们要开始使用了,组件目前好像只能通过全局注册的方式来引入,不过我们要先用编辑器把 tdesign-miniprogram/
全局替换成 /wxcomponents/
。
page.json
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
| { "pages": [ { "path": "pages/index/index", "style": { "navigationStyle": "custom" } } ], "globalStyle": { "usingComponents": { "t-navbar": "/wxcomponents/navbar/navbar", "t-steps": "/wxcomponents/steps/steps", "t-step": "/wxcomponents/steps/step-item" } } }
|
pages/index/index.vue
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27
| <template> <view class="container"> <t-navbar :title="title" t-class-title="nav-title" /> <t-steps current="1" readonly="true" direction="vertical"> <t-step title="已完成步骤"> <view slot="content">可自定义此处内容</view> </t-step> <t-step title="当前步骤"> <view slot="content">可自定义此处内容</view> </t-step> <t-step title="未完成步骤"> <view slot="content">可自定义此处内容</view> </t-step> </t-steps> </view> </template>
<script> export default { data() { return { title: 'Hello TDesign' } }, } </script>
|