系列教程四目錄：返利助手開發（2）淘寶分享的內容如何只取淘口令
系列教程五目錄：返利助手開發（3）淘口令如何通過API轉換爲鏈接
系列教程六目錄：返利助手開發（4）如果通過淘口令解析的出來的地址獲得返利信息
系列教程七目錄：返利助手開發（5）如何將優惠券地址轉爲淘口令
我們在第七章中寫道了生生成淘口令但是微信內部封殺淘口令嚴重爲了避免有時候解析出來返回給用戶淘寶中途給攔截的問題，我們一般還是需要一個網頁來複制淘口令，在返回給用戶信息的時候返回這個網頁的地址而非是淘口令
如果對VUE不太熟悉不知道腫麼操作的可以看看我之前的另外一個文章
Vue-Element
裏面講了如何搭建環境和工具等
在開發之前我們需要引入兩個包
npm install vue-router 用於路由信息獲取
因爲在後臺我們已經獲取的到圖片地址商品名字和返利信息等，
我們只需在網頁中將參數帶上傳給前臺顯示
這個包就是用來解析網址後參數的
另外一個就是 vue-clipboard2 這個包是用來複制用的
npm install --save vue-clipboard2
安裝成功後我們可以在package.json中看到這2個包
首先在頁面中聲明要用到的值
components: {},
data() {
return {
word: '',
image: 'https://static.luzhanbo.cn/logo/tm.png',
yj:0,
xj:0,
yh:0,
fl:0,
};
}
computed: {
},
mounted() {
//這個方法類似jq中的onload方法加載後就只需getdata方法
this.getData();
},
methods: {
getData() {
console.log("getData");
//獲取網頁地址後都參數
this.word = this.$route.query.word ;//淘口令
this.image = this.$route.query.image ;//圖片
this.yj = this.$route.query.yj ;//原價
this.xj = this.$route.query.xj ;//現價
this.yh = this.$route.query.yh ;//優惠券
this.fl = this.$route.query.fl ;//返利
},
onCopy(e) {
console.log(e);
Dialog.alert({
title: "溫馨提示",
message: "淘口令已粘貼，打開淘寶APP購買"
}).then(() => {
// on close
});
},
onError(e) {
console.log(e);
alert("拷貝失敗");
}
}
頁面代碼如下:
<template>
<div id="main">
<van-nav-bar title="商品詳情" />
<div >
<div>
<van-image :src="this.image" />
</div>
<van-row class="item-info">
<van-col span="9" class="sub-title">
<span class="new-price">¥ {{this.xj}}</span>
<span class="old-price">{{this.yj}}</span>
</van-col>
<van-col class="sub-title" span="8">
優惠券 <span class="fee">¥ {{this.yh}}</span>
</van-col>
<van-col span="7" class="sub-title right">
返利
<span class="fee">¥ {{this.fl}}</span>
</van-col>
</van-row>
<van-row class="item-info">
<van-col span="8" class="sub-title">
</van-col>
<van-col class="sub-title" span="8">
淘口令
<span class="fee">{{this.word}}</span>
</van-col>
<van-col span="8" class="sub-title right">
</van-col>
</van-row>
<van-goods-action>
<van-goods-action-button
type="danger"
text="立即複製"
@click.stop="copyOk=true"
v-clipboard:copy="this.word"
v-clipboard:success="onCopy"
v-clipboard:error="onError"
/>
</van-goods-action>
</div>
</div>
</template>
這就是整個淘寶返利助手的全部內容了，其實要實現像朋友圈的那種返利機器人的話還有其他許多功能需要編寫，只是博主事測試學習使用的這裏就沒寫那麼複雜了，如果有要編寫都同學我這裏可以提供一下思路
之前有幾個朋友加我QQ問我像返利機器人中下單和確認收貨的時候會提示消息，這個是腫麼實現的
我這裏查詢了一下資料,這其實是淘寶另外一個服務的內容，可以搜索一下阿里的聚石塔，它裏面有一個功能叫數據推送
在客戶下單和確認支付的時候會把信息推送到你指定的網址你就可以通過那邊推送過來的消息再在微信中返回給用戶消息
然後就是如果要完全實現返利機器人那種功能的話你還得，在淘寶返回下單信息的時候你要在你的數據存儲對應的微信id值，下單內容，返利多少，最後他確認收貨後再標記確認此返利有效
同時你還得對接微信的紅包接口在提現的時候自動返回對應的紅包，如果不這樣做的話，那麼就只能找一個wpf端登陸個人微信的程序然後再集成返利查詢，最後手動發紅包
思路就提供到這裏，淘寶商品返利小助手的教程及到此結束了