前言
最近遇到一个特别闹心的事情，迭代抖音小程序时由于特殊原因，无法使用担保交易，需接入抖音 pay-button 交易按钮。
根据文档要求一顿操作猛如虎，哎哟我去，不对呀，我用的是 Uni-app，好在文档结尾处 Bug & Tip 中有提示：
对于部分开发者希望用 uniapp 或者 taro 等框架接入交易模版的情况，由于
pay-button是新增组件，框架暂未适配，因此需要使用原生组件混合的方式接入，请参考以下两个demo：uniapp-demo、taro-demo。
当我点击 uniapp-demo 查看示例时，代码不全，无从下手，百度翻了个底朝天，社区各种提问，石沉大海，不过终于发现了 交易系统2.0开发者文档（内测），文档还算比较细致，不过 Uni-app 接入交易系统，目前需要和抖音原生组件进行交互，当你满心欢喜做完这一切，结果还是不行，控制台会报错（不过这个是uni的问题了），过程很痛苦，接下来直接进入正题吧。
接入
检查 HBuilderX 版本
截止发文时间，在正式接入交易系统之前，我使用的是正式版本v3.6.4，接入交易系统会报错，大概就是说找不到对应的路由，后来我查看了 HBuilderX Alpha版本 更新日志，果然发现了猫腻，在 3.6.7.20221018-alpha 版本中发现一条更新日志：
字节跳动小程序平台 新增 支持使用小程序插件 详情
点击查看详情，和我问题一致，所以我就直接下载了这个 alpha 版本的 HBuilderX 来进行开发。
提示：如果你遇到这个问题时，3.6.7 版本已正式发布，则使用最新正式版本即可。
拷贝原生组件
当你下载了 uniapp-demo 之后，将示例项目文件中的 ttcomponents 目录整体复制一份到你自己的项目根目录中，然后找到 pages.json 文件，在你需要使用的页面中引入，如下所示：
{
"pages": [{
"path": "pages/course/details",
"style": {
"navigationBarTitleText": "课程详情",
"usingComponents": {
"zijie-pay-button": "/ttcomponents/DyPayButton/index"
}
}
},{
"path": "ext://microapp-trade-plugin/order-confirm"
},{
"path": "ext://microapp-trade-plugin/refund-apply"
},{
"path": "ext://microapp-trade-plugin/refund-detail"
}]
}
提示：
pages中的ext://3个路由也要配置进去。
使用组件
<zijie-pay-button></zijie-pay-button>
注意：
- 直接在需要用到的地方插入代码即可，无需引入
- 你可以修改默认按钮样式
编译！
每一次通过 HBuilderX 编译之后，你都需要做下面的处理。
1）在字节小程序开发者工具中找到 npm 模块，创建 package.json 文件。
在 package.json 文件中添加如下内容：
{
"ttPlugins": {
"dependencies": {
"microapp-trade-plugin": {
"version": "1.1.2",
"isDynamic": true
}
}
}
}
接着安装依赖即可，如下所示：
后续
其它相关配置，自行参照抖音开发者文档即可。
拓展
在提单页中，有一个「一键填写」的按钮，该按钮调用了小程序获取手机号的开放能力，根据文档示例要求，只需在 app.js 文件中挂在 getPhoneNumber 方法即可，在 Uni-app 中的挂在方式是在 App.vue 文件中挂在，具体如下：
