Eine Woche Zusammenfassung der Entwicklung des WeChat-Miniprogramms

Das Folgende ist eine Zusammenfassung der Woche der WeChat-Applet-Entwicklung. Ich hoffe, dass sie für Studenten auf der chinesischen PHP-Website hilfreich sein wird.

Editor

Ich verwende vscode direkt (dasselbe gilt für andere Editoren, ich verwende immer noch WeChat-Entwicklungstools für die Vorschau), Syntaxhervorhebung wird Stellen Sie wxml auf HTML und wxss auf CSS ein

"files.associations": {
  "*.wxss": "css",
  "*.wxml": "html"
}

Sie können auch Miniprogramm-bezogene Plug-Ins installieren

und mit dem Schreiben von Code beginnen

• Zunächst müssen Sie das WeChat-Applet-Dokument (Framework, Komponenten und API) vollständig lesen, um später die Suche zu erleichtern.

• Ansichtskomponente entspricht p

• Text entspricht span

• wxss-Selektor Unterstützt nur Elemente , #id, .className, ::after, ::before

Öffentliche Komponente

Projekt Neue Komponenten erstellen Folgen Sie im Verzeichnis einer Verzeichnisstruktur ähnlich den Seiten und legen Sie die Vorlagen, Stile und JS-Dateien jeder Komponente im selben Ordner ab

• Die Vorlage kann direkt verwendet werden oder bei Bedarf den Stil

• verwenden Um einen Wert zu übergeben, importiert @import

• js mit require, um ihn in die Seite einzuführen, und verwendet dann die folgende mergePage, um ihn in die Seite zu laden Objekt .

mergePage

• Laden von Komponenten

const ErrorMsg = require('../../../components/error-msg/error-msg');
Page(util.mergePage({
  // 页面 Page 方法...
  onLoad() {
    // 可以直接在页面方法中调用 showErrorMsg 方法
  }
}, ErrorMsg/* 更多组件也可以*/));

Verwenden Sie die Methode mergePage, um alle Komponentenmethoden und Seitenereignisse im Seitenobjekt

So schreiben Sie Komponenten

var errorTimer;

module.exports = {
  showErrorMsg(msg, cb) {
    clearTimeout(errorTimer);
    this.setData({
      errorMsg: msg
    });
    errorTimer = setTimeout( () => {
      this.setData({
        errorMsg: false
      });
      cb && cb();
    }, 2000);
  }
  // 可以在这里注册 `onLoad`，`onShow`等页面事件
}

Sie können this.setData in der Komponente verwenden, um Seitendaten zu aktualisieren, oder sich bei onLoad, onShow und registrieren andere Seitenereignisse, mergePage Das Ereignis mit dem letzten Parameter wird zuerst aufgerufen.

Der Quellcode von mergePage

/**
 * 合并 Page 对象所有的方法及事件
 * 子对象不能使用 data 属性，请在 onLoad 中使用 setData 方法设置
 */
function mergePage(dest, ...src) {
  let args = arguments;
  let eventsStack = {
    onLoad: [],
    onReady: [],
    onShow: [],
    onHide: [],
    onUnload: [],
    onPullDownRefresh: [],
    onReachBottom: [],
  };
  // 保存所有的事件，最后一个参数的事件会最先调用。
  for(let name in eventsStack) {
    for(let i = args.length - 1; i >= 0; i--) {
      args[i][name] && eventsStack[name].push(args[i][name])
    }
  }
  Object.assign(...args);
  for(let name in eventsStack) {
    dest[name] = function() {
      for(let i = 0; i < eventsStack[name].length; i++) {
        eventsStack[name][i].apply(this, arguments);
      }
    }
  }
  return dest;
}

es 6

Pfeilfunktionen,

FunktionsparameterStandardwerte und analytische Strukturen

wx.request({
  complete: ({data= {}}) => {
    // 1. 因为 wx.request 返回的接口数据是在 data 属性里，这里我们只要 data 属性就行了，所以直接参数解析构
    // 2. 如果 failed，无 data 时，data 将为默认值 {}
    if(data.code !== 0) {
      // do something if request failed
      return;
    }
    // 请求正常处理代码
    // 3. 因为用的箭头函数，回调里可以正常使用 this, 访问 Page 对象的方法
    // 比如 this.setData(...)
  }
})

Einige Funktionsparameter können Standardparameter auch direkt verwenden .

Erweiterter

-Operator und Objektattributabkürzung Beim Übergeben von Datenparametern an die Vorlage können Sie Objektattributabkürzungen wie

<template is="..." data="{{...obj, id: otherIdVariable, name}}"></template>

Auf diese Weise kann die

-Variable

in der Vorlage als

Schlüssel des obj-Objekts sowie als ID verwendet werden und NameVorlage

String

Sie können die es 6-Vorlagenzeichenfolge direkt und bequem im Applet

verwenden

let url = `${app.globalData.API_PREFIX}/cart/add`;

Weitere es 6 Funktionen

Andere Hinweise

Das wx.showToast-Symbol unterstützt nur „Erfolg“. „ und „loading“, und die Fehlermeldung kommt von Definition

• Wenn die Variablen in der Vorlage keinen Wert haben, überprüfen Sie bitte, ob die Daten übergeben werden.

• Das Entwicklungstool (v0.10.102800) kann die folgende Methode verwenden, um eine Schnittstelle zum Anfordern eines Domänennamens hinzuzufügen, aber leider kann sie nicht in WeChat verwendet werden.

// 放到 app.js 前面
 wxConfig.projectConfig.Network.RequestDomain.push('https://weapp.juanpi.com');

Der JS aller Seiten wird sofort beim Start ausgeführt, und nicht beim Öffnen der Seite, wie es bei einigen der Fall ist Global geschrieben Der Code sollte so oft wie möglich nach onLoad platziert werden. Das Folgende ist der geladene Code aus der

Debug
• -Quelle:

Das obige ist der detaillierte Inhalt vonEine Woche Zusammenfassung der Entwicklung des WeChat-Miniprogramms. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!