注: 以下の方法は Hbuilder でビルドされたプロジェクトです.pay-button新しいコンポーネントのため、フレームワークはまだ適応されていないため、ネイティブ コンポーネントと混合して接続する必要があります。
Hbuilder を使用して新しいプロジェクトを作成した後
1. ルート ディレクトリに新しい vue.config.js ファイルを作成します。
// vue.config.js
const UniappToGroup = require('uniapp-to-group')
module.exports = { configureWebpack: { plugins: [ new UniappToGroup({ // package.json に対応 import plugin step package: { 'ttPlugins ': { 'dependencies': { // トレーディング テンプレート プラグインを登録します 'microapp-trade-plugin': { 'version': '1.0.0', 'isDynamic': true } } }
},
/**
* app は任意のフィールドにすることができます。プラグインはフィールドを app.json と比較し、フィールドがあればそれをマージし、なければフィールドを追加します * マージ フィールドは現在、配列のみを処理し
、オブジェクト型 (注: [] と {} はマージされ、null 型はマージされません)
* オブジェクト型フィールドのマージ、同じキーの場合は値が上書きされます
* 配列型のマージは 2 つの配列をマージします
*/
// #ifdef MP-TOUTIAO
app: { 'pages': [ // 注文ページ "ext://microapp-trade-plugin/order-confirm", // 返金申請ページ "ext://microapp-trade-plugin/refund" -apply", // 払い戻しの詳細ページ
"ext://microapp-trade-plugin/refund-detail"
]
},
// #endif
})
]
}
}
2、npm install uniapp-to-group -D
3. コンポーネントのインポート
次のように、新しい ttcomponents フォルダーを作成します。
index.js
Component({ プロパティ: { // コンポーネントの使用モード 1: 順序付き 2: 順序なし mode: { type: Number, value: 2, }, // 注文されたシーンで分割 (モード = 1) 注文ステータス0: 支払いを続行する 1: 払い戻しを申請する 2: 払い戻しが進行中 3: 払い戻しが成功した 4: 払い戻しが失敗した orderstatus: { type: Number, value: 0, }, // デベロッパー注文システムの払い戻し注文番号。返金の詳細を表示する refundid: { type: String, value: "", }, // 支払いを継続して返金を申請するために使用される開発者の注文システムのトランザクション注文番号 orderdingdan: { type: String, value: " ", }, // 製品 ID のモードが 2 の場合、この属性は goodsId を渡す必要があります: { type: String,
value: "",
},
extension: { type: String, value: "", }, source: { type: String, value: "", }, // 集合体class名 classname: { type: String, value: " ", }, hbprice: { type: String, value: "", }, kcid: { type: String, value: "", }, }, data: { extension: '', // 达人id source: ' ', // 购买来源 hbprice: '',// 価格 kcid: '', // コース ID
orderdingdan: '',
goodsId: '',
},
methods: { // 製品情報を取得する getGoodsInfo(goodsId, extension, source) { return new Promise(resolve => { // ここで開発者は製品データをリクエストできます, 製品情報を取得します / / 次に、製品情報を解決関数に渡します resolve({ minLimits: 1, maxLimits: 1, dateRule: 'Available from Monday to Sunday', validation: { phoneNumber: { required: false // 電話番号は必要ですか? } } , // 開発者はパラメータを透過的に渡し、JSON.stringify 処理はサーバーへのアップロード時にエクストラで実行されます
extra: { extension: this.data.extension, source: this.data.source, } }); }) }, // onError(e) は、 コンポーネントが例外を渡し、コンポーネント内で例外が発生したときにトリガーされます。 { const { errNo, errMsg } = e.detail; console.log("errNo", errNo, "errMsg", errMsg); if (errNo === 21514) { tt.showToast({ title: "コースはavailable", // コンテンツ アイコン : "none", // アイコン }); } else if (errNo === 21513) { tt.showToast({ title: "Getting", // コンテンツ アイコン: "なし", // アイコン
});
} else if (errNo === 21529) { tt.showToast({ title: "注文情報を取得するための払い戻しの申請に失敗しました。サーバー パラメータの検証に失敗しました", // content icon : "none", // icon }); } } , onSuccess(e){ console.log(e, 'success'); }, // 支払いコールバック onPay(options) { const { status, orderId, outOrderNo, result } = options.detail; if ( status === 'success') { const { code } = result; if (code === 0) { // 支払いが成功した tt.switchTab({ url: 'usr://pages/kecheng/kecheng'
})
console.log('支払い成功')
} else { // 支払い失敗 (タイムアウト、キャンセル、クローズ) tt.navigateTo({ url:'usr://pages/orderfail/orderfail?coupon_price=' + this.data .hbprice + '&course_id=' + this.data.kcid + '&id=' + options.detail.outOrderNo }) tt.showToast({ title: "支払いに失敗しました", // コンテンツ アイコン: "none", // アイコン }); } } else { const { errMsg } = 結果; } // tt.navigateBack(); },
// フロントエンド テンプレートで注文するにはユーザー ログインが必要なため、ここでログインを完了するか、設定を開いて対応する権限を付与するようユーザーに通知することをお勧めします userLogin(event) { console.log("place order
" , event); return new Promise( (resolve) => { tt.login({ success() { // ユーザーが正常にログインして情報を取得したら、resolve 関数を呼び出して注文ページにジャンプ resolve(); } , fail() { // ユーザーがログインに失敗し、単一のページにジャンプして失敗した reject(); } }); }); }, // 払い戻しのコールバック handleRefund(event) { const { status, result } = イベントの詳細;
if (status === 'success') { const {refundId, outRefundNo } = 結果; console.log(result, '払い戻し成功') } else { const { errMsg } = 結果; console.log(result, '払い戻し支払い失敗しました') } } }, });
index.json
{ "コンポーネント": true, "usingComponents": {} }
index.ttml
<pay-button
mode="{ {mode}}"
biz-line="{ {2}}"
goods-id="{ {goodsId}}"
goods-type="{ {1}}"
order-status= "{ {orderstatus}}"
reduction-id="{ {refundid}}"
order-id="{ {orderdingdan}}"
marketing-ready="{ {true}}"
bind:getgoodsinfo="getGoodsInfo"
bind:placeorder ="userLogin"
bind:pay="onPay"
bind:error="onError"
bind:refund="handleRefund"
class="{ {クラス名}}"
/>
index.ttss
.xiaozujian { 幅: 580rpx; 高さ: 103rpx; 背景: #FA2B3F; ボーダー半径: 72rpx; 行の高さ: 103rpx; テキスト整列: 中央; フォントサイズ: 34rpx; font-family: PingFangSC-Regular、PingFang SC; フォントの太さ: 400; 色: #FFFFFF; } .dingdandetails { /* 幅: 180rpx; */ 高さ: 40rpx; 背景: #FFFFFF; ボーダー半径: 20rpx; 行の高さ: 40rpx; テキスト整列: 中央; フォントサイズ: 26rpx; font-family: PingFangSC-Regular、PingFang SC; フォントの太さ: 400; 色: #B2B2B2;
}
.smallxiaozujian { 幅: 344rpx; 高さ: 68rpx; /* 位置: 絶対; */ /* 左: 195rpx; */ /* トップ: 800rpx; */ 行の高さ: 68rpx; テキスト整列: 中央; 背景: 線形勾配(180度、#FEEBC2 0%、#FFDCA1 100%); ボックスの影: 0rpx 4rpx 14rpx 0rpx #DB1C17; ボーダー半径: 55rpx; フォントサイズ: 36rpx; font-family: PingFangSC-Medium、PingFang SC; フォントの太さ: 500; 色: #F04F28; } .bnt_right { 幅: 580rpx; 高さ: 103rpx; 背景: #FA2B3F; ボーダー半径: 72rpx;
行の高さ: 103rpx;
テキスト整列: 中央;
フォントサイズ: 34rpx;
font-family: PingFangSC-Regular、PingFang SC;
フォントの太さ: 400;
色: #FFFFFF;
}
4. 注文ページで携帯電話番号のワンクリック認証（方法はapp.vueに書いてあります）
Methods:{ getPhoneNumber({ params, success, fail }) { const { iv, encryptedData } = params; // ... // デベロッパー サーバーは encryptedData を復号化して電話番号を取得する // ... uni.login( { success: function (loginRes) { uni.request({ url: 'Get code interface', method: 'POST', dataType: 'json', header: { "content-type": "application/x-www-form - urlencoded", }、
data: { code: loginRes.code, // #ifdef MP-TOUTIAO platform: 'MP-TOUTIAO', // #endif // #ifdef MP-KUAISHOU platform: 'MP-KUAISHOU', // #endif }, success : (res) => { if(res.data.code == 200) { uni.request({ url: '電話番号インターフェイスを復号化',
メソッド: 'POST',
dataType: 'json',
header: { "content-type": "application/x-www-form-urlencoded", "authorization": res.data.data.token, }, data: { se_key: res.data.data.session_key、 iv: params.iv、 encryptedData: params.encryptedData、 }、
success: (res) => { console.log(res, 'Decrypt phone number data') if(res.data.code == 200) { const result = { phoneNumber: String(res.data.data), } / / コールバック トランザクション テンプレート の成功 (結果) } else { uni.showToast({
icon:'none',
title:String(res.data.msg)
})
}
},
失敗: function(e) { } }) } else { uni.showToast({ icon:'none', title:String(res .data.msg) })
}
}、
失敗: function(e) { console.log(22222); } }) } }); } }、
5. pages.json ページでは、支払いページにこのコンポーネントを導入する必要があります
,{ "path" : "pages/details/details", "style" : { "navigationBarTitleText": "", // #ifdef MP-TOUTIAO "usingComponents": { "zijie-pay-button": "/ttcomponents/ DyPayButton/index" }, // #endif "enablePullDownRefresh": false // #ifdef MP-WEIXIN || MP-KUAISHOU ,"navigationStyle": "custom" // #endif // #ifdef MP-TOUTIAO ,
"transparentTitle": "always"
// #endif
}
}
6. 上記の手順が完了したら、トランザクション ボタンが必要なページにコンポーネントを登録できます。
components: { // #ifdef MP-TOUTIAO "zijie-pay-button": "../../ttcomponents/DyPayButton/index", // #endif },
7. その後、使用できます
今すぐ購入するには、goodsId を渡す必要があります
<zijie-pay-button classname="smallxiaozujian" :kcid="kcid" :hbprice="hbprice" :source="source" :extension="extension" :goodsId="product_id"></zijie-pay-button>
払い戻しには以下を使用してください
<zijie-pay-button classname="smallxiaozujian" :order-status='order_status' :refund-id='refund_id' :order-id='order_sn' :order-status="orderstatus" :mode="1" : goodsId="product_id"></zijie-pay-button>
私が遭遇したいくつかの問題：
1. 現在、パンナレッジ取引システムは支払いボタンのみを使用して注文でき、tt.createOrder は使用できません。
2. 支払いボタン コンポーネントのテキストはスタイルの変更をサポートしていません。スタイルはクラス名で変更できます。
3. 一般知識の商品カテゴリーは商品ライブラリーの商品であり、アクセスする際に在庫を気にする必要はありません
4.デバッグするときは、実際のマシンを使用してデバッグする必要があり、エディターはできません
5.デバッグの準備をする前に、製品をコース ライブラリに配置する必要があります。ストレージに配置されていない製品はデバッグできません。
Douyin 支払いボタン トランザクション ボタン コンポーネント アドレスDouyin 支払いボタン トランザクション ボタン コンポーネント アドレス
Panknowledge] ユーザーが開始した払い戻しの外部バージョン
Trading System 2.0 開発者向けドキュメント