Résumer un exemple du processus de développement de WeChat

Éditeur

J'utilise directement vscode (il en va de même pour les autres éditeurs, et j'utilise toujours les outils de développement WeChat pour la prévisualisation) , mettez en surbrillance la syntaxe et définissez wxml sur html et wxss sur css

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

Vous pouvez également installer des plug-ins liés aux mini-programmes

Commencer à écrire du code

• Tout d'abord, vous devez lire le document de l'applet WeChat (framework, composants et API) dans son intégralité pour faciliter la recherche ultérieure.

• le composant de vue correspond à p

• le texte correspond à span

• le sélecteur wxss ne prend en charge que l'élément , #id, .className, ::after, ::before

Composants publics

Créez de nouveaux composants dans le répertoire du projet, appuyez sur Similaire à la structure du répertoire des pages, placez les modèles, styles et fichiers js de chaque composant dans le même dossier

• Le modèle peut être directement ae106ff928f73220d3dc5805cd7823af Ou si vous devez transmettre une valeur, utilisez le style de3db5173ba162146856f74f89e5f81e + d477f9ce7bf77f53fbcf36bec1b69b7a21c97d3a051048b8e55e3c8f199a54b2

• en utilisant @import pour importer

• js est introduit dans la page à l'aide de require, puis chargé dans l'objet de page à l'aide de mergePage ci-dessous.

  fc430c7db1eecf4621f4fc8a5479f894

mergePage

• Chargement des composants

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

Utilisez la méthode mergePage pour enregistrer toutes les méthodes de composant et les événements de page dans l'objet page

• Écriture des composants Méthode

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

Vous pouvez utiliser this.setData dans le composant pour mettre à jour les données de la page, ou enregistrer onLoad, onShow et d'autres événements de page L'événement du dernier paramètre de mergePage. sera appelé en premier.

• code source de 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

fonction de flèche, Valeurs par défaut et structure analytique des paramètres de fonction

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

Certains paramètres de fonction peuvent également utiliser directement les paramètres par défaut.

Opérateurs d'expansion et abréviations d'attributs d'objet

Lorsque vous transmettez des paramètres de données au modèle, vous pouvez utiliser des abréviations d'attributs d'objet, telles que

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

De cette façon, toutes les clés dont les variables sont des objets obj peuvent être utilisées dans le modèle, ainsi que l'identifiant et le nom

La chaîne du modèle

peut être utilisé directement et facilement dans l'applet. Utilisez es 6 chaînes de modèles

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

Plus de fonctionnalités es 6

Autres notes

• L'icône wx.showToast ne prend en charge que le "succès" et le "chargement", l'invite d'erreur doit être personnalisée

• Si les variables du modèle n'ont aucune valeur, veuillez consulter les données.

• L'outil de développement (v0.10.102800) peut utiliser la méthode suivante pour ajouter une interface permettant de demander un nom de domaine, mais malheureusement il ne peut pas être utilisé dans WeChat.

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

• Le JS de toutes les pages sera exécuté immédiatement au démarrage, plutôt qu'à l'ouverture de la page, donc certains sont écrit globalement Le code doit être placé après onLoad autant que possible. Voici le code chargé vu depuis la source Debug :

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

[Recommandations associées. ]

1. Téléchargement du code source de la plateforme de compte public WeChat

2 Résumé des techniques de mise en page de l'interface utilisateur de développement d'applets WeChat

. 3. Développement WeChat du paiement WeChat

4 Résumé intéressant de l'expérience de développement du mini-programme 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!