Bezahlte Online-Kurse in Vue (ausführliches Tutorial)

Dieser Artikel stellt hauptsächlich den Bewerbungsprozess für kostenpflichtige Online-Kurse vor, die auf Vue basieren. Er ist sehr gut und hat Referenzwert.

• Verwendung der Vux-UI-Komponente Bibliothek

• Verwenden Sie Vue-Navigation, um die Seite zwischenzuspeichern. Diese Bibliothek implementiert die Funktion der Vorwärtsaktualisierung und des Rückwärtslesecaches, genau wie die native APP-Navigation. Es gab einen Fehler bei der Implementierung der Tabbar mithilfe von Sub-Routing, der jedoch mithilfe von Vuex behoben wurde.

• Verwenden Sie lib-flexible, um die Anpassung mobiler Seiten zu lösen

Lassen Sie uns eine Liste erstellen

"dependencies": {
  "fastclick": "^1.0.6",
  "lib-flexible": "^0.3.2",
  "lodash": "^4.17.4",
  "vue": "^2.5.2",
  "vue-navigation": "^1.1.3",
  "vue-router": "^3.0.1",
  "vuex": "^2.1.1",
  "vuex-i18n": "^1.3.1",
  "vux": "^2.7.8"
 }

WeChat-Anmeldung

Um auf die Anwendung zugreifen zu können, müssen Sie angemeldet sein. Die Funktion der WeChat-Anmeldung besteht darin, über einen beliebigen Link einzutreten und zu bestimmen, ob Sie sich anmelden möchten. Wenn Sie nicht angemeldet sind, springen Sie zu WeChat Nach Erfolg kehren wir zum Pre-Login-Link zurück, da wir viele WeChat-Autorisierungen für PHP durchgeführt haben, sodass die WeChat-Autorisierung in PHP implementiert ist. Die Routing-Methode verwendet den Verlaufsmodus und die gepackte Datei index.html wird mit PHP gerendert. Der Routing-Pfad definiert ein einheitliches Format r/xxxx, sodass das Routing auf der PHP-Seite mit der Methode zum Rendern von index.html übereinstimmt, andernfalls wird ein 404-Fehler angezeigt Server beim Zugriff.

PHP-seitige Routing-Konfiguration, hier ist Laravel, andere Frameworks sollten ähnlich sein

Route::get('/', 'HomeController@index')->middleware('auth')->name("home");
Route::get('/r/{query}', 'HomeController@index')->middleware('auth')->name("home");

Warum nicht den Hash-Modus verwenden, denn bei Verwendung des Hash-Modus kann PHP die Quelladresse nicht abrufen, wenn das folgende # abgerufen wird Obwohl Parameter an das Backend übergeben werden können, ist dies sehr mühsam, daher verwenden wir den Verlaufsmodus. Dasselbe gilt für die anschließende Zahlung und Freigabe

WeChat-Anmeldevorgang

• Öffnen Sie einen beliebigen Link xxx.com/r/xxx

• Gehen Sie zuerst die PHP-Seite durch und passen Sie die Route an, wenn der Abgleich fehlschlägt , es wird nicht gefunden.

• Wenn die Übereinstimmung erfolgreich ist, wird die Anmeldung beurteilt. Wenn Sie nicht angemeldet sind, springen Sie zu WeChat, um sich anzumelden. Vorher Springen, den aktuellen Link aufzeichnen. Wenn die Anmeldung erfolgreich ist, wird der aufgezeichnete Link zurückgegeben

Der Benutzeranmeldestatus verwendet ein Token und das Token wird auf der Seite index.html definiert

<script>
  var TOKEN = &#39;{{$token}}&#39;;//php模板变量
  var HOST = &#39;http://read.xxx.com&#39;;//程序api接口域名
  var INURL = location.href //页面域名（在ios自定义分享时候会用到）
</script>

WeChat-Zahlung

WeChat-Zahlung erfordert Die Lösung ist das Pfadkonfigurationsproblem Da unsere Routen alle im Format r/xxxx sind, haben wir Füllen Sie direkt http://xxx.xxxx.com/r/ auf WeChat aus und achten Sie auf die zu zahlenden Seitenparameter. Bitte verwenden Sie die Abfragemethode. Andernfalls wird nach r ein Verzeichnis angezeigt. Beispielsweise muss r/goods/id/1 durch r/goods?id=1 ersetzt werden. Solange ein Pfad definiert ist, kann die gesamte Site die Zahlung starten

Benutzerdefinierte Freigabe

Da der Verlaufsroutingmodus verwendet wird, muss das Problem von iOS nach dem Routensprung gelöst werden Funktioniert normal. Ist der aktuelle Pfad, den iOS erhält, der Pfad, in dem Sie die Anwendung zum ersten Mal öffnen, sodass Sie beim Signieren darauf achten müssen, dass Android den aktuellen Pfad zum Signieren verwendet, und iOS den Pfad verwendet, in dem die Seite geöffnet wird Zum ersten Mal unterschreiben. Aus diesem Grund ist es notwendig, vor der Routing-Initialisierung einen Pfad zum ersten Öffnen der Anwendung zu definieren. Es ist die spezifische Anleitung zum Anmelden in index.html. Was ich hier verwende, ist der Schlüsselcode „Axios“ die Signatur

let http = axios.create({
 baseURL: HOST + '/api/',
 timeout: 10000,
 headers: {
  'Accept': 'application/json',
  'Authorization': 'Bearer ' + TOKEN,
  'InUrl': INURL,//传第一次打开页面的链接
  'IsIos': isiOS//传是否ios
 }
})

Dies wird von vux bereitgestellt

Da die Anwendung Seiten-Caching verwendet, muss der Code zum Definieren benutzerdefinierter gemeinsamer Daten in aktivierter Form ausgeführt werden

Zuerst Definieren Sie ein init=false

mount und beginnen Sie mit der Anforderung von Daten, um die Signatur zu erhalten

$is_ios = request()->header('IsIos');//获取是否ios
$in_url = request()->header('InUrl');//获取第一次打开页面路径
$in_url = explode("#", $in_url)[0];//处理一下
if ($is_ios == 'true') {
  $url = $in_url;//ios用第一次打开页面路径签名
} else {
  $url = url()->previous();//安卓就用请求这个接口的路径去签名
}
//用url去签名吧

Definieren Sie eine Methode in Methoden

this.$wechat.config(res.data.wx_config)

aktiviert define

this.$wechat.config(res.data.wx_config)
 this.$wechat.ready(() => {
  this.set_share()
 })

keep- Wenn die Alive-Komponente aktiviert ist, setzen Sie die benutzerdefinierten freigegebenen Daten zurück. Wenn die Seite vor der Rückkehr auch für die benutzerdefinierte Freigabe geplant ist und die Seite nach der Rückkehr nicht aktualisiert wird, werden die freigegebenen Daten einfach hier neu definiert. .

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

So verwenden Sie Baidu Map zum Implementieren eines Kartenrasters

Verwenden Sie Selen, um Taobao-Dateninformationen zu erfassen

Konzept und Verwendung des Befehlsmusters in JS (ausführliches Tutorial)

Wie implementiert man Rückrufe mit Promise im WeChat-Applet?

Das obige ist der detaillierte Inhalt vonBezahlte Online-Kurse in Vue (ausführliches Tutorial). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!