Un résumé de l'expérience de développement de mini-programmes WeChat qui mérite d'être lu

Cet article présente principalement un résumé de l'expérience de développement d'applets WeChat qui mérite d'être lu. L'éditeur pense qu'il est plutôt bon, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur et jetons un coup d'œil

1 : Méthode de transmission des valeurs des paramètres

1 : data-id

Nous pouvons ajouter des attributs data-* aux éléments HTML pour transmettre les valeurs dont nous avons besoin. Mode d'emploi :

(1) Définir data-id

<view class="block" bindtap="playTap" data-id="{{modle.id}}">

(2) : Obtenir de la valeur et transmettre la valeur

playTap:function(e) {
    const dataset = e.currentTarget.dataset;
    wx.navigateTo({
     url: '../play/index?id='+ dataset.id
    })
    console.log(dataset.id);
  }

(3) : Obtenir la valeur

onLoad:function (param) {
  //页面初始化
    this.setData({
      currentId:param.id
    })
}

data-Remarque : data-name ne peut pas avoir de majuscules. Une fois, j'ai trouvé cette erreur après une longue recherche à cause d'une majuscule. letter..Les attributs Data-* ne peuvent pas stocker d'objets

2 : Définissez l'identifiant de méthode de id pour transmettre la valeur

Instructions d'utilisation :

(1) Définir l'identifiant

<view bindtap=“playTap" id="{{modle.id}}">

(2) Obtenir la valeur

Obtenir le paramètre via e.currentTarget .id La valeur de l'identifiant, puis transmettre la valeur en définissant l'objet global

3 : Ajouter des paramètres dans le navigateur pour transmettre la valeur

Instructions d'utilisation

(1) Passage de la valeur : Après l'url de l'attribut du navigateur, splice ?id (nom du paramètre) = la valeur à transmettre (si plusieurs paramètres sont séparés par & et nom=valeur&…….)

<navigator url="../my/my?id={{item.id}}" wx:for="{{modles}}">

(2) Valeur :

onLoad (params){
    app.fetch(API.detail + params.id,(err,data) => {
    })
  }

2 : Encapsulation de la demande de données

1. Mettez toutes les interfaces dans un fichier js unifié et exportez

const api = {
  interface1: 'https://........',
   interface2: 'https://.......',
   interface3: 'https://....',
   .....
}
module.exports = api;

2 : Créer une méthode pour encapsuler les données de la requête dans app.js

fetch(url,data, callback) {
   wx.request({
     url,
     data: data,
     header: {
       'Content-Type': 'application/json'
     },
     success(res) {
       callback(null, res.data);
     },
     fail(e) {
       callback(e);
     }
   })
 },

3 : Appelez la méthode encapsulée dans la sous-page pour demander des données

import API from "../../api/api.js";
const app = getApp();
const conf = {
  data:{
    title:'正在拼命加载中...',
    loadding:true
  },
  onLoad (){
    app.fetch(API.hot,{},(err,data) => {
    })
  },

Trois : Utiliser des modèles (j'ai trouvé que les modèles sont vraiment de bonnes choses !)

1 : Définir le modèle : nom Définir le nom du modèle

<template name="homecell">
   <view class="item">
  </view>
 </template>

2 : Utiliser des modèles

Première présentation du modèle

<import src="../../commonXml/homecell.wxml" />

puis utiliser le modèle, c'est écrire Le nom du modèle... est transmis via des données et doit être des données

<template is="homecell" data="{{item}}"></template>

Quatre : les attributs et méthodes d'Array plus faciles à utiliser

La méthode Array.isArray() est utilisée pour déterminer si une valeur est un tableau. Si c'est le cas, renvoie vrai, sinon renvoie faux. La méthode

concat() combine le tableau entrant ou la valeur non-tableau avec le tableau d'origine pour former un nouveau tableau et le renvoie

la méthode forEach() est exécutée une fois pour chaque élément du. array La fonction fournie (fonction de rappel). La méthode

join() joint tous les éléments du tableau en une chaîne.

La méthode keys() renvoie un itérateur d'indices de tableau.

La méthode map() renvoie un nouveau tableau composé de la valeur de retour de l'appel d'une méthode spécifiée sur chaque élément du tableau d'origine.

La méthode pop() supprime le dernier élément d'un élément du tableau et renvoie cet élément.

La méthode push() ajoute un ou plusieurs éléments à la fin du tableau et renvoie la nouvelle longueur du tableau (valeur de l'attribut length).

toString() renvoie une chaîne représentant le tableau spécifié et ses éléments.

Cinq : Méthodes communes aux objets

1 Méthode d'initialisation

var obj = [];
var obj = new obj();
var obj = Object.create(null);

2 Méthodes d'ajout d'éléments

dic[“key”] = “value”;

3 Méthodes de suppression de clés

delete dic[“key”];

4 Effacer toutes les entrées du mot

dic.clear();

5 Supprimer

delete dic;

6 méthodes pour afficher tous les attributs

Object.keys(obj);

Tous les noms de clés de l'objet sont des chaînes, ils peuvent donc être ajoutés ou non dans guillemets. Si le nom de la clé est une valeur numérique, il sera automatiquement converti en chaîne. Cependant, si le nom de la clé ne remplit pas les conditions du nom d'identification (par exemple, le premier caractère est un nombre ou contient un espace). ou opérateur), et ce n'est pas un numéro, il faut ajouter des guillemets, sinon une erreur sera signalée

7 Lire les attributs

obj.name || obj['name']

<🎜. >

Remarque : les opérateurs point ne peuvent pas être utilisés pour les noms de touches numériques (car ils seront traités comme des points décimaux), seul l'opérateur crochet peut être utilisé.

8 Vérifier si la variable est déclarée

if(obj.name) || if(obj['name'])

9 L'opérateur in permet de vérifier si l'objet contient un attribut, et renvoie vrai si c'est le cas, sinon renvoie faux

if ( ‘x' in obj) {return 1}

10 pour… en boucle

est utilisé pour parcourir toutes les propriétés d'un objet

for (var i in obj) {
console.log(obj);
}

11 avec instruction

Fonction : offre une certaine commodité d'écriture lors de l'utilisation de plusieurs attributs du même objet

with(obj) {
name1 = 1;
name2 = 2;
}

est équivalent à

obj.name1 = 1;
obj.name2 = 2;

Ce qui précède est tout le contenu de cet article, je J'espère que cela sera utile à l'étude de tout le monde. J'espère également que tout le monde soutiendra le site Web PHP chinois.

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!