Résumé d'une semaine du développement du mini-programme WeChat

Ce qui suit est un résumé de la semaine de développement de l'applet WeChat. J'espère qu'il sera utile aux étudiants sur le site Web PHP chinois.

Éditeur

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

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

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

et 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

Composant public

projet Créer de nouveaux composants dans le répertoire, suivez une structure de répertoires similaire aux pages , et placez les modèles, styles et fichiers js de chaque composant dans le même dossier

• Le modèle peut être directement ou utiliser le style +

• si vous en avez besoin. pour passer une valeur, @import importe

• js en utilisant require pour l'introduire dans la page, puis utilise la mergePage suivante pour la charger dans la page objet .

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 composants et les événements de page dans l'objet page

• Comment écrire des composants

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 vous inscrire onLoad, onShow et autres événements de page, mergePage L'événement avec le dernier paramètre sera appelé en premier.

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

Fonctions fléchées, Paramètres de fonctionValeurs par défaut et structures analytiques

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érateur étendu et abréviation d'attribut d'objet

Lorsque vous transmettez des paramètres de données au modèle, vous pouvez utiliser l'abréviation d'attribut d'objet, telle que

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

De cette façon, la variable peut être utilisée dans le modèle pour être toutes les clés de l'objet obj, ainsi que l'identifiant et nom

modèle Chaîne

Vous pouvez utiliser directement et facilement la chaîne de modèle es 6 dans l'applet

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 "succès " et " chargement ", et le message d'erreur provient de la définition

• Si les variables du modèle n'ont aucune valeur, veuillez vérifier si les données sont transmises.

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

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!