Analyse de l'accès aux données de l'applet WeChat

不言
Libérer: 2018-06-27 17:45:09
original
2252 Les gens l'ont consulté

Cet article présente principalement des informations pertinentes sur l'explication détaillée des exemples d'accès aux données des mini-programmes WeChat. Les amis qui en ont besoin peuvent s'y référer

Tout d'abord, parlons brièvement de la structure du mini-programme

Comme le montre l'image

1 Chaque vue (.wxml) doit uniquement ajouter le script (.js) et le style (.wxss) avec le nom correspondant. Aucune référence n'est nécessaire. Les scripts et les styles sous la page sont hérités du app.js le plus externe, app.wxcss

2. Le script est également un fichier .js. Il a un format fixe : page. , qui sert à obtenir des données

3. Les utilitaires sont utilisés pour placer des interfaces de données

L'accès aux données, si vous connaissez ajax, ce n'est pas un problème, il n'y a rien à dire

Applet WeChat, car l'IDE l'est aussi. C'est nul Si le code est écrit d'une manière difficile à lire, l'ensemble du projet sera difficile à maintenir.

Parce que je n'ai jamais écrit d'application, je ne sais pas comment l'accès aux données est encapsulé dans l'application

En tant que petit codeur de programme avec 3 jours d'expérience professionnelle, je pense que si. les données sur chaque page ne sont pas de la POO pour accéder à l'interface de données par vous-même

Ensuite, j'ai pensé à Linq to SQL et n'ai pris que deux des méthodes que j'avais initialement prévu d'utiliser singleordefault et firstordefault, mais c'était le cas. difficile d'y penser, j'ai donc utilisé Use getbyparams et getbyid pour trouver toutes les données en fonction des conditions, ou obtenir une donnée basée sur l'ID

Regardons simplement la méthode, c'est un peu verbeux

const API_URL = 'http://localhost:4424/api/'

function getApi(url,params){
 return new Promise((res,rej)=>{
  wx.request({
   url:API_URL+'/'+url,
   data:Object.assign({},params),
   header:{'Content-Type': 'application/json'},
   success:res,
   fail:rej
  })
 })
}

module.exports = {
 GetByParams(url,page=1,pageSize=20,search = ''){
  const params = { start: (page - 1) * pageSize, pageSize: pageSize }
  return getApi(url, search ? Object.assign(params, { q: search }) : params)
   .then(res => res.data)
 },
 GetById(url,id){
  return getApi(url, id)
   .then(res => res.data)
 }
}
Copier après la connexion

module.exports = {} est une méthode d'écriture fixe, dans laquelle les méthodes sont écrites une par une et chaque méthode est séparée par,.

J'ai défini un paramètre d'url, car il est impossible de mettre toutes les interfaces dans un contrôleur, donc le format de l'url est "contrôleur/action"

Regardez An exemple d'appel, vous comprendrez comment l'utiliser

const req = require('../../utils/util.js')

Page({
 data: {
  imgUrls: [],
  indicatorDots: true,
  autoplay: true,
  interval: 2000,
  duration: 2000
 },
 onLoad(){
  req.GetByParams('home/homebanner')//看这里  看这里  看这里
  .then(d=>this.setData({imgUrls:d,loading:false}))
  .catch(e=>{
   this.setData({imgUrls:[],loading:false})
  })
 }
})
Copier après la connexion

C'est la méthode d'index pour obtenir l'image de la bannière, req.GetByParams('home /homebanner'), vous pouvez aussi avoir des paramètres ici, ou vous pouvez les laisser vides

La page finale est comme ça

Dans l'encadré rouge sur à droite, nous pouvons voir les données renvoyées par la requête, vous pouvez également modifier les données à droite, et l'interface changera en conséquence. Il s'agit du débogage, nous en discuterons plus tard

Ce qui précède est. tout le contenu de cet article. J'espère qu'il sera utile à l'apprentissage de tout le monde. Pour obtenir de l'aide, veuillez faire attention au site Web PHP chinois pour plus de contenu connexe !

Recommandations associées :

Comment le serveur du mini-programme WeChat obtient les informations décryptées par l'utilisateur

À propos du mini-programme WeChat en cours de tournage Implémentation de cases et de cases modales

Méthode de chargement de données de manière asynchrone à l'aide d'ECharts 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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal