Worauf sollten wir bei der Anpassung von Uniapp an das WeChat-Applet achten?

Was sollten Sie bei der Anpassung von uniapp an das WeChat-Miniprogramm beachten? Der folgende Artikel wird Ihnen einige Vorsichtsmaßnahmen bei der Anpassung von Uniapp an das WeChat-Applet mitteilen. Ich hoffe, er wird Ihnen hilfreich sein!

Dies ist auch mein erstes Mal, dass ich Uniapp spiele. Auf der offiziellen Website heißt es, dass es einmal codiert und auf mehreren Terminals veröffentlicht werden kann. Ehrlich gesagt war ich zunächst skeptisch. Mittlerweile ist die App jedoch entwickelt und die h5-Seite fast fertig. Jetzt müssen wir ein kleines Programm erstellen, was mich schon beim Gedanken daran sehr aufgeregt macht. .

Ich habe das Miniprogramm auf hbuilderx ausgeführt und die bekannte Anmeldeoberfläche mit Kapseln gesehen. Ich war sehr aufgeregt und habe mich angemeldet, um einen Blick darauf zu werfen. Infolgedessen waren alle Schaltflächen auf der Startseite verschwunden, und auch die Tableiste unten war verschwunden. . Dies ist nur der erste Schritt, und er hat mein Selbstvertrauen bereits schwer beschädigt. Ich hatte das Gefühl, zum ersten Mal beim Essen einer Krabbe erwischt zu werden! Glücklicherweise ist uniapp ziemlich zuverlässig. Schließlich habe ich die CommunityInformationen durchgesehen und diese Probleme endlich gelöst. Später stieß ich auf andere Probleme, also habe ich sie zusammengefasst und meine Erfahrungen geteilt. Einmal entwickeln und auf mehreren Terminals veröffentlichen, es wird seinem Ruf wirklich gerecht!

1. V-if vermeidet Fallstricke

Ein Blick in die offizielle Uniapp-Dokumentation zeigt, dass v-if Multi-End-Unterstützung unterstützt. Das Miniprogramm unterstützt nur WeChat-Miniprogramme. Nach dem Ausführen des Miniprogramms mit hbuilderx wird es zur WeChat-Befehlssyntax wx:if. Hier gibt es eine Grube, seien Sie also vorsichtig!

v-if-Anweisungsausdruck

Wenn der Anweisungsausdruck ein JSON-Objekt ist und der Attributwert Ihres -Objekts null enthält, sollten Sie darauf achten Im Allgemeinen ist es wie folgt:

Es ​​tritt ein Problem auf, wenn Ihr Code im Applet ausgeführt wird. Die Ansichtskomponente wird jedoch nicht gerendert. Sie kann in der App und in h5 normal angezeigt werden. Der Grund wurde bisher nicht gefunden. Es gibt ein Sprichwort, dass es mit einem Fehler in js in der Antike zusammenhängt (typeof(null) == „object“). Der neueste Kernel des WeChat-Miniprogramms basiert auf ihrem selbst entwickelten MWEB-Kernel, der ebenfalls auf einer Chrom-Modifikation basieren sollte. Ich weiß nicht, warum die Reaktionen hier so unterschiedlich sind. ! Überrascht. .

Die richtige Schreibweise sollte so aussehen:

<view v-if="a.b"></view>

//a对象
{
"b": "ss",
"c": null
}

2. Der Zindex der Ansicht

Dies ist auch eine Falle, für die der Grund nicht gefunden wurde. Mein ursprünglicher Code ist so und die App und h5 sind normal, aber wenn das Applet ausgeführt wird, nein, keine Reaktion nach dem Klicken:

<view v-if="a.b!==null"></view>

//a对象
{
"b": "ss",
"c": null
}

