Einführung in den Datenzugriff im WeChat-Miniprogramm

In diesem Artikel werden hauptsächlich relevante Informationen zur detaillierten Erläuterung von Beispielen für den Datenzugriff von WeChat-Miniprogrammen vorgestellt. Freunde, die sie benötigen, können darauf zurückgreifen

Lassen Sie uns zunächst kurz über die Struktur des Miniprogramms sprechen

Wie im Bild gezeigt

1 Jede Ansicht (.wxml) muss nur das Skript (.js) und den Stil (.wxss) mit hinzufügen Entsprechender Name. Es sind keine Referenzen erforderlich. Die Skripte und Stile werden von der äußersten Datei app.js, app.wxcss, geerbt. Das Skript ist ebenfalls eine .js-Datei , das zum Abrufen von Daten verwendet wird

3. Utils werden zum Platzieren von Datenschnittstellen verwendet

Datenzugriff, wenn Sie Ajax kennen, ist das kein Problem, es gibt nichts zu besprechen

WeChat-Applet, weil die IDE zu scheiße ist. Wenn der Code so geschrieben ist, dass er schwer lesbar ist, wird es schwierig, das gesamte Projekt zu warten.

Da ich noch nie eine App geschrieben habe, weiß ich nicht, wie der Datenzugriff in der App gekapselt ist

Als kleiner Programmierer mit 3 Tagen Berufserfahrung habe ich das Gefühl, wenn Die Daten auf jeder Seite sind nicht OOP, um selbst auf die Datenschnittstelle zuzugreifen.

Dann dachte ich an Linq to SQL und nahm nur zwei der Methoden, die ich ursprünglich geplant hatte, singelordefault und firstordefault, aber das war der Fall Es ist mühsam, darüber nachzudenken, also habe ich getbyparams und getbyid verwendet, um alle Daten basierend auf den Bedingungen zu finden, oder ein Datenelement basierend auf der ID abzurufen

Schauen wir uns einfach die Methode an, sie ist etwas ausführlich

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

module.exports = {} ist eine feste Schreibmethode, bei der Methoden einzeln geschrieben werden und jede Methode durch getrennt wird.

Ich habe einen URL-Parameter festgelegt, da es unmöglich ist, alle Schnittstellen in einen Controller zu packen, daher ist das Format der URL „Controller/Aktion“

Schauen Sie sich an Beispiel des Aufrufs, Sie werden verstehen, wie man ihn verwendet

Dies ist die Indexmethode, um das Bannerbild abzurufen, req.GetByParams('home/homebanner '), Sie können auch Parameter hierher bringen oder sie leer lassen

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

Die letzte Seite sieht so aus

Im roten Feld rechts sind wir Sie können die Rückgabe der Anforderung sehen. Sie können auch die Daten auf der rechten Seite ändern, und die Schnittstelle ändert sich entsprechend. Hier geht es um das Debuggen, und wir werden es später besprechen.

Vielen Dank fürs Lesen, ich hoffe, es kann allen helfen , vielen Dank für Ihre Unterstützung dieser Seite!

Das obige ist der detaillierte Inhalt vonEinführung in den Datenzugriff im WeChat-Miniprogramm. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!