更新记录

0.0.1（2023-08-30）

抖音交易系统组件 pay-button 原生组件封装

平台兼容性

小程序自定义组件的通用使用方式详见：uni-app中使用小程序自定义组件教程

1、根目录新建 vue.config.js

const UniappToGroup = require('uniapp-to-group')
module.exports = {
    configureWebpack: {
        plugins: [
            new UniappToGroup({
                // 对应 package.json 中引入插件步骤
                package: {
                    'ttPlugins': {
                        'dependencies': {
                            // 注册交易模版插件
                            'microapp-trade-plugin': {
                                'version': '1.0.0',
                                'isDynamic': true
                            }
                        }
                    }
                }, 
                 // app 中可以是任何字段，插件会将字段和app.json对比，有就合并字段，没有就添加字段
                 //合并字段 目前只处理 Array 和 Object 类型(注：[]和{}才会合并， null 类型不会合并)
                 // Object 类型字段合并，在key相同的情况会覆盖value
                 // Array 类型合并 是将两个数组合并 
                app: {
                    'pages': [
                        // 下单页
                        "ext://microapp-trade-plugin/order-confirm",
                        // 退款申请页
                        "ext://microapp-trade-plugin/refund-apply",
                        // 退款详情页
                        "ext://microapp-trade-plugin/refund-detail"
                    ]
                }
            })
        ]
    }
} 

2、根目录运行命令 npm install uniapp-to-group

3、根目录新建 package.json 文件

{
    "ttPlugins": {
        "dependencies": {
            "microapp-trade-plugin": {
                "version": "2.0.0",
                "isDynamic": true
            }
        }
    },
    "dependencies": {
        "uniapp-to-group": "^2.0.0"
    }
}

4、在pages.json中引用组件

{
    "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
        {
            "path": "pages/index/index",
            "style": {
                "navigationBarTitleText": "uni-app",
                "usingComponents": {
                    "dy-pay-button": "/ttcomponents/pay-button/pay-button"
                }
            }
        }
    ] 
}

5、使用组件

<dy-pay-button :order="order"></dy-pay-button>

6、数据结构

order: {
    "orderId": "219498**************2192",
    "orderStatus": 1,
    "applyRefund": {
    "orderId": 29,
    "prod": false,
    "signature": "7fb*****************101de",
    mOrderList": [{
    "itemOrderId": "ots72***************36951"
    }]
  }
}

7、因无法上传ttcomponents文件名的插件包，使用时间需将将wxcomponents文件名改成ttcomponents