Ich kann sehen, wie viele Ebenen angewendet wurden. Wie haben Sie es am Ende gelöst? Erhöhen Sie einfach den Zindex-Wert der innersten Ansicht etwas und fertig! Ich verstehe nicht ganz, was mit dem WeChat-Miniprogramm los ist. Wenn Sie auch darauf stoßen, geben Sie ihm einfach Zindex! Funktionsobjekt. Das macht keinen Spaß. Bei der Front-End-Entwicklung werden häufig komplexe Objekte übergeben, und es kommt auch sehr häufig vor, dass Eigenschaftswerte Funktionen sind. Mein Szenario besteht darin, Spalten an eine Tabellenkomponente zu übergeben, z. B. die Rückgabe von Bildern und Schaltflächen basierend auf ihren Werten sie konvertieren?

Die Lösung, die ich hier anbiete, besteht darin, diese Konvertierungsfunktionen in ein globales Mischobjekt einzufügen. Wenn sie global eingemischt werden, bedeutet dies, dass alle Komponenten diese Funktionen haben, wenn das Spaltenobjekt an die Tabellenkomponente übergeben wird " Objekt Geben Sie der Funktion einfach einen Namen. Okay, hier kommt die Frage: Wenn meine Tabellenkomponente das Spaltenobjekt analysiert, wie kann ich die entsprechende Funktion über den Funktionsnamen finden und sie dann aufrufen? Ursprünglich war es mit eval() einfach zu implementieren, aber das WeChat-Applet hat diese Funktion sogar deaktiviert! ! Okay, wir sind schon so weit gekommen. Es gibt tatsächlich Alternativen, schauen Sie sich einfach die Schritte an! 1. Globales Mix-in

Wenn Sie über andere nützliche Daten verfügen, können Sie diese natürlich auch in die berechneten Eigenschaften einmischen zur Vue-Komponente.

<view><view><view @click="todo"></view></view></view>

2. Übergeben Sie den Methodennamen

Schauen Sie sich dieses Beispiel an, hier kann der Vorlage nur der Funktionsname tmtemp gegeben werden.

module.exports = {
 computed: {
  
 },
 methods: {
  tmtemp(row) {
   if (row.tm && row.tm != null) {
    return `<span style="text-align:center;">${row.tm}</span>`
   } else {
    return &#39;-&#39;
   }
  }
 }
}

3. Bewertungsalternative

Es gibt eine Open-Source-Bewertungsfunktion, hier ist die

. Laden Sie den Quellcode lokal herunter, wenn die Tabale-Komponente auf die

columns: [{
      title: "测站编码",
      // key: "stcd"
      format: {
       names: ["stcd"],
       template: &#39;<span style="word-break: break-all">#stcd#</span>&#39;
      }
     },
     {
      title: &#39;测站名称&#39;,
      key: &#39;stnm&#39;
     },
     {
      title: &#39;最后一次上报时间&#39;,
      // key: &#39;tm&#39;,
      format: {
       names: [&#39;tm&#39;],
       codeChange: true,
                      //传函数名
       template: &#39;tmtemp&#39; 
      }
     },
     {
      title: &#39;在线状态&#39;,
      // key: &#39;onlinestate&#39;,
      width: &#39;146&#39;,
      format: {
       names: [&#39;onlinestate&#39;],
       codeChange: true,
                      //传函数名
       template: &#39;onlinetemp&#39;
      }
     }
    ]

function(row,col){
    if (col.format.codeChange) {//rpneval.calCommonExp
            tempHTML = binding.eval('tem($0)',[row],{tem:this[col.format.template]});
    }
}

{
  "pages":[
    "pages/index",
    "pages/logs"
  ],
  "subpackages": [
    {
      "root": "packageA",
      "pages": [
        "pages/cat",
        "pages/dog"
      ]
    }, {
      "root": "packageB",
      "name": "pack2",
      "pages": [
        "pages/apple",
        "pages/banana"
      ]
    }
  ]
}

  "dev:mp-weixin": "cross-env NODE_ENV=development UNI_PLATFORM=mp-weixin vue-cli-service uni-build --watch --minimize"