Cours payants en ligne en vue (tutoriel détaillé)

Cet article présente principalement le processus de candidature aux cours payants en ligne développés sur la base de vue. Il est très bon et a une valeur de référence. Les amis dans le besoin peuvent s'y référer

• En utilisant l'interface utilisateur vux. bibliothèque de composants

• Utilisez vue-navigation pour mettre en cache la page. Cette bibliothèque implémente la fonction d'actualisation avant et de cache de lecture arrière, tout comme la navigation native de l'application. Il y avait un bug dans l'implémentation de la barre de tabulations à l'aide du sous-routage, mais il a été résolu en utilisant vuex.

• Utilisez lib-flexible pour résoudre l'adaptation des pages mobiles

Faisons une liste

"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"
 }

Connexion WeChat

L'application doit être connectée pour y accéder. La fonction de connexion WeChat est d'entrer à partir de n'importe quel lien et de déterminer si vous devez vous connecter. Si vous n'êtes pas connecté, sautez. à l'autorisation WeChat et revenez à la connexion après succès. Comme mentionné dans le lien précédent, puisque nous avons fait beaucoup d'autorisation WeChat pour PHP, l'autorisation WeChat est implémentée en PHP. Voici le processus de mise en œuvre. La méthode de routage utilise le mode historique et le fichier index.html packagé est rendu à l'aide de PHP. Le chemin de routage définit un format unifié r/xxxx, afin que le routage côté PHP puisse correspondre. Tant que le routage dans ce format correspond à la méthode de rendu index.html, sinon une erreur 404 apparaîtra sur le chemin. serveur lors de l'accès.

Configuration du routage côté php, voici Laravel, les autres frameworks devraient être similaires

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

Pourquoi ne pas utiliser le mode hachage, car php ne peut pas obtenir l'adresse source lors de l'utilisation du mode hachage #Les paramètres suivants , bien que vous puissiez utiliser des paramètres pour transmettre au backend, mais c'est très gênant, j'utilise donc le mode historique. Il en va de même pour les paiements et partages ultérieurs

Processus de connexion WeChat

. 🎜>
• Ouvrez n'importe quel lien xxx.com/r/xxx

• Passez d'abord par le côté php et faites correspondre l'itinéraire. Si la correspondance échoue, vous trouverez La page n'est pas atteinte ~

Si la correspondance est réussie, la connexion sera jugée. Si vous n'êtes pas connecté, passez à la connexion WeChat. lien actuel avant de sauter. Si la connexion réussit, le lien enregistré sera renvoyé

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

Le statut de connexion de l'utilisateur utilise un jeton, et le jeton est défini dans la page index.html

Paiement WeChat

Ce que le paiement WeChat doit résoudre, c'est le problème de configuration du chemin Puisque nos itinéraires sont tous au format r/xxxxx, remplissez donc directement http://xxx.xxxx.com/r/ sur WeChat. Notez que le paiement est requis. Veuillez utiliser la méthode de requête pour transmettre les paramètres de la page. Sinon, un répertoire apparaîtra après r. Par exemple, r/goods/id/1 doit être remplacé par r/goods?id=1 De cette façon, tant qu'un chemin est défini, l'ensemble du site peut lancer le paiement.

Partage personnalisé

Étant donné que le mode de routage historique est utilisé, le problème d'iOS doit être résolu. Après le saut d'itinéraire, Android peut. fonctionne normalement. Est-ce le chemin actuel obtenu par iOS? C'est le chemin où vous ouvrez l'application pour la première fois, vous devez donc faire attention lors de la signature. Android utilise le chemin actuel pour signer, et iOS utilise le chemin où la page est ouverte pour le. première fois à signer. C'est pourquoi il est nécessaire de définir un chemin de première ouverture de l'application avant l'initialisation du routage. C'est la façon spécifique de me connecter index.html. Ce que j'utilise ici, c'est axios

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

code clé

$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去签名吧

dont j'ai besoin pour en obtenir trois

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

. l'arrière-plan. Comment initialiser après la signature

Ceci est fourni par vux

Étant donné que l'application utilise le cache de page, le code permettant de définir les données partagées personnalisées doit être exécuté spécifiquement pour être activé. implémentez

définissez d'abord un init=false

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

monté et commencez à demander des données pour obtenir la signature

set_share () {
 // 自定义分享到朋友圈
 this.$wechat.onMenuShareTimeline({
  title: this.share.title,
  link: this.share.url,
  imgUrl: this.share.icon,
  success: () => {}
 })
 this.$wechat.onMenuShareAppMessage({
  title: this.share.title,
  desc: this.share.desc,
  link: this.share.url,
  imgUrl: this.share.icon
 })
}

Définissez une méthode dans les méthodes

activated () {
 this.set_share()
}

activé Définir

réinitialiser les données partagées personnalisées lorsque le composant keep-alive est activé, sinon si la page avant le retour est également programmée pour un partage personnalisé, la page ne sera pas actualisée après le retour, et le données partagées Ce sera le même qu'avant, il suffit de le redéfinir ici.

Ce qui précède est ce que j'ai compilé pour vous. J'espère que cela vous sera utile à l'avenir.

Articles connexes :

Comment utiliser Baidu Map pour implémenter une grille de carte

Utiliser le sélénium pour capturer les informations de données Taobao

Concept et utilisation du modèle de commande en JS (tutoriel détaillé)

Comment implémenter les rappels à l'aide de Promise dans l'applet WeChat ?

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!