Fassen Sie ein Beispiel für den WeChat-Entwicklungsprozess zusammen

Editor

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

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

Sie können auch Mini-Programm-bezogene Plug-Ins installieren

Beginnen Sie mit dem Schreiben von Code

• 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 Komponenten

Neue Komponenten im Projektverzeichnis erstellen, auf „Ähnlich“ klicken Platzieren Sie in der Seitenverzeichnisstruktur die Vorlagen, Stile und JS-Dateien jeder Komponente im selben Ordner

• Die Vorlage kann direkt Oder wenn Sie einen Wert übergeben müssen, verwenden Sie den Stil

• js wird mit require in die Seite eingeführt und dann mit mergePage unten in das Seitenobjekt geladen.

• mergePage

Laden von Komponenten

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

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

Schreiben von Komponenten Methode

• Sie können this.setData in der Komponente verwenden, um Seitendaten zu aktualisieren oder onLoad, onShow und andere Seitenereignisse zu registrieren. Das Ereignis des letzten Parameters von mergePage wird zuerst aufgerufen.

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

MergePage-Quellcode

• es 6

/**
 * 合并 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;
}

Pfeilfunktion, Standardwerte und analytische Struktur von Funktionsparametern

Einige Funktionsparameter können Standardparameter auch direkt verwenden.

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

Erweiterungsoperatoren und Objektattributabkürzungen

Bei der Übergabe von Datenparametern an die Vorlage können Sie Objektattributabkürzungen verwenden, z. B.

Auf diese Weise können alle Schlüssel, deren Variablen obj-Objekte sind, in der Vorlage verwendet werden, ebenso wie die ID und der Name

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

Die Vorlagenzeichenfolge

kann direkt und bequem im Applet verwendet werden. Verwenden Sie es 6-Vorlagenzeichenfolgen

Weitere es 6-Funktionen

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

Sonstige Hinweise

Das wx.showToast-Symbol unterstützt nur „Erfolg“ und „Laden“, die Fehlermeldung muss angepasst werden

• Wenn Die Variablen in der Vorlage haben keinen Wert, bitte sehen Sie sich die Daten an. Ist sie nicht eingegangen?

• 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:

• [Verwandte Empfehlungen ]

1.

Quellcode für die WeChat-Applet-Entwicklung herunterladen

define("pages/index/index.js", function(require, module, exports, window,document,frames,self,location,navigator,localStorage,history,Caches,screen,alert,confirm,prompt,XMLHttpRequest,WebSocket ){ 'use strict';
var app = getApp();
var util = require('../../../utils/util');
var ErrorMsg = require('../../../components/error-msg/error-msg');
var AddressPicker = require('../../../components/address-picker/address-picker');
Page(util.mergePage({
  // 页面代码省略
}, AddressPicker, ErrorMsg));
//# sourceMappingURL=data:application/json;...
});require("pages/index/index.js")

2 3.

WeChat-Entwicklung von WeChat Payment

4.

Sehenswerte Zusammenfassung der WeChat-Applet-Entwicklungserfahrungen

Das obige ist der detaillierte Inhalt vonFassen Sie ein Beispiel für den WeChat-Entwicklungsprozess zusammen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!