目前微信小程序版处于 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>
|